The configure( )
function allows you to configure Hosted Session interactions. You can choose to collect payment details either using proxy payment fields hosted by Mastercard Gateway and rendered within an iFrame, or through a digital wallet interaction.
This function can be used to initiate the Multiple Hosted Session functionality.
PaymentSession.configure(configuration, [scope])
PaymentSession.configure({ fields: { // Attach hosted fields to your payment page card: { number: "#card-number", securityCode: "#security-code", expiryMonth: "#expiry-month", expiryYear: "#expiry-year", nameOnCard: "#cardholder-name" }, giftCard: { number: "#gift-card-number", pin: "#gift-card-pin" }, ach: { accountType: "#ach-account-type", bankAccountHolder: "#ach-account-holder", bankAccountNumber: "#ach-account-number", routingNumber: "#ach-routing-number" } }, frameEmbeddingMitigation: ["javascript", "x-frame-options", "csp"], callbacks: { initialized: function(response) { //handle initialization response if(response.status === "ok") { // ... } else if (response.status === "system_error") { console.log(response.message); } }, formSessionUpdate: function(response) { //handle session update response }, visaCheckout: function(response) { //handle Visa Checkout response }, amexExpressCheckout: function(response) { // handle Amex Express Checkout response } }, interaction: { displayControl: { formatCard: "EMBOSSED", invalidFieldCharacters: "REJECT" } }, order: { amount: 10.00, currency: "AUD" }, wallets: { visaCheckout: { enabled: true // Add Visa Checkout API specific attributes here countryCode: "AU", displayName: "Display name", locale: "en_au", logoUrl: "http://logo.logo", payment: { cardBrands: [ "VISA" ] }, review: { buttonAction: "Pay", message: "Message" }, shipping: { acceptedRegions: [ "AU" ], collectShipping: true } } amexExpressCheckout: { enabled: true, // Add Amex Express Checkout API specific attributes here initTags: { "theme": "responsive", "env": "qa", "disable_btn": "false", "button_color": "light", "client_id": "398f9858-5567-434f-a929-242d6fc7fea8", "display_type":"custom" // IF USING OWN IMAGE FOR BUTTON } } } })
The object parameter to specify the configuration for the Hosted Session interaction.
Set the value to PLAIN to format the field with no character spacing. For example:
Set the value to EMBOSSED to format the field with the same character spacing as embossed on a card. For example:
By default, this field is set to PLAIN.
For example, when an X character is passed in a credit card number field.
The default value is REJECT. Consider using ALLOW for a better experience for payers using assistive technology.
true
if you wish to enable Visa Checkout wallet. By default, the value is set to false
.
true
if you wish to enable Amex Express Checkout wallet. By default, the value is set to false
.
wallets.amexExpressCheckout.enabled
is set to true
.
session
.
The optional named instance of a card payment data set within a session. See Multiple Hosted Sessions for more information.