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