# Native Checkout Integration

Integrate with Native Checkout API to build the checkout page for your sites/apps. Users pay in your sites/apps. No need to lead them to external pages. Take complete control of your users' checkout experience.

### Step 1: Create Payment Order

## Submit payment order and receive payment address

<mark style="color:green;">`POST`</mark> `https://pay.reelpay.com/v1/transactions/pay`

Return receiving address/QR code and order information

#### Headers

| Name                                           | Type   | Description                                                                                                                                                                       |
| ---------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| X-Sign<mark style="color:red;">\*</mark>       | String | hmacSHA256 (<mark style="color:red;">**body (json string)**</mark>+timestamp+appKey). [Signature guide](https://docs.reelpay.com/reelpay-for-developer/to-get-started/signature). |
| X-Timestamp<mark style="color:red;">\*</mark>  | String | Timestamp in seconds (10-digit). The request is valid for two minutes.                                                                                                            |
| X-Appid<mark style="color:red;">\*</mark>      | String | Merchant's unique credential. Find it on the [**AppManage page**](https://merchant.reelpay.com/appManage).                                                                        |
| content-type<mark style="color:red;">\*</mark> | String | application/json                                                                                                                                                                  |

#### Request Body

| Name                                             | Type   | Description                                                       |
| ------------------------------------------------ | ------ | ----------------------------------------------------------------- |
| out\_trade\_no<mark style="color:red;">\*</mark> | String | Order ID in Merchant's system. A unique ID for every order        |
| currency\_id<mark style="color:red;">\*</mark>   | String | [Currency ID](https://docs.reelpay.com/api-interface#token-list). |
| fiat\_name<mark style="color:red;">\*</mark>     | String | Fiat name (USD)                                                   |
| fiat\_amount<mark style="color:red;">\*</mark>   | String | Fiat amount (1.2)                                                 |

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

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

**Header**

<table><thead><tr><th width="149">Name</th><th width="188">Value</th><th align="center">Required</th><th width="82">Type</th><th width="299">Description</th></tr></thead><tbody><tr><td>X-Appid</td><td>el9q0mzllpjhducy</td><td align="center">Y</td><td>String</td><td>Merchant's unique credential. Find it on the <a href="https://merchant.reelpay.com/appManage"><strong>AppManage page</strong></a>.</td></tr><tr><td>X-Timestamp</td><td>1677152490</td><td align="center">Y</td><td>String</td><td>Timestamp in seconds (10-digit). The request is valid for two minutes.</td></tr><tr><td>X-Sign</td><td>e0b78d93fd702aa31b07d5488cd85b4b7176d01c4ec45fd8bfaef0d1081a5ead</td><td align="center">Y</td><td>String</td><td>hmacSHA256 (<mark style="color:red;"><strong>body (json string)</strong></mark>+timestamp+appKey). <a href="../reelpay-for-developer/to-get-started/signature">Signature guide</a>.</td></tr></tbody></table>

**Body**

```json
{
        "code": 200,
        "message": "success",
        "data": {
                "trade_no": "uz54NEW9TVhLSIDHUSYB4aEFupKoE7I8",
                "pay_address": "0x988519e9ba1c147ff687f4b59009d7573c49efed",
                "time_expire": 1673264871,
                "amount": "0.00007971",
                "chain": "Ethereum",
                "token": "ETH",
                "contract": "ETH",
                "decimal": 18
        }
}
```

**Parameters**

<table><thead><tr><th width="184">Name</th><th width="173">Value</th><th width="101" data-type="checkbox">Required </th><th>Type</th><th width="153">Description</th></tr></thead><tbody><tr><td>code</td><td>200</td><td>true</td><td>Integer</td><td></td></tr><tr><td>message</td><td>success</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><tr><td>data.trade_no</td><td>uz54NEW9TVhLSIDHUSYB4aEFupKoE7I8</td><td>true</td><td>String</td><td>ReelPay order ID</td></tr><tr><td>data.pay_address</td><td>0x988519e9ba1c147ff687f4b59009d7573c49efed</td><td>true</td><td>String</td><td>The temporary payment address for current order,only effectivewithin the order validity period.</td></tr><tr><td>data.time_expire</td><td>1673264871</td><td>true</td><td>String</td><td>Payment deadline</td></tr><tr><td>data.amount</td><td>0.00007971</td><td>true</td><td>String</td><td>The number of tokens that need to be paid</td></tr><tr><td>data.chain</td><td>Ethereum</td><td>true</td><td>String</td><td>Chain Name</td></tr><tr><td>data.token</td><td>ETH</td><td>true</td><td>String</td><td>Token symbol</td></tr><tr><td>data.contract</td><td>ETH</td><td>true</td><td>String</td><td>Token Contract address</td></tr><tr><td>data.decimal</td><td>18</td><td>true</td><td>String</td><td>Token decimal</td></tr></tbody></table>
{% endtab %}

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

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

```json
{
	"code": 10003,
	"message": "Parameter error",
	"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>10003</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: 200 } 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 hmacSHA256 (body (json string)+timestamp+appKey).

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
{
  "out_trade_no": "uz54NEW9TVhLSIDHUSYB4aEFupKoE7I8",
  "currency_id": "ZxkanKiq9w2skt7e9CSR4oUX2q9F23LB",
  "fiat_name": "USD",
  "fiat_amount": "1.2"
}
```

{% 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 ReelPay 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

Configure Webhook to receive notifications. ReelPay will notify merchant of the final transaction results. You can configure the Webhook URL on the [**AppManage page**](https://merchant.reelpay.com/appManage)

<figure><img src="https://2984238154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9lC1YZ1TOU74OejUtI5M%2Fuploads%2FCscmCFpYRvi7aVpWg9u8%2Fimage.png?alt=media&#x26;token=ec632146-c483-4a69-be67-755993d72a6b" alt="" width="328"><figcaption><p><a href="https://merchant.reelpay.com/appManage"><strong>AppManage</strong></a></p></figcaption></figure>

Transactions will start a request to the callback interface set by the merchant when involving the following [events](https://docs.reelpay.com/error-code#transaction-status-code):

| PAID                      | Paid                      |
| ------------------------- | ------------------------- |
| TIME-OUT                  | Transaction timeout       |
| CLOSE                     | Transaction closed        |
| REFUND-IN-PROGRESS        | Refunding                 |
| REFUNDED                  | Refunded                  |
| ABNORMAL                  | Abnormal transaction      |
| CHAIN-CONFIRMATION-FAILED | Chain confirmation failed |

Callback Frequency: 5s、15s、30s、3m、10m、20m、30m、30m、30m、60m、3h、3h、3h、6h、6h&#x20;

Total: 24h3m50s &#x20;

Callback Form:

* The callback content is still encrypted.「For more information see the [Signature](https://docs.reelpay.com/reelpay-for-developer/to-get-started/signature)」

### Webhook notification

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

<table><thead><tr><th width="149">Name</th><th width="206">Value</th><th width="101" align="center">Required</th><th width="77">Type</th><th width="299">Description</th></tr></thead><tbody><tr><td>X-Appid</td><td>eqrbntqbi5uqvkpr</td><td align="center">Y</td><td>string</td><td>Merchant's unique credential. Find it on the <a href="https://merchant.reelpay.com/appManage"><strong>AppManage page</strong></a>.</td></tr><tr><td>X-Timestamp</td><td>1690368283</td><td align="center">Y</td><td>string</td><td>Timestamp in seconds (10-digit). The request is valid for two minutes.</td></tr><tr><td>X-Sign</td><td>e0c6a719ebc366da0340c1b450026a903a55c86ed5fbe0b586cd73f6be74ade6</td><td align="center">Y</td><td>string</td><td>hmacSHA256 (<mark style="color:red;"><strong>body (json string)</strong></mark>+timestamp+appKey)</td></tr><tr><td>X-EventType</td><td>Paid</td><td align="center">Y</td><td>string</td><td><a href="../../error-code#transaction-status-code">Transaction Status Code</a></td></tr></tbody></table>
{% endtab %}

{% tab title="Body" %}

<pre class="language-json"><code class="lang-json"><strong>```json
</strong>{
   "trade_no": "uGHT9KRRvLIl4WW8JAaTWmETf3mz8D60",
   "appid": "eqrbntqbi5uqvkpr",
   "out_trade_no": "202307250001",
   "amount": "1.2",
   "status": "PAID",
   "success_time": 1690369680
 }
```

</code></pre>

{% endtab %}

{% tab title="Parameters" %}

<table><thead><tr><th width="155.33333333333331">Name</th><th width="88">Type</th><th>Description</th></tr></thead><tbody><tr><td>trade_no</td><td>string</td><td>Transaction ID</td></tr><tr><td>appid</td><td>string</td><td>Merchant APPID</td></tr><tr><td>out_trade_no</td><td>string</td><td>Merchant Order ID</td></tr><tr><td>amount</td><td>string</td><td>Transaction Amount</td></tr><tr><td>status</td><td>string</td><td>Transaction Status</td></tr><tr><td>success_time</td><td>string</td><td>Transaction Time</td></tr></tbody></table>
{% endtab %}

{% tab title="Remarks" %}
Return Appid, Sign, Timestamp in the header of the response.  The signature method hmacSHA256 (<mark style="color:red;">**body (json string)**</mark>+timestamp+appKey).

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

{% hint style="info" %}
Merchants sign to ensure information safety. Once the merchant has processed the order, please return "Success" in the body of the HTTP response if the processing has been successful. If the process fails, ReelPay will attempt to send the order again and the Webhook will retry up to 15 times ( Callback Frequency: 5s、15s、30s、3m、10m、20m、30m、30m、30m、60m、3h、3h、3h、6h、6h, Total: 24h3m50s ).
{% endhint %}

## Example

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9lC1YZ1TOU74OejUtI5M%2Fuploads%2F4SzXwL6d6IQRvpsywfrW%2Fimage.png?alt=media&#x26;token=3e88604a-c977-4bd8-8bb7-892257e4c296" alt=""><figcaption></figcaption></figure>