Initialize the SDK

<script src="js.gravity-legal.com/hosted-fields.js" />

// Or in the Sandbox Environment

<script src="js.sandbox.gravity-legal.com/hosted-fields.js" />

const myListener = (e) => {
  if (e.data === 'confido_hosted_fields_script_loaded') {
    console.log('sdk is loaded!');
  }
};

window.addEventListener('message', myListener);

// 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,
    },
  },
});