VGS Collect (React)

by VeryGoodFiddle

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js"></script>
<script src="https://js.verygoodvault.com/vgs-collect/1/ACmot7HnZrYNLejARns8S626.js"></script>
<div id="app"></div>

CSS

.hidden {
    display: none;
}

.container {
    padding-top: 50px;
}

.field-space iframe {
    border: 0 none transparent;
    height: 100%;
    vertical-align: middle;
    width: 100%;
}

.field-space {
    width: 100%;
    display: block;
}

.payment-form-example {
    width: 384px;
    background: #ffffff;
    box-shadow: 0 8px 16px rgba(88, 111, 146, 0.24),
    0 2px 6px rgba(88, 111, 146, 0.24);
    border-radius: 16px;
    box-sizing: border-box;
    margin: 0 auto;
}

.payment-form-example .header {
    padding: 32px 40px;
    border-bottom: 1px solid #e5f0ff;
}

.payment-form-example .header .title {
    font-weight: bold;
    font-size: 24px;
    line-height: 43px;
    color: #45484d;
}

.payment-form-example .fields {
    padding: 40px;
}

.payment-form-example .field-container {
    margin-bottom: 20px;
}

.payment-form-example .field-container .field-space {
    height: 40px;
}

.payment-form-example button {
    width: 100%;
    background-color: #3d6299;
    border-radius: 4px;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    color: #cfd8e6;
}

.payment-form-example button:hover,
.payment-form-example button:active,
.payment-form-example button:focus {
    background-color: #3d6299;
    color: #cfd8e6;
}

React

class VgsCardCollectForm extends React.Component {

    constructor(props) {
        super(props);
        this.form = {};	
        this.onFormSubmit = this.onFormSubmit.bind(this);
    }

    componentDidMount() {
        const styles = {
            background: "#FFFFFF",
            border: "1px solid #CED7E6",
            boxSizing: "border-box",
            borderRadius: "4px",
            height: "40px",
            padding: "0 16px",
        };
        const form = window.VGSCollect.create('tntv8bjwzd9', function (state) {
            console.log(state);
        });
        form.field('#cc-name .field-space', {
            type: 'text',
            name: 'cardholderName',
            placeholder: 'Joe Business',
            validations: ['required'],
            css: styles
        });
        form.field('#cc-number .field-space', {
            type: 'card-number',
            name: 'cardNumber',
            successColor: '#4F8A10',
            errorColor: '#D8000C',
            placeholder: '4111 1111 1111 1111',
            validations: ['required', 'validCardNumber'],
            css: styles
        });
        form.field('#cc-exp .field-space', {
            type: 'card-expiration-date',
            name: 'expDate',
            placeholder: '01 / 2022',
            validations: ['required', 'validCardExpirationDate'],
            css: styles
        });
        this.form = form;
    }

    onFormSubmit(e) {
        e.preventDefault();
        this.form.submit("/cards", {}, function (status, data) {});
    }

    render() {
        return (<div className="container">
            <form className="payment-form-example" id="payment-form" onSubmit={this.onFormSubmit}>
                <div className="header">
                    <p className="title">Save Card</p>
                </div>
                <div className="fields">
                    <div id="cc-name" className="field-container">
                        <label htmlFor="cc-name">Card...