WeChat Pay develops H5 payment

This article introduces the H5 payment implementation process under WeChat payment.

1. Introduction

H5 payment is a non-WeChat browser payment method developed based on public accounts (you need to apply for payment permission separately), which can satisfy the mobile H5 page outside WeChat. Requirements for WeChat payment. .

Test address

http://wxpay.weixin.qq.com/pub_v2/pay/wap.v2.php

http://wxpay.weixin.qq .com/mch/pay/h5.v2.php

Rendering

Flowchart

2. Preparing product information

The main thing is to first define the name and price of the product, as well as the transaction number. code show as below.

    include_once("../WxPayPubHelper/WxPayPubHelper.php");    //使用统一支付接口
    $unifiedOrder = new UnifiedOrder_pub();    
    //设置统一支付接口参数
    //设置必填参数
    //appid已填,商户无需重复填写
    //mch_id已填,商户无需重复填写
    //noncestr已填,商户无需重复填写
    //spbill_create_ip已填,商户无需重复填写
    //sign已填,商户无需重复填写
    $unifiedOrder->setParameter("body","H5支付测试");//商品描述
    $timeStamp = time();    $out_trade_no = WxPayConf_pub::APPID."$timeStamp";    $unifiedOrder->setParameter("out_trade_no","$out_trade_no");//商户订单号 
    $unifiedOrder->setParameter("total_fee","1");//总金额
    //$unifiedOrder->setParameter("notify_url",WxPayConf_pub::NOTIFY_URL);//通知地址 
    $unifiedOrder->setParameter("trade_type","WAP");//交易类型
    //非必填参数，商户可根据实际情况选填
    $unifiedOrder->setParameter("device_info","100001");//设备号

The above parameters are finally encapsulated into the following similar XML parameters

<xml>
  
  <out_trade_no></out_trade_no>
  <total_fee>1</total_fee>
  //<notify_url></notify_url>
  <trade_type></trade_type>
  <device_info>100001</device_info>
  <appid></appid>
  <mch_id>1237905502</mch_id>
  <spbill_create_ip></spbill_create_ip>
  <nonce_str></nonce_str>
  <sign></sign></xml>

2. Call Unified payment request

Send the above XML to the unified payment interface

https://api.mch.weixin.qq.com/pay/unifiedorder

Get the following XML data

<xml>
  <return_code></return_code>  
  <return_msg></return_msg>  
  <appid></appid>  
  <mch_id></mch_id>  
  <device_info></device_info>  
  <nonce_str></nonce_str>  
  <sign></sign>  
  <result_code></result_code>  
  <prepay_id></prepay_id>  
  <trade_type></trade_type>  </xml>

In this way, you will get a prepayid

2. DeepLink

The merchant server calls the unified ordering interface to request an order. For the api, please refer to the public api [ Unified order] (the trade_type in the interface needs to be defined as WAP), WeChat will return the prepayid to the merchant, the merchant generates a deeplink in a fixed format, and the user clicks the deeplink to activate WeChat payment.
deeplink format:

weixin://wap/pay?appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3D123%26prepayid%3Dwx20141203201153d7bac0d2e10889028866%26sign%3D6AF4B69CCC30926F85770F900D098D64%26timestamp%3D1417511263

The steps to generate deeplink are as follows:
Step 1: Assemble parameters according to URL format, and perform URL encoding on the $value part. Generate string1:
string1: key1=Urlencode($value1)&key2=Urlencode($value2,&...
Step 2: Urlencode the entire string1 and generate string2:
String2=Urlencode(string1 );
Step 3: Splice the prefix to generate the final deeplink
For example:
String1:

appid=wxf5b5e87a6a0fde94&noncestr=123&package=WAP&prepayid=wx201412101630480281750c890475924233&sign=53D411FB74FE0B0C79CC94F2AB0E2333&timestamp=1417511263

Do it again for the entire string1 URLEncode
string2：

appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3DWAP%26prepayid%3Dwx201412101630480281750c890475924233%26sign%3D53D411FB74FE0B0C79CC94F2AB0E2333%26timestamp%3D1417511263

Add the protocol header weixin://wap/pay? to get the final deeplink

weixin://wap/pay?appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3DWAP%26prepayid%3Dwx201412101630480281750c890475924233%26sign%3D53D411FB74FE0B0C79CC94F2AB0E2333%26timestamp%3D1417511263

Development documentation: https://pay.weixin.qq.com/wiki/doc/api/wap.php?chapter=15_1

三, New version process

1. The user completes the order on the merchant side and uses WeChat Pay to pay

2. The merchant's backend initiates an order to WeChat Pay Request (call the unified order interface) Note: Transaction type trade_type=MWEB

3. WeChat payment verifies merchant permissions

4. The unified order interface returns payment-related parameters to the merchant backend, such as Payment jump url (parameter name "mweb_url", which is the WeChat transfer page address in the flow chart)

5. The merchant backend receives the return parameters from the unified order interface and returns mweb_url to the front end

6. The merchant accesses the WeChat transfer page mweb_url through the front-end page (WeChat Pay will verify the refer in this step to determine whether the request source is legal)

7. The transfer page mweb_url actively calls up the WeChat payment cashier

8. The WeChat Pay cashier is aroused and the mweb_url transfer page is closed at the same time.

9. The user completes the payment at the WeChat Pay cashier.

Please pay attention to PHP for more articles related to WeChat Pay development H5 payment. Chinese website!