Usage
ClickToPay.configure(configuration)
Example
ClickToPay.configure({
merchant: {
id: "MERCHANTID",
name: "Merchant Name",
url: "https://www.merchantsite.com"
},
session: {
id:"SESSION0002899787259G30902270H6",
wsVersion: 62,
// optional
paymentOptions: [Payment Options Inquiry response],
},
order: {
// display only
amount: "12.12",
currency: "USD"
},
interaction: {
//Billing preference with one of the following values: NONE, FULL, POSTAL_COUNTRY
billingPreference: 'FULL',
collectShippingAddress: true,
locale: 'en_US',
country: 'USA',
cardSelectionAction: 'SELECT_ONLY',
showInlineCardListHeader: true,
suppressPayerInteraction: false,
skipDCFInteraction: false
},
payer: {
// if supplied on configure, the gateway will check if the email address
// of the payer is registered for Click to Pay immediately after loading the SDK
email: ''
},
// Allows you to configure the DOM elements that will contain
// each embedded component. Each component will be rendered as a child of the configured element.
//
// One Time Password (OTP) and Change Channel components should both be rendered into the 'otp' element.
//
elements: {
// REQUIRED
cardList: "#cardListContainer",
// OPTIONAL: if not supplied, render as overlay
otp: "#otpContainer",
// REQUIRED
dcf: '#cardFacilitator'
},
callbacks: {
onComplete: function(correlationId, scheme) {},
/*
Triggered before an element is displayed, this is a hook to allow you to run
JavaScript to customize how the container of the V2 component is displayed.
For example, loading the DCF screen in a bootstrap modal would require custom JavaScript
to execute.
oldState : {
payerState: {
deviceRecognized: true,
email: âpayer@email.comâ, //masked email if not supplied in payer.email
},
elementState: {
cardList: {selector: '#cardListContainer', visible: true},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: false}
}
},
newState: {
payerState: {
deviceRecognized: true,
email: âpayer@email.comâ, //masked email
},
elementState: {
cardList: {selector: '#cardListContainer', visible: false},
otp: {selector:'#otpContainer', visible: false},
dcf: {selector:'#dcfContainer', visible: true}
}
},
diffState: {
elementState: {
dcf: {selector:'#dcfContainer', visible: true}
}
}
selector: the css selector configured for the element
visible: has the element become visible
*/
onStateChange: function() {},
/* On any Error returns below data format
{
errorCode: 'INVALID_INPUT',
errorMessgae: 'session id is required'
}
*/
onError: function() {}
}
);
Arguments
configuration
Object
COMPULSORY
Configuration values
merchant
Object
COMPULSORY
Provide details about your business for display to the payer.
id
String
COMPULSORY
The unique identifier issued to you by your payment service provider.
name
String
COMPULSORY
Your name to be displayed to the payer.
url
String
COMPULSORY
The URL of your website be displayed to the payer.
session
Object
COMPULSORY
Required session data for configuring Click to Pay.
id
String
COMPULSORY
Session ID of the session that contains the details for this payment.
wsVersion
Number
COMPULSORY
API version that you used to create the session.
paymentOptions
object
OPTIONAL
Allows you to provide the Payment Options Inquiry response, if you have already submitted a Payment Options Inquiry request. If provided, the SDK will use this information (instead of submitting Payment Options Inquiry request).
order
Object
COMPULSORY
Required order data for configuring Click to Pay.
amount
String
COMPULSORY
The order amount to be displayed to the payer.
currency
String
COMPULSORY
The order currency to be displayed to the payer.
interaction
Object
OPTIONAL
Required data to configure the Click to Pay interaction.
billingPreference
String
OPTIONAL
Billing preference with one of the following values: NONE, FULL, POSTAL_COUNTRY.
If not provided, the default value is NONE.
cardSelectionAction
String
OPTIONAL
Allows you to choose what action is performed when the payer makes the card selection.
- SELECT_ONLY - The list of cards is displayed using radio buttons. Selecting a radio button will not trigger any action. The payer needs to click the "Continue" button to continue to the next step.
- SELECT_AND_PROCEED (default) - The list of cards is displayed with each card entry being clickable. Selecting an entry will automatically take the payer to the next step.
collectShippingAddress
Boolean
OPTIONAL
Shipping preference with one of the following values: true or false.
If not provided, the default value is set to false.
country
String
OPTIONAL
The ISO 3166 alpha-3 country code of the payer's country, to be used to present country-specific content to the payer during the interaction.
For a Secure Remote Commerce interaction, the payer's country is used to present country-specific content such as Terms and Conditions and you only need to provide it, if you wish to override the default payer country you have configured for Secure Remove Commerce interactions.
locale
String
OPTIONAL
A language identifier or IETF language tag to control the language of the payment interaction with the payer (e.g. en_US, es, fr-CA).
By default, the language is determined from the payer's browser. Supply a value for this field only if you wish to override the default behavior. If the language you specify is not supported by the gateway, the payment is displayed in the best matching language.
suppressPayerInteraction
Boolean
OPTIONAL
Allows you to suppress the Click to Pay interaction with the payer (i.e. the display of any screens) as part of the configure() method.
If set to true, the configure() method will set up the Click to Pay interaction and check if the payer is recognized using their email or a cookie or is a new user. However, the method will not trigger the Click to Pay interaction with the payer. This allows you to display any additional screens to the payer before they proceed to the Click to Pay interaction. To subsequently trigger the Click to Pay interaction you need to use the initiatePayerInteraction() function.
If set to false, the configure() method will set up the Click to Pay interaction, check if the payer is recognized using their email or a cookie or is a new user, as well as trigger the Click to Pay interaction with the payer.
If not provided the value defaults to false.
skipDCFInteraction
Boolean
OPTIONAL
Allows you to skip the Click to Pay DCF interaction with the payer (i.e. the display of any screens) as part of the configure() method. The customer.email and customer.mobilePhone parameters are required within the configure() method for this parameter to take effect.
If set to true, the configure() method will skip the Click to Pay DCF interaction.
If set to false, the configure() method will show the Click to Pay DCF interaction.
If not provided the value defaults to false.
payer
Object
OPTIONAL
Payer data for configuring Click to Pay.
email
String
OPTIONAL
The email address of the payer.
If the payer is recognized as enrolled in Click to Pay based on the cookies, this email is ignored.
Otherwise, the email is used to check if the payer is enrolled in Click to Pay.
mobilePhone
String
OPTIONAL
The payer's mobile phone or cell phone number in ITU-T E123 format, for example +1 607 1234 5678.
The number consists of:
'+' country code (1, 2 or 3 digits) 'space' national number (may include spaces).
The information will be used to prepopulate the payer's email address when the payer decides to enroll in Click to Pay.
firstName
String
OPTIONAL
elements
Object
COMPULSORY
Required elements data for displaying Click to Pay UI components.
cardList
String
COMPULSORY
Id of the DOM element to include the Click to Pay card list.
otp
String
OPTIONAL
Id of the DOM element to include the One Time Password (OTP) interaction.
If not provided, the OTP interaction will be displayed as a modal.
dcf
String
COMPULSORY
Id of the DOM element to include the interaction provided by Click to Pay that allows the payer to enroll, enroll a new card and/or confirm the payment.
callbacks
Object
COMPULSORY
Required callback for returning data back to you after different stages of the checkout flow.
Return Value
None