For complete sample code please refer here
Use: iStatus.success
Use: c2pEnvironment.sandbox
Use: c2pReviewAction.pay
The Main object that contains all the information necessary to communicate with Click-To-Pay API.
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 Please click for the sample code
onPaymentPrefill
Function
Yes
A callback function that returns the final price and tax calculations. Please click 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 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 . Please click for the sample code
onPaymentCancel
Function
No
A callback function to be called when user cancels. Please click for the sample code
onPaymentError
Function
No
A callback function to be called when payment errors out. Please click for the sample code
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
Name
Type
Description
status
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.
String
const iStatus = {
success: 100,
unsupported: -100,
error: -200
}const c2pEnvironment = {
sandbox: 0,
production: 1
}const c2pReviewAction = {
pay: "PAY",
continue: "CONTINUE"
}onCPButtonLoaded: function(resp) {
if (!resp) return;
if (resp.status === iStatus.success) {
showHide("click2payContainer", true);
} else if (resp.reason) {
console.log(resp.reason);
}
}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: function () {
return new Promise(function (resolve, reject) {
try {
//Do some validation here
resolve(iStatus.success);
} catch (err) {
reject(err);
}
});
}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: function (payload) {
logError("Click-To-Pay Cancelled", payload);
//Do some custom logic here
}onPaymentCancel: function (payload) {
logError("Click-To-Pay Error", payload);
//Do some custom logic here
}