# Native Checkout Integration

Integrate with the Native Checkout API to build the checkout page for your sites/apps. Users complete the payment in your sites/apps and there's no need to skip to external pages. You can completely control your users' checkout experience.

### Step 1: Create Payment Order

## Submit payment order and receive payment address

<mark style="color:green;">`POST`</mark> `https://admin.ccpayment.com/ccpayment/v1/bill/create`

Return receiving address/QR code and order information

#### Headers

| Name                                           | Type   | Description                                                                                                                                                                                |
| ---------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Sign<mark style="color:red;">\*</mark>         | String | SHA-256 (APPID + APP Secret +timestamp+<mark style="color:red;">**body (json string)**</mark>). [Signature guide](https://docs.ccpayment.com/ccpayment-v1.0-api/to-get-started/signature). |
| Timestamp<mark style="color:red;">\*</mark>    | String | Timestamp in seconds (10-digit). The request is valid for two minutes.                                                                                                                     |
| Appid<mark style="color:red;">\*</mark>        | String | Merchant's unique credential. Find it on the [Developer page](https://admin.ccpayment.com/developer/config)                                                                                |
| Content-Type<mark style="color:red;">\*</mark> | String | application/json; charset=utf-8                                                                                                                                                            |

#### Request Body

| Name                                                    | Type    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| ------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| remark                                                  | String  | Remark                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| merchant\_order\_id<mark style="color:red;">\*</mark>   | String  | Order ID in Merchant's system. A unique ID for every order                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| product\_price<mark style="color:red;">\*</mark>        | String  | Amount should be paid for this order (in USD by default, no more than two digits after the dot)                                                                                                                                                                                                                                                                                                                                                                                                                |
| token\_id<mark style="color:red;">\*</mark>             | String  | Tells CCPayment's server which coin and which network should be used for the transaction. You can get the token\_id by [calling the interface](https://docs.ccpayment.com/ccpayment-v1.0-api/resources-document/token-id-interface) or find it [on this sheet](https://bit.ly/CCsupportedcoins)                                                                                                                                                                                                                |
| denominated\_currency<mark style="color:red;">\*</mark> | String  | Currency for the order. Pass "token" if you want to show the price in crypto. Pass corresponding [currency code](https://doc.ccpayment.com/ccpayment-for-developer/resources-document/list-of-denominated-currency-for-api-payment) if you want to show the price in fiat.                                                                                                                                                                                                                                     |
| order\_valid\_period                                    | Integer | <p>The valid duration for the order. </p><p><br>Time period in seconds (10 digits).</p><p><br>The parameter passed by the merchant should be less than the order's valid period in Merchant's system. Cause on-chain transactions may need some time to proceed.</p><p><br>BTC will arrive within 24 hours and other tokens will usually arrive within 30 minutes.</p><p></p><p>Orders will be valid for 24 hrs by default. The max valid duration is 10 days (max valid duration for Satoshi is 2 hours).</p> |
| custom\_value                                           | String  | Merchant custom field - This custom value field will be returned in transaction status notification.                                                                                                                                                                                                                                                                                                                                                                                                           |
| notify\_url                                             | String  | The URL address will be notified via a POST request when the order status changes. Ensure the URL is accessible to receive notifications from the payment platform.                                                                                                                                                                                                                                                                                                                                            |

{% tabs %}
{% tab title="200: OK Success (200)/Fail (200)" %}
{% tabs %}
{% tab title="Success (200)" %}

#### **Response (Success 200)**

**Header**

**Body**

```json
{
	"code": 10000,
	"msg": "success",
	"data": {
		"amount": "0.5",//new parameter name: product_price
		"order_id": "202301090616511612332555323101184",
		"logo": "https://resource.cwallet.com/token/icon/usdt.png",
		"network": "TRC20",
		"pay_address": "TYWnk1EGALQyYst2yFSd29QQQTEkuKMbyt",
		"memo": "",
		"token_id": "0912e09a-d8e2-41d7-a0bc-a25530892988",
		"crypto": "USDT",
		"order_valid_period":823456
	}
}
```

**Parameters**
{% endtab %}

{% tab title="Fail (200)" %}

#### **Response (Fail 200)**

```json
{
	"code": 224066,
	"msg": "Service error, pleaser try again",
	"data": null
}
```

<table><thead><tr><th>Name</th><th>Value</th><th width="108" data-type="checkbox">Required</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>code</td><td>224066</td><td>true</td><td>Number</td><td></td></tr><tr><td>msg</td><td>Service error, please try again</td><td>true</td><td>String</td><td></td></tr><tr><td>data</td><td></td><td>true</td><td>Object</td><td></td></tr></tbody></table>
{% endtab %}

{% tab title="Remarks" %}
As a security measure, we will sign the returned data (and according to this only { code: 10000 } should be signed, but it's signing all the returned body.). Additionally, it will return Appid, Sign, Timestamp  in the header of the response.  The signature method SHA-256 (appid+appSecret+Timestamp+body).

Please use the data with caution if the signature verification fails. It indicates that the data has been tampered with.
{% endtab %}
{% endtabs %}
{% endtab %}
{% endtabs %}

#### **Request Body Example**

{% tabs %}
{% tab title="Request Body" %}

```json
{
  "remark": "",
  "token_id": "0912e09a-d8e2-41d7-a0bc-a25530892988",
  "product_price": "0.5",
  "merchant_order_id": "3735077979050379",
  "denominated_currency": "USD",
  "order_valid_period":823456
}
```

{% endtab %}

{% tab title="Remark" %}
The body of HTTP is a json string .

Add the content in body of HTTP to the signature. Ensure the body content matches the signature content. As soon as CCPayment receives the request, the body content will be read and the signature will be verified.
{% endtab %}
{% endtabs %}

### Step 2:  Get deposit result

CCPayment will notify merchant of the final transaction result. [Go to Webhook Configuration Guide](https://docs.ccpayment.com/ccpayment-v1.0-api/webhook-notification/webhook-notification-tutorial).

{% content-ref url="../webhook-notification/api-deposit-webhook-notification" %}
[api-deposit-webhook-notification](https://docs.ccpayment.com/ccpayment-v1.0-api/webhook-notification/api-deposit-webhook-notification)
{% endcontent-ref %}

> Once the merchant has processed the order, please return {http code: 200} and include a “success” string in the HTTP response body. <br>
>
> If CCPayment does not receive “success” as a response from the merchant, CCPayment will keep pushing the notification up to 6 times. Any response other than “success” will be regarded as a failure, and CCPayment will keep sending the notification.

**Example**

{% tabs %}
{% tab title="PHP" %}

```php
$this->response->setString("success")
```

{% endtab %}

{% tab title="Java" %}

```java
this.response.setString("success");
```

{% endtab %}

{% tab title="Golong" %}

```go
this.response.SetString("success")
```

{% endtab %}

{% tab title="Python" %}

```python
self.response.set_string("success")
```

{% endtab %}

{% tab title="Node.js" %}

```javascript
this.response.setString("success");
```

{% endtab %}
{% endtabs %}

<figure><img src="https://760693906-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKH8CbFKQ8Cydt24cgg2C%2Fuploads%2F01jnHigunmrVjUAZW47i%2Fimage.png?alt=media&#x26;token=d9ae9805-3c38-40f9-b664-f2b222683468" alt=""><figcaption><p>Response Example</p></figcaption></figure>

✅ Now you have completed the entire integration process for native checkout!

{% hint style="info" %}
Except for webhook notifications, you can get the order information via the Call [Order Information Interface.](https://docs.ccpayment.com/ccpayment-v1.0-api/payment-api-ccpayment/api-deposit-order-information-interface)\
\
The status of the API returned has a time lag with the webhook status maybe, Handle idempotency properly.
{% endhint %}

## Native checkout diagram

<figure><img src="https://760693906-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKH8CbFKQ8Cydt24cgg2C%2Fuploads%2FSRBBr8LuLQPbe2Fts6v1%2Fimage.png?alt=media&#x26;token=10d9631a-bef4-4aa6-9e2e-c4a1c72ab93c" alt=""><figcaption></figcaption></figure>

### Order status of API deposit

View order status in [API Deposit tab](https://admin.ccpayment.com/payment/paymentApiOrder/incoming).

<table><thead><tr><th width="211.33333333333331">Payment Info</th><th width="281">Order Within Valid Period</th><th>Order status</th></tr></thead><tbody><tr><td>Non-payment</td><td>Yes</td><td>Awaiting payment</td></tr><tr><td>Non-payment</td><td>No</td><td>Expired</td></tr><tr><td>Part-payment</td><td>Yes</td><td>Underpayment</td></tr><tr><td>Part-payment</td><td>No</td><td>Underpayment（Overdue）</td></tr><tr><td>Paid in full</td><td>Yes</td><td>Paid</td></tr><tr><td>Paid in full</td><td>No</td><td>Paid（Overdue）</td></tr><tr><td>Overpayment</td><td>Yes</td><td>Overpayment</td></tr><tr><td>Overpayment</td><td>No</td><td>Overpayment（Overdue）</td></tr></tbody></table>