# Click-To-Pay Objects Reference (Request)
***For complete sample code please refer*** [***here***](https://docs.solapayments.com/mobile-wallets/click-to-pay-hosted-checkout/click-to-pay-sample-code)
### **Available dictionary objects**
#### iStatus
```javascript
const iStatus = {
success: 100,
unsupported: -100,
error: -200
}
```
**Use:** iStatus.success
#### c2pEnvironment
```javascript
const c2pEnvironment = {
sandbox: 0,
production: 1
}
```
**Use:** c2pEnvironment.sandbox
#### c2pReviewAction
```javascript
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` | [c2pEnvironment](#c2penvironment) | 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` | [c2pReviewAction](#c2previewaction) | 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**
```javascript
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**
```javascript
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**
```javascript
onPaymentValidate: function () {
return new Promise(function (resolve, reject) {
try {
//Do some validation here
resolve(iStatus.success);
} catch (err) {
reject(err);
}
});
}
```
#### **onPaymentSuccess callback example**
```javascript
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**
```javascript
onPaymentCancel: function (payload) {
logError("Click-To-Pay Cancelled", payload);
//Do some custom logic here
}
```
#### **onPaymentError callback example**
```javascript
onPaymentCancel: function (payload) {
logError("Click-To-Pay Error", payload);
//Do some custom logic here
}
```
***
#### CPButtonLoadedResult Object
| **Name** | **Type** | **Description** |
| -------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| status | [iStatus](#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. |
***
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.solapayments.com/mobile-wallets/click-to-pay-hosted-checkout/click-to-pay-objects-reference-request.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.