Click-To-Pay Objects Reference (Request)
const iStatus = {
success: 100,
unsupported: -100,
error: -200
}
Use: iStatus.success
const c2pEnvironment = {
sandbox: 0,
production: 1
}
Use: c2pEnvironment.sandbox
const c2pReviewAction = {
pay: "PAY",
continue: "CONTINUE"
}
Use: c2pReviewAction.pay
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 | |
onPaymentError | Function | No |
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
}
Name | Type | Description |
status | There are be 3 possible cases:
| |
reason | String | If Click-To-Pay Button failed to load this field will be populated with the reason. |