# Build your Payments Integration

## :white\_check\_mark: Payment Solutions Overview

### :ballot\_box\_with\_check: Online & In-Store Channels Payment Solutions 

* **Online Channels**:  
*

```
* PC-Browser, Mobile-Browser, WeChat-Browser, Mobile Native App via [**OTTPay Web-API**](https://docs.ottpay.com/payment-api/) or [**OTTPay Pay-Button**](https://docs.ottpay.com/paybutton/) connecting to OTTPay Payment Gateway
```

```
* e-Comm Platform/Systems via **OTTPay** [**Payment-Plugins**](https://docs.ottpay.com/payment-plugins/) connecting to OTTPay Gateway
```

* **In-Store** **Channels**:  
* * POS Device with **OTTPay Payment-App** connecting to **OTTPay Payment Gateway**
  * Merchant based **OTTPay Static QR code**, Merchant Item based **OTTPay Payment-Link**
  * POS system using own/3rd party payment platform integrated with [**OTTPay Web API**](https://docs.ottpay.com/payment-api/)  

### :ballot\_box\_with\_check: Process Flow Example(Active-Pay Mode)

![](https://595521136-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6GBKhV0l8hVoTW3qq2%2F-M7E43rh_MYmhf6Vudcc%2F-M7E4VRSra-DKyLI9sDa%2Fimage.png?alt=media\&token=67545e8d-dc9e-42dd-aaee-ac8aa97c7a4d)

##  :white\_check\_mark: Use Cases

* **PC-Browser :**
  * Allow customers to make payment by scanning the QR Code displayed on the web page of merchants on-line shop web site, support both of WeChat Pay and Alipay payment methods  
* **Mobile-Browser-H5(Web App):** 
  * Allow customers to make Alipay payment in any browser or web view in mobile native App
*  **Mobile-WeChat-Browser(Official Account Website or Web App):** 
  * Allow customers to make WeChat Pay payment in the web page opened in WeChat-Browser  
*  **Mobile-Native-App:**  
  * Allow customers to activate the payment process within mobile payment app, supporting both of WeChat Pay and Alipay.
*  **POS Device-OTTPay App :**
  * Allow POS device scanner from OTTPay App to scan the QR Code displayed on the payment app within customer mobile , supporting WeChat Pay, Alipay and UnionPay payment methods
  *  Allow customers to use mobile payment apps: WebChat Pay, Alipay, UnionPay to scan the QR Code displayed on OTTPay App to activate the payment process , supporting WeChat Pay, Alipay and UnionPay payment methods
*  **POS Terminal System integrated with OTTPay Payment API :**

  * Allow POS scanner from POS Terminal System to scan the QR Code displayed on the payment app within customer mobile , supporting WeChat Pay, Alipay and UnionPay payment methods

## :white\_check\_mark: Payment Channels-Use Cases-Solutions Map

{% tabs %}
{% tab title="Online Channels📶" %}

| **Use Cases**                                                   | **Payment Solutions**                                                                                                                                                                                                                                                              |
| --------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p></p><ul><li><strong>PC-Browser</strong></li></ul>            | Display QR Code (WebChat Pay/Alipay) via [**OTTPay Web API**](https://docs.ottpay.com/payment-api/pc-api)**, or OTTPay Plugins(if using e-Comm Open systems)**                                                                                                                     |
| <p></p><ul><li><strong>Mobile-Browser-H5</strong></li></ul>     | Activate Alipay App via [**OTTPay Web API**](https://docs.ottpay.com/payment-api/alipay-h5)**, or** [**OTTPay Plugins**](https://docs.ottpay.com/payment-plugins/)(if using e-Comm Open systems)**,  or** [**OTTPay Pay-Button**](https://docs.ottpay.com/paybutton/)              |
| <p></p><ul><li><strong>Mobile-WeChat-Browser</strong></li></ul> | Activate WeChat Pay App via [**OTTPay Web API**](https://docs.ottpay.com/payment-api/wechat-official-account)**, or** [**OTTPay Plugins**](https://docs.ottpay.com/payment-plugins/)(if using e-Comm Open systems), or [**OTTPay Pay-Button**](https://docs.ottpay.com/paybutton/) |
| <p></p><ul><li><strong>Mobile-Native-App</strong></li></ul>     | Activate WeChat Pay/Alipay via [**OTTPay Web API**](https://app.gitbook.com/@ottpay/s/payment-api/in-app)                                                                                                                                                                          |
| {% endtab %}                                                    |                                                                                                                                                                                                                                                                                    |

{% tab title="In-Store Channels🛃" %}

| Use Cases                                                       | Payment Solutions                                                                                                                                                                |
| --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p></p><ul><li><strong>POS Device-OTTPay App</strong></li></ul> | Activate Active Pay/Passive Pay with **OTTPay App** via [**OTTPay Web API**](https://docs.ottpay.com/payment-api/retail-api). Supported Device: Sunmi-POS, Clover-POS, Chase-POS |
| <p></p><ul><li><strong>POS Terminal Systems</strong></li></ul>  | Activate Pay/Passive Pay, System integration with [**OTTPay Web AP**I](https://docs.ottpay.com/payment-api/retail-api)                                                           |
| {% endtab %}                                                    |                                                                                                                                                                                  |
| {% endtabs %}                                                   |                                                                                                                                                                                  |