configure()
Call this function when your application loads the page where you want to present the Click to Pay inline form to the payer.
The function allows you to configure the Click to Pay flow.
Usage Copied to clipboard
ClickToPay.configure(configuration);
Example Copied to clipboard
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 Copied to clipboard
Configuration values.
Provide details about your business for display to the payer.
The unique identifier issued to you by your payment service provider.
Your name to be displayed to the payer.
The URL of your website be displayed to the payer.
Required session data for configuring Click to Pay.
Session ID of the session that contains the details for this payment.
API version that you used to create the session.
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).
Required order data for configuring Click to Pay.
The order amount to be displayed to the payer.
The order currency to be displayed to the payer.
Required data to configure the Click to Pay interaction.
NONE
FULL
POSTAL_COUNTRY
SELECT_ONLYThe 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.
Shipping preference with one of the following values: true or false. If not provided, the default value is set to false.
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.
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.
Allows you to indicate if the inline card list display should include a header with the Click to Pay logo and a list of logos for the supported card schemes. If not provided the value defaults to false.
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.
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 data for configuring Click to Pay.
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.
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.
First name of the payer.
Last name of the payer.
Required elements data for displaying Click to Pay UI components.
Id of the DOM element to include the Click to Pay card list.
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.
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.
Required callback for returning data back to you after different stages of the checkout flow.
Return Value Copied to clipboard
None