# Hosted Checkout Page Integration

We recommend merchants to integrate with CCPayment's hosted checkout interface. You will only need two steps to start accepting crypto payments. When the integration is done. Your server will be able to call the checkout URL API and present CCPayment's hosted checkout page to your users. 

### **Step 1: Get Checkout URL**

## Returns a Checkout URL

<mark style="color:green;">`POST`</mark> `https://admin.ccpayment.com/ccpayment/v1/concise/url/get`

#### Headers

| Name                                        | Type   | Description                                                                                                                                                                                                                   |
| ------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Appid<mark style="color:red;">\*</mark>     | String | Merchant's unique credential. Find it on the [Developer page](https://admin.ccpayment.com/developer/config).                                                                                                                  |
| Timestamp<mark style="color:red;">\*</mark> | String | Timestamp in seconds (10-digit) expires in 2 minutes.                                                                                                                                                                         |
| Sign<mark style="color:red;">\*</mark>      | String | SHA-256 (APPID + APP Secret +timestamp+<mark style="color:red;">**body (json string)**</mark>). [Signature guide](https://doc.ccpayment.com/~/changes/HSMg9pcC4k6HIczMjOvx/ccpayment-for-developer/to-get-started/signature). |

#### Request Body

| Name                                                  | Type    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ----------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| order\_valid\_period                                  | Integer | <p>The valid duration for the order. </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> |
| 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)                                                                                                                                                                                                                                                                                                                                                                  |
| merchant\_order\_id<mark style="color:red;">\*</mark> | String  | Order ID in Merchant's system                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| product\_name<mark style="color:red;">\*</mark>       | String  | Name of the product                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| return\_url                                           | String  | Redirect users to this URL after user makes payment                                                                                                                                                                                                                                                                                                                                                                                                              |

{% tabs %}
{% tab title="200: OK Success" %}
{% tabs %}
{% tab title="Body" %}

```json
{
	"code": 10000,
	"msg": "success",
	"data": {
              "payment_url": "https://s.cwallet.com/zpj9u9"
	}
}
```

{% endtab %}

{% tab title="Parameters" %}

{% endtab %}

{% tab title="Header Response" %}

<table><thead><tr><th width="134">Name</th><th width="188">Value</th><th width="104" align="center">Required</th><th width="82">Type</th><th width="299">Description</th></tr></thead><tbody><tr><td>Appid</td><td>202302010636261620672405236006912</td><td align="center">Y</td><td>string</td><td>Merchant's unique credential. Find it on the Developer page.</td></tr><tr><td>Timestamp</td><td>1677152490</td><td align="center">Y</td><td>string</td><td>Timestamp in seconds (10-digit) expires in 2 minutes.</td></tr><tr><td>Sign</td><td>871f0223c66ea72435208d03603a0cb00b90f6ac4a4ba725d00164d967e291f6</td><td align="center">Y</td><td>string</td><td>SHA-256 (appId + appSecret + timestamp+<mark style="color:red;"><strong>body (json string)</strong></mark>)</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 %}

{% tab title="500: Internal Server Error " %}

{% endtab %}

{% tab title="404: Not Found " %}

{% endtab %}
{% endtabs %}

### **Request Body Example**

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

```json
{
    "order_valid_period":823456,
    "product_price":"1",
    "merchant_order_id":"2012033040550",
    "product_name":"test",
    "return_url":"https://app.gitbook.com/xxxxx"
}
```

{% 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: Configure Webhook to receive payout notification

CCPayment will notify merchants of the final transaction results. Click the link below to view the guide for configuring the Webhook Notification.

{% content-ref url="../resources-document/webhook-notification" %}
[webhook-notification](https://docs.ccpayment.com/~/changes/HSMg9pcC4k6HIczMjOvx/ccpayment-for-developer/resources-document/webhook-notification)
{% endcontent-ref %}

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

### Hosted Checkout Diagram

<figure><img src="https://760693906-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKH8CbFKQ8Cydt24cgg2C%2Fuploads%2F5Vfw7T4qBgPnSnmJWNnV%2Fccp%20hosted%20api.png?alt=media&#x26;token=8b2776a1-7dea-4322-b04e-43ded75479dc" alt=""><figcaption></figcaption></figure>