Links
Comment on page

Click-To-Pay Objects Reference (Request)

For complete sample code please refer here

Available dictionary objects

iStatus

const iStatus = {
success: 100,
unsupported: -100,
error: -200
}
Use: iStatus.success

c2pEnvironment

const c2pEnvironment = {
sandbox: 0,
production: 1
}
Use: c2pEnvironment.sandbox

c2pReviewAction

const c2pReviewAction = {
pay: "PAY",
continue: "CONTINUE"
}
Use: c2pReviewAction.pay

Request objects

ClickToPayRequest

The Main object that contains all the information necessary to communicate with Click-To-Pay API.
Name
Type
Required
Description
environment
Yes
Can be either c2pEnvironment.sandbox or c2pEnvironment.production
externalClientId
String
Yes
ID assigned to your merchant by Click-To-Pay Registration
click2payContainer
String
Yes
ID of the main div that will host the Click-To-Pay experience
mainCssClass
String
No
Default: c2p-def To override default styling, use this field to provide the name of your own css class
displayWaitScreenAfterCheckout
Boolean
No
Default: true After checkout Click-To-Pay control will be automatically reloaded. This controls if “Wait“ screen is set during that operation
reviewAction
No
Default: c2pReviewAction.pay Controls final Button caption consumer clicks to make the payment
onButtonLoaded
Function
No
A callback function to be called when Click-To-Pay button is loaded. Accepts an object of type CPButtonLoadedResult Please click here for the sample code
onPaymentPrefill
Function
Yes
A callback function that returns the final price and tax calculations. Please click here for the sample code
onPaymentValidate
Function
No
A callback function to be called before Payment is made. Usually used to make custom validations before the payment. Please click here for the sample code
onPaymentSuccess
Function
Yes
A callback function to be called when Click-To-Pay Payment is authorized for the completion of the transaction. This function accepts a parameter of ClickToPayResponse. Please click here for the sample code
onPaymentCancel
Function
No
A callback function to be called when user cancels. Please click here for the sample code
onPaymentError
Function
No
A callback function to be called when payment errors out. Please click here for the sample code

onCPButtonLoaded callback example

onCPButtonLoaded: function(resp) {
if (!resp) return;
if (resp.status === iStatus.success) {
showHide("click2payContainer", true);
} else if (resp.reason) {
console.log(resp.reason);
}
}

onPaymentPrefill callback example

onPaymentPrefill: function(){
const result = {
merchantRequestId: "Merchant defined request ID",
currencyCode: "USD",
description: "...corp Product",
orderId: "Merchant defined order ID",
promoCode: "Merchant defined promo code",
subtotal: roundTo(getAmount(), 2),
shippingHandling: "2.00",
tax: "2.00",
discount: "1.00",
giftWrap: "2.00",
misc: "1.00",
setTotal: function() {
this.total = roundTo(
roundToNumber(this.subtotal, 2)
+ roundToNumber(this.shippingHandling, 2)
+ roundToNumber(this.tax, 2)
+ roundToNumber(this.giftWrap, 2)
+ roundToNumber(this.misc, 2)
- roundToNumber(this.discount, 2)
, 2);
delete this.setTotal;
return this;
}
}.setTotal();
return result;
}

onPaymentValidate callback example

onPaymentValidate: function () {
return new Promise(function (resolve, reject) {
try {
//Do some validation here
resolve(iStatus.success);
} catch (err) {
reject(err);
}
});
}

onPaymentSuccess callback example

onPaymentSuccess: async function(clickToPayResponse) {
return new Promise((resolve, reject) => {
try {
const response = await this.authorize(clickToPayResponse);
console.log(response);
const resp = JSON.parse(response);
if (!resp)
throw "Invalid response: "+ response;
if (resp.xError) {
throw resp;
}
resolve(response);
} catch (err) {
console.error("paymentSuccess error.", JSON.stringify(err));
reject(err);
}
});
}

onPaymentCancel callback example

onPaymentCancel: function (payload) {
logError("Click-To-Pay Cancelled", payload);
//Do some custom logic here
}

onPaymentError callback example

onPaymentCancel: function (payload) {
logError("Click-To-Pay Error", payload);
//Do some custom logic here
}

CPButtonLoadedResult Object

Name
Type
Description
status
iStatus
There are be 3 possible cases:
  • Click-To-Pay Button loaded successfully: status = iStatus.success
  • An error occurred while loading Click-To-Pay Button: status = iStatus.error
reason
String
If Click-To-Pay Button failed to load this field will be populated with the reason.