VGS Collect (React)

by VeryGoodFiddle

HTML

<script src="https://js.verygoodvault.com/vgs-collect/1/vgs-collect-examples.js"></script>
<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>
<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.ssn = {};
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
  
  componentDidMount() {
  	this.form = VGSCollect.create('tntq4dwvhri', function(state) {});
    
    const css = {
    	border: '1px solid #ccc',
      boxSizing: 'border-box',
      borderRadius: '4px',
      '&:focus': {
      	border: '1px solid green',
      }
    }
  	
   this.ssn = this.form.field('#ssn', {
      type: 'text',
      name: 'ssn',
      lineHeight: '24px',
      validations: ['required', /^\d{3}-?\d{2}-?\d{4}$/],
      serializers: [this.form.SERIALIZERS.replace('-', '', 2)],
      inputMode: 'numeric',
   }).mask('999-99-9999');
  }
  
  handleSubmit(e){
  	e.preventDefault();
  	this.form.submit('/post', {}, function(status, response) {});
  }
  
  handleClick(e) {
  	this.ssn.focus();
  }
  
  render() {
    return (
    <form onSubmit={this.handleSubmit}>
      <div id="ssn-container" className="form-group" onClick={this.handleClick}>
        <label class="label">SSN</label>
        <div className="form-control-static">
          <span className="fake-input" id="ssn"></span>
        </div>
      </div>
      <button type="submit" className="btn btn-sm btn-primary">Submit    
      </button>
    </form>
    )
  }
}

ReactDOM.render(<CheckoutForm />, document.querySelector("#app"))