> For the complete documentation index, see [llms.txt](https://docs.solapayments.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.solapayments.com/mobile-wallets/click-to-pay-hosted-checkout/click-to-pay-objects-reference-request.md).
# Click-To-Pay Objects Reference (Request)
***For complete sample code please refer*** [***here***](/mobile-wallets/click-to-pay-hosted-checkout/click-to-pay-sample-code.md)
### **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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.solapayments.com/mobile-wallets/click-to-pay-hosted-checkout/click-to-pay-objects-reference-request.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.