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

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.fake-input iframe {
  height: 32px;
  max-width: 100%;
  border-radius: 4px;
  padding-left: 4px;
}

React

class CheckoutForm extends React.Component {
  constructor(props) {
    super(props);
    this.form = {};
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  componentDidMount() {
  	this.form = VGSCollect.create('tntdtjyep0t', function(state) {});
    
    const css = {
    	border: '1px solid #ccc',
      boxSizing: 'border-box',
      borderRadius: '4px',
      '&:focus': {
      	border: '1px solid green',
      }
    }
  	
    this.form.field('#cc-name .fake-input', {
      type: 'text',
      name: 'cardholderName',
      placeholder: 'Joe Business',
      validations: ['required'],
      css: css,
		});

    this.form.field('#cc-number .fake-input', {
      type: 'card-number',
      name: 'cardNumber',
      successColor: '#4F8A10',
      errorColor: '#D8000C',
      placeholder: '4111 1111 1111 1111',
      validations: ['required', 'validCardNumber'],
      css: css,
    });

    this.form.field('#cc-expiration-date .fake-input', {
      type: 'card-expiration-date',
      name: 'expDate',
      placeholder: '01 / 2022',
      validations: ['required', 'validCardExpirationDate'],
      css: css,
    });
  }
  
  handleSubmit(e){
  	e.preventDefault();
  	this.form.submit('/cards', {}, function(status, response) {});
  }
  
  render() {
    return (
    <form onSubmit={this.handleSubmit}>
      <div id="cc-name" className="form-group">
        <div className="form-control-static">
          <span className="fake-input"></span>
        </div>
      </div>
      <div id="cc-number" className="form-group">
        <div className="form-control-static">
          <span className="fake-input"></span>
        </div>
      </div>
      <div id="cc-expiration-date" className="form-group">
        <div className="form-control-static">
          <span className="fake-input"></span>
        </div>
      </div>
      <button type="submit" className="btn btn-sm btn-primary">Submit    
      </button>
    </form>
    )
  }
}

ReactDOM.render(<CheckoutForm...