Skip to main content

Creating a Card component

You can enable this by calling addCard():

window.addEventListener('load', function () {
  xpanse.init('sandbox', '<public key>')
    .addCard('iframeContainer', '<Card Provider Id>', 'options');
});

options is an object that can contain the following properties:

  • threeDSEmail: email address to use for 3DS authentication
  • amount: amount of the payment
  • currency: currency of the payment
  • clickToPayEnabled: enable Click To Pay feature (can be true or false)
  • clickToPayOptions: Click to Pay options:
    • dpaId: DPA Id
    • dpaName: DPA name
    • cardBrands: card brands which you want to support (can be visa, mastercard, amex, discover, maestro)
    • dpaBillingPreference: billing preference (can be POSTAL_COUNTRY, NONE, FULL)
  • createNetworkToken: enable Create Network Token feature (can be true or false as default)
  • vault: force store card details in the vault (can be true or false as default)
  • verifyCard: enable card verification (can be true or false as default), which will check the card, expiry date and CCV are valid with the provider. Not all providers support this.
  • metadata: additional metadata to send with the payment request (optional), sent as key/value pairs (eg metadata : {key1 : 'value1', key2 : 'value2'})