Click to Pay Setup

import SecureFields from "@gr4vy/secure-fields";
// set up the environment
const gr4vyId = "example";
const environment = "sandbox";
const sessionId="8e2adc90-681d-442b-acd4-2d5182e62c72"
// initialize the SDK
const secureFields = new SecureFields({
  gr4vyId,
  environment,
  sessionId,
});
// enable debugging
secureFields.setDebug(true);

<form id="cc-form">
  <!-- You can add your own fields as well as secure fields -->
  <label for="cc-holder-name">Name</label>
  <input id="cc-holder-name" placeholder="Name on the card" />

  <!-- These are fields that will become secure fields -->
  <label for="cc-number">Card Number</label>
  <input id="cc-number" />

  <label for="cc-expiry-date">Expiry date</label>
  <input id="cc-expiry-date" />

  <label for="cc-security-code">Security Code</label>
  <input id="cc-security-code" />

  <input type="submit">Pay</button>
</form>

// Add fields using a querySelector compatible string
const number = secureFields.addCardNumberField("#cc-number", {
  placeholder: "Enter card number",
});

const securityCode = secureFields.addSecurityCodeField("#cc-security-code", {
  placeholder: "Enter CVV",
});

// Alternatively an HTML element can be passed directly
const expiryDate = secureFields.addExpiryDateField(
  document.querySelector("#cc-expiry-date"),
  {
    placeholder: "Enter expiry date",
  }
);

<div id="click-to-pay"></div>

<!-- Small form to let users sign in with Click to Pay, hidden by default -->
<div id="click-to-pay-sign-in" style="display: none;">
  <label>Access your Click to Pay stored cards</label>
  <input type="text" id="phoneOrEmail" />
  <button id="signInButton">Continue</button>
</div>

<form id="cc-form" style="display: none;">
  <!-- ...Secure fields inputs added previously -->

  <input type="checkbox" id="click-to-pay-consent-checkbox" />
  <label for="click-to-pay-consent-checkbox">
    Store my card with Click to Pay. <a href="javascript:void(0)" id="click-to-pay-learn-more-link">Learn more</a>
  </label>

  <input type="submit">Pay</button>
</form>

<script>
  var phoneOrEmail = document.querySelector('#phoneOrEmail')
  var signInButton = document.querySelector('#signInButton')
  signInButton.addEventListener('click', function () {
    clickToPay.signIn({ email: phoneOrEmail.value })
  })
</script>

const clickToPay = secureFields.addClickToPay('#click-to-pay', {
  srcDpaId: '{SRC_DPA_ID}',
  dpaName: '{DPA_NAME}',
  dpaLocale: 'en_AU',
  cardBrands: ['mastercard', 'visa', 'american-express'],
  consentCheckbox: "#click-to-pay-consent-checkbox",
  learnMoreLink: "#click-to-pay-learn-more-link",
  cardForm: "#cc-form",
  signIn: "#click-to-pay-sign-in"
  // email: 'john@example.com', // optional: define a Click to Pay user e-mail instead of capturing it with the sign-in form
  /* mobileNumber: {
    countryCode: "61",
    phoneNumber: "491570159"
  }, */ // optional: define a Click to Pay user phone instead of capturing it with the sign-in form
})

document.querySelector('#cc-form').addEventListener(
  "submit",
  (e) => {
    e.preventDefault()
    secureFields.submit()
  }
)

secureFields.addEventListener(
  SecureFields.Events.CARD_VAULT_SUCCESS,
  () => {
    // Make an API call to your server to complete the transaction
  }
)

secureFields.addEventListener(
  SecureFields.Events.CARD_VAULT_FAILURE,
  () => {
    // Handle the inability to store the card data
  }
)

secureFields.addEventListener(
  SecureFields.Events.CLICK_TO_PAY_ERROR,
  ({ error }) => {
    console.error(error);

    if ((error.code === 'RETRIES_EXCEEDED' || 
          error.code === 'SIGN_OUT_FAILED') &&
          clickToPay) {
      // Hide the Click to Pay form
      clickToPay.hide();
    }
  }
)

// Listen for the different Click to Pay events
secureFields.addEventListener(
  SecureFields.Events.METHOD_CHANGE, () => {
    console.log('Method changed');
  }
)