Configuring the Drop In UI

To create a drop-in UI:

window.addEventListener('load', function () {
  xpanse.init('sandbox', '<public key>')
    .addDropIn('<container id>', '<amount>', '<3-letter currency code>', 'options');
});

options is an object that can contain the following properties:

paypalEnablePayIn4: enable Paypal Pay in 4 (can be true or false)
paypalButtonStyle: modify the PayPal buttons to change the color of the button (can be gold, blue, silver, white, black)
cardProviderId: use a specific card provider Id
paypalProviderId: use a specific PayPal provider Id
payToProviderId: use a specific payTo provider Id
threeDSEmail: email address to use for 3DS authentication
payToMaximumAmount: maximum amount parameter for PayTo payment method
payToDescription: description parameter for PayTo payment method
redirectUrl: use to redirect to merchant web site
upiOptions: options for UPI payment method
- documentId: document id for UPI payment method
- name: a customer name for UPI payment method
- email: a customer email for UPI payment method
- subscriptionFrequencyUnit: a frequency unit for UPI payment method (can be ONDEMAND, DAILY, WEEKLY, MONTHLY, YEARLY)
- subscriptionFrequency: a frequency for UPI payment method (a number)
- subscriptionStartAt: a start date for a subscription (in format yyyyMMdd)
- subscriptionEndAt: a end date for a subscription (in format yyyyMMdd)
googlePayOptions: options for Google Pay payment method
- providerId: use a specific Google Pay provider Id
- gateway: the payment gateway to use for Google Pay (if you want to override the gateway used by the provider)
- googlePayGatewayMerchantId: the Google Pay gateway merchant ID (if you want to override the googlePayGatewayMerchantId used by the provider)
- googlePayMerchantId: the Google Pay merchant ID (if you want to override the googlePayMerchantId used by the provider)
- googlePayMerchantName: the Google Pay merchant name (if you want to override the googlePayMerchantName used by the provider)
applePayOptions: options for Apple Pay payment method
- providerId: use a specific Apple Pay provider Id
- providerType: type of the Apple Pay provider for the given providerId
- lineItemLabel: label for the line item in Apple Pay
- merchantIdentifier: merchant identifier for Apple Pay
- domainName: domain name for Apple Pay
- displayName: display name for Apple Pay
- clientParameters: additional client parameters for Apple Pay (optional, can be used to pass custom data to the provider)
clickToPayEnabled: enable Click to Pay (can be true or false)
clickToPayOptions: options for Click to Pay payment method
- dpaId: the DPA ID for Click to Pay (if you want to use a specific DPA)
- dpaName: the DPA name for Click to Pay (optional)
- useFpan: use FPAN (real card numbers instead of network tokens) for Click to Pay (can be true or false)
- cardBrands: an array of card brands to use for Click to Pay (optional, can be used to limit the card brands available)
- dpaBillingPreference: billing preference for Click to Pay (can be NONE, FULL, or POSTAL_COUNTRY)
- confirmPayment: confirm payment after the card is added (can be true or false)
- locale: locale for Click to Pay (default is en_AU)
- savedCardsOptions: options for saved cards
  - align: alignment of the saved cards block (can be left or center)
- saveCard: save card details (can be true or false, default is true)
- tokenAuthenticationEnabled: enable token authentication for Click to Pay (can be true or false)
- networkTokenOptions: options for network token creation
  - acquirerMerchantId: acquirer merchant ID for network token
  - acquirerBIN: acquirer BIN for network token
  - merchantCategoryCode: merchant category code for network token
  - authenticationReasons: an array of authentication reasons for network token (optional, can be used to pass custom data to the provider)
cardFormStyle: style for the card form (can be default, compact)
tokenAuthenticationEnabled: enable token authentication (can be true or false)
createNetworkToken: enable network token creation (can be true or false)
networkTokenOptions: options for network token creation
- acquirerMerchantId: acquirer merchant ID for network token
- acquirerBIN: acquirer BIN for network token
- merchantCategoryCode: merchant category code for network token
- authenticationReasons: an array of authentication reasons for network token (optional, can be used to pass custom data to the provider)
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.
allowedPaymentTypes: an array of allowed payment types (can be ['card', 'paypal', 'applepay', 'googlepay', 'upi', 'payto', 'payid', 'shift', 'pesapal', 'paybyaccount', 'payglocal', 'zip']).
metadata: additional metadata to send with the payment request (optional), sent as key/value pairs (eg metadata : {key1 : 'value1', key2 : 'value2'})