Skip to main content

​
Load the script

Include the JavaScript SDK on each page of your site where your payment form exists. It should always be loaded directly with a script tag rather than included in a bundle. 
<script src="js.gravity-legal.com/hosted-fields.js" />

// Or in the Sandbox Environment

<script src="js.sandbox.gravity-legal.com/hosted-fields.js" />
The script will use window.postMessage to post a message when it has finished loading and is ready for initialization. You can set up a listener to get notified. 
const myListener = (e) => {
  if (e.data === 'confido_hosted_fields_script_loaded') {
    console.log('sdk is loaded!');
  }
};

window.addEventListener('message', myListener);
Then initialize the SDK with the Payment Token. For a more detailed explanation of the init() method, see the Hosted Fields SDK Reference Docs. 
// Optional CSS styles to customize the
// look of the fields
const fieldStyles = {
  border: 'none',
  color: 'rgb(26, 32, 44)',
  'font-weight': 400,
  height: '38px',
  width: '100%',
  'font-size': '16px',
};

window.confidoHostedFields.init({
  paymentToken,
  activeForm: 'card',
  fields: {
    accountNumber: {
      containerId: 'account-number',
      style: fieldStyles,
    },
    accountHolderName: {
      containerId: 'account-holder-name',
      style: fieldStyles,
    },
    routingNumber: {
      containerId: 'routing-number',
      style: fieldStyles,
    },
    cardNumber: {
      containerId: 'card-number',
      style: fieldStyles,
    },
    cardExpirationDate: {
      containerId: 'card-exp',
      style: fieldStyles,
    },
    cardSecurityCode: {
      containerId: 'card-cvv',
      style: fieldStyles,
    },
  },
});