Usage
PaymentSession.configure(configuration, [scope])
Example
PaymentSession.configure({
session: "<your_session_ID>",
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
}
}
}
})
Arguments
configuration
Object
COMPULSORY
The object parameter to specify the configuration for the Hosted Session interaction.
Fields:
session
String
The unique identifier for the session. If you do not provide a sessionID the client library creates one.
fields
Object
OPTIONAL
An object containing selectors for the payment fields you want to replace with the corresponding proxy fields, which are hosted by MasterCard Payment Gateway and rendered within an iFrame. The proxy fields will have the same look and feel as the replaced fields.
card
String
OPTIONAL
A container for the card fields.
number
String
OPTIONAL
A selector for the card number field.
securityCode
String
OPTIONAL
A selector for the security code field.
expiryMonth
String
OPTIONAL
A selector for the expiry month field.
expiryYear
String
OPTIONAL
A selector for the expiry year field.
nameOnCard
String
OPTIONAL
A selector for the cardholder name field.
giftCard
String
OPTIONAL
A container for the gift card fields.
number
String
OPTIONAL
A selector for the gift card number field.
pin
String
OPTIONAL
A selector for the gift card PIN field.
ach
String
OPTIONAL
A container for the Automated Clearing House payment fields.
accountType
String
OPTIONAL
A selector for the Automated Clearing House account type field.
bankAccountHolder
String
OPTIONAL
A selector for the Automated Clearing House accountholder field.
bankAccountNumber
String
OPTIONAL
A selector for the Automated Clearing House account number field.
routingNumber
String
OPTIONAL
A selector for the Automated Clearing House routing number field.
frameEmbeddingMitigation
String
COMPULSORY
interaction
Object
OPTIONAL
Control the payer's interaction with the payment process.
displayControl
Object
OPTIONAL
Control the visibility of, and payer interaction with, the displayed information.
formatCard
Enum
OPTIONAL
This field controls the formatting of the card number field.
Set the value to PLAIN to format the field with no character spacing. For example:
- 375987654321002
- 5412750123450988
Set the value to EMBOSSED to format the field with the same character spacing as embossed on a card. For example:
- 3759 876543 21002
- 5412 7501 2345 0988
By default, this field is set to PLAIN.
invalidFieldCharacters
Enum
OPTIONAL
Control the behavior when invalid characters are entered by the payer.
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.
wallets
Object
OPTIONAL
An object containing the configuration for a wallet interaction. Currently, you can only initiate a Visa Checkout or an Amex Express Checkout interaction.
visaCheckout
Object
OPTIONAL
An object containing configuration for a Visa Checkout wallet interaction. See Visa Checkout integration guidelines on how to retrieve the payment details from a Visa Checkout interaction.
enabled
Boolean
OPTIONAL
Set this to true
if you wish to enable Visa Checkout wallet. By default, the value is set to false
.
amexExpressCheckout
Object
OPTIONAL
An object containing configuration for an Amex Express Checkout wallet interaction. See Amex Express Checkout integration guidelines on how to retrieve the payment details from an Amex Express Checkout interaction.
enabled
Boolean
OPTIONAL
Set this to true
if you wish to enable Amex Express Checkout wallet. By default, the value is set to false
.
intiTags
Object
OPTIONAL
An object containing initialization tag configuration for a Amex Express Checkout wallet interaction. Use this to provide parameters defined in the Amex Express Checkout Init Tags API. This object is required if wallets.amexExpressCheckout.enabled
is set to true
.
order
Object
OPTIONAL
An object containing order data required for the wallet interaction. Optionally, you can provide this order data in the session
.
callbacks
Object
OPTIONAL
An object that specifies functions to be invoked for various Hosted Session events.
initialized
Function
OPTIONAL
A function to be invoked when a wallet interaction is initialized.
formSessionUpdate
Function
OPTIONAL
A function to be invoked when the session is updated.
visaCheckout
Function
OPTIONAL
A function to be invoked when the Visa Checkout interaction is completed.
amexExpressCheckout
Function
OPTIONAL
A function to be invoked when the Amex Express Checkout interaction is completed.
scope
String
OPTIONAL
The optional named instance of a card payment data set within a session. See Multiple Hosted Sessions for more information.