Native Mobile Applications Payment Scenarios

Native App Payment ¶

This is for integrating Alipay/WeChat pay functions in merchant’s native mobile applications.

Merchant App will call the SDK provided by Alipay/WeChat, SDK will call the payment module from Alipay/WeChat pay. When the transaction is completed, it will be redirected to Merchants’ App, where the payment result is displayed.

The supported OSs include iOS, Android.

Scenario Introduction

The following uses Alipay as an example. It introduces the in-app payment scenarios. WeChat and Alipay are very similar.

Step 1: The user chooses the merchandize in the merchant app, confirms the order, enters the payment flow, choose Alipay, clicks Confirm, as in picture 1.

Step 2: Wakes up the Alipay payment module and shows the payment confirmation page, as in picture 2.

Step 3: The users enters the password as in picture 3.

Step 4: Alipay display the success message as in picture 4.

Step 5: Redirects to the merchant App. Merchant can customize the success page.

Interaction Details

The following is the interaction details for Alipay. Read carefully when designing the merchant page logic.

1. The user opens the merchant APP and selects products, initiates the payment. Merchant backend calls SnapPay open API, initiates the Alipay payment request. The user enters the payment flow.

2. When the user finishes the payment, merchant backend calls SnapPay’s Query API to check the result. If it succeeds, display the payment success page. If it fails, shows the payment failed page.

3. Merchant backend will receive the asynchronous notification from SnapPay open API indicating the payment is successful.

Note: 2 and 3 might happen in any sequence. Either 2 or 3 can be used to confirm a successful payment.

Payment Workflow

Detailed payment work flow

• After user places order [1.1], merchant backend calls Native APP Pay API to submit the payment request to SnapPay OpenAPI Service Gateway [1.2];

• SnapPay verifies the payment request and returns Alipay/WeChat payment parameters (sdk_params)[1.3];

• Merchant’s APP invokes Alipay/WeChat through the Alipay/WeChat SDK, and passes in payment parameters [1.4] to guide users to complete payment [1.5];

• After user pays successfully, Alipay/WeChat will return the payment result to the merchant APP[2.1];

• To ensure the payment is truly successful, merchant should call Query Order API [2.2];

• When SUCCESS status is returned [2.3], merchant update the order status [2.4], and show the success page to the user [2.5];

• After the payment is successful, Alipay/UnionPay will send an asynchronous notification to SnapPay [3.1]. SnapPay backend will notify the merchant that the payment is successful. Please refer to Asynchronous Notification [3.2].

WeChat In-App Application procedure

In order for the merchant to enable the WeChat Pay function in their App, the following procedures need to happen before development.

1. Merchant needs to apply an account in WeChat Open Platform website: https://open.weixin.qq.com/

2. Once it passes the WeChat approval, register the Mobile APP service. Merchant will then receive the APPID.
   For more details, please refer to: https://pay.weixin.qq.com/wiki/doc/api/app/app_sl.php?chapter=8_5

3. Once the merchant receives the APPID, send APPID and Company Name (recommend same as Company Name when merchant registered on SnapPay) to SnapPay Customer Service customerservice@snappay.ca. SnapPay will contact WeChat to combine the APP ID with merchant account.

4. Once SnapPay notifies you the setup is complete, Merchant can start development.

Where to get Company Name for Mobile APP on in WeChat Open Platform website.

Example

For example, SnapPay will send the following info to WeChat Support 

    SnapPay Institution Information:
    Merchant ID：1234567890 
    Institution Name：Snappay
    Official Account：wx1234567890abcdef

    Merchant APP Information:  
    Mobile APPID: wx0987654321abcdef
    Sub Merchant ID: 123456789
    Company Name: Super Merchant Inc.

---

API Documents(openapi.html) ¶

Index(index.html) ¶