Online Payment Scenarios
WeChat In-app Web-based/H5 Payment
WeChat In-app Web-based Payment, also called Offical Account Payment. The buyer opens the merchant’s HTML5 pages on their WeChat app in the mobile device and calls the WeChat payment module via the JSAPI interface to pay their transaction. This mode applies in the following scenarios:
-
The buyer enters the Vendor’s official account and completes payment on the transaction page.
-
The buyer’s friend shares the payment URL in a chat or in Moments and the buyers clicks the link to complete their payment.
-
The buyer scans the payment QR code displayed within the merchant’s page and opens it in a browser to complete their payment.
This API also support AliPay payment, and the payment process is similar to WeChat.
Scenario Introduction
Step 1: Merchant sends the link of his website via WeChat chat window; The buyer clicks the link and opens the merchant website.
Step 2: The buyer enters the shopping pages, chooses the product and clicks to pay.
Step 3: Merchant’s web page calls SnapPay’s H5 payment address, SnapPay’s server will call WeChat’s payment module, the user will enter the payment password.
Step 4: Once password is verified, payment is done. Merchant’s server will receive the notification from SnapPay.
Detailed Payment Flow
Detailed flows
-
After user places order [1.1], merchant backend calls H5 Payment API to submit the payment request to SnapPay OpenAPI Service Gateway [1.2];
-
SnapPay verifies the payment request and returns the payment page url (h5pay_url)[1.3];
-
Merchant’s H5 page is redirected to the payment page url [1.4], and the payment page will guide the user to complete the payment [1.5];
-
After user has successfully paid, the page will redirect to return_url[2.1]. Alipay does not currently support return_url. It is recommended to use WAP payment API (browser_type=WAP);
-
After the page redirect to return_url, in order 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, WeChat/Alipay 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].
Website Payment
Website payment is offered by AliPay, China UnionPay and Credit Card to pay for online merchants.
It gives your buyers a simplified and secure payment experience that keeps them local to your website throughout the payment process. Once integrated the Alipay or China Union Pay online payment service, you should present an Alipay or China UnionPay payment button on your website for the consumer to complete the payment and check out.
Once the customers click the check out button, the website will be redirected to Alipay or China UnionPay’s cashier page. The customers enter the account information to complete payment.
Scenario Introduction
We use Alipay as an example. China UnionPay offers a similar user flow.
Step 1: The buyer chooses the products, and puts them in the shopping cart. The buyer clicks the Alipay button. As in picture 1.
Step 2: The page will be redirected to Alipay’s third-party cashier page.
Step 3:
-
The buyer can use the Alipay App to scan the QR code, enter the username and password to complete payment. As in picture 2.
-
Or if the buyer doesn’t use the mobile device, he can click the ‘Login to Pay’ button, enter Alipay Account’s username and password to login. As in picture 3.
-
After login, the buyer will see exchange rate, account balance, payment account, and some other information. If the buyer enters the payment password, confirms the payment, the payment result will be returned afterwards.
Step 4: Payment success.
Select products and add to cart
Scan QR
Enter Alipay user name and password.
Detailed Payment Flow
Detailed flows
-
After user places order [1.1], merchant backend calls Website Payment API to submit the payment request to SnapPay OpenAPI Service Gateway [1.2];
-
SnapPay verifies the payment request and returns the Alipay/UnionPay/CreditCard payment url (webpay_url)[1.3];
-
The merchant’s page is redirected to the payment address [1.4], and the payment page will guide the user to complete the payment [1.5];
-
After the user pays successfully, the page will redirect to return_url[2.1];
-
After the page redirect to return_url, in order 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].