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
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.
Fixed value
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.
Fixed value
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.
Fixed value
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.
Fixed value
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.
showInlineCardListHeader Boolean OPTIONAL
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.
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.
Fixed value
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
First name of the payer.
lastName String OPTIONAL
Last name of the payer.
elements Object COMPULSORY
Required elements data for displaying Click to Pay UI components.
Fixed value
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