WeChat Applet
WeChat Development
Detailed explanation of JS API payment examples developed by WeChat
Detailed explanation of JS API payment examples developed by WeChat
Keywords: WeChat payment WeChat payment v3 jsapi payment unified payment Native payment prepay_id
This article introduces the jsapi implementation process under WeChat payment
Preface
WeChat Payment is now divided into v2 version and v3 version. Those who applied before September 10, 2014 will be in v2 version, and those who applied after that will be in v3 version. The V3 version of WeChat Pay does not have the paySignKey parameter. For related introduction to v2, please refer to other articles of Fangbei Studio. This article introduces WeChat Pay v3.
Process Implementation
1. OAuth2.0 Authorization
JSAPI needs to call the login authorization interface to obtain the user's Openid before payment. Therefore, authorization needs to be done once, and the confirmation box will not pop up for this authorization.
The essence is to jump to
http://www.fangbei.org/wxpay/js_api_call.php
when the user accesses
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8888888888888888&redirect_uri=http://www.fangbei.org/wxpay/js_api_call.php&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect
to obtain the code parameter, and obtain authorization access_token and openid based on the code
For the detailed implementation process, please refer to WeChat Public Platform Development (71) OAuth2.0 Web Authorization
In the Demo of WeChat Pay, the code is
1 //使用jsapi接口 2 $jsApi = new JsApi_pub(); 3 4 //=========步骤1：网页授权获取用户openid============ 5 //通过code获得openid 6 if (!isset($_GET['code'])) 7 { 8 //触发微信返回code码 9 $url = $jsApi->createOauthUrlForCode(WxPayConf_pub::JS_API_CALL_URL);10 Header("Location: $url");
11 }else12 {13 //获取code码，以获取openid14 $code = $_GET['code'];15 $jsApi->setCode($code);16 $openid = $jsApi->getOpenId();17 }The final result of this step is to obtain the current User's openid
ou9dHt0L8qFLI1foP-kj5x1mDWsM
2. Unified payment
Unified payment is an interface that generates payment orders and returns pre-payment order numbers in various JSAPI/NATIVE/APP payment scenarios. Currently, all scenarios of WeChat payment are All use this interface
In unified payment, the following parameters are obtained from the configuration, or automatically generated by the class, and do not need to be filled in by the user
$this->parameters["appid"] = WxPayConf_pub::APPID;//公众账号ID$this->parameters["mch_id"] = WxPayConf_pub::MCHID;//商户号$this->parameters["spbill_create_ip"] = $_SERVER['REMOTE_ADDR'];//终端ip $this->parameters["nonce_str"] = $this->createNoncestr();//随机字符串$this->parameters["sign"] = $this->getSign($this->parameters);//签名
In JSAPI payment, fill in the following parameters in addition
//统一支付接口中，trade_type为JSAPI时，openid为必填参数！$unifiedOrder->setParameter("openid","$openid");//商品描述$unifiedOrder->setParameter("body","方倍工作室");//商品描述
//自定义订单号，此处仅作举例$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","JSAPI");//交易类型Others are optional parameters
//非必填参数，商户可根据实际情况选填
//$unifiedOrder->setParameter("sub_mch_id","XXXX");//子商户号
//$unifiedOrder->setParameter("device_info","XXXX");//设备号
//$unifiedOrder->setParameter("attach","XXXX");//附加数据
//$unifiedOrder->setParameter("time_start","XXXX");//交易起始时间
//$unifiedOrder->setParameter("time_expire","XXXX");//交易结束时间
//$unifiedOrder->setParameter("goods_tag","XXXX");//商品标记
//$unifiedOrder->setParameter("openid","XXXX");//用户标识
//$unifiedOrder->setParameter("product_id","XXXX");//商品IDThese parameters eventually form such xml data,
<xml> <openid><![CDATA[ou9dHt0L8qFLI1foP-kj5x1mDWsM]]></openid> <body><![CDATA[方倍工作室]]></body> <out_trade_no><![CDATA[wx88888888888888881414411779]]></out_trade_no> <total_fee>1</total_fee> <notify_url><![CDATA[http://www.fangbei.org/wxpay/notify_url.php]]></notify_url> <trade_type><![CDATA[JSAPI]]></trade_type> <appid><![CDATA[wx8888888888888888]]></appid> <mch_id>10012345</mch_id> <spbill_create_ip><![CDATA[61.50.221.43]]></spbill_create_ip> <nonce_str><![CDATA[60uf9sh6nmppr9azveb2bn7arhy79izk]]></nonce_str> <sign><![CDATA[2D8A96553672D56BB2908CE4B0A23D0F]]></sign></xml>
Submit these data to the unified payment interface
https://api.mch.weixin.qq.com/pay/unifiedorder
will return the following data
<xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[OK]]></return_msg> <appid><![CDATA[wx8888888888888888]]></appid> <mch_id><![CDATA[10012345]]></mch_id> <nonce_str><![CDATA[Be8YX7gjCdtCT7cr]]></nonce_str> <sign><![CDATA[885B6D84635AE6C020EF753A00C8EEDB]]></sign> <result_code><![CDATA[SUCCESS]]></result_code> <prepay_id><![CDATA[wx201410272009395522657a690389285100]]></prepay_id> <trade_type><![CDATA[JSAPI]]></trade_type> </xml>
It contains the most important prepayment ID parameter, prepay_id, with a value of
wx201410272009395522657a690389285100
3. JS API payment
After the previous preparations are completed, JS API generates jsapi payment parameters based on prepay_id
The generated code is as follows
//=========步骤3：使用jsapi调起支付============$jsApi->setPrepayId($prepay_id);$jsApiParameters = $jsApi->getParameters();
The generated json data is as follows
{
"appId": "wx8888888888888888",
"timeStamp": "1414411784",
"nonceStr": "gbwr71b5no6q6ne18c8up1u7l7he2y75",
"package": "prepay_id=wx201410272009395522657a690389285100",
"signType": "MD5",
"paySign": "9C6747193720F851EB876299D59F6C7D"
}Debug the js interface in the WeChat browser, the code is as follows
<html><head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>微信安全支付</title>
<script type="text/javascript">
//调用微信JS api 支付
function jsApiCall()
{
WeixinJSBridge.invoke( 'getBrandWCPayRequest', <?php echo $jsApiParameters; ?>, function(res){
WeixinJSBridge.log(res.err_msg); //alert(res.err_code+res.err_desc+res.err_msg); }
);
} function callpay()
{ if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', jsApiCall);
document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
}
}else{
jsApiCall();
}
} </script></head><body>
</br></br></br></br>
<p align="center">
<button style="width:210px; height:30px; background-color:#FE6714; border:0px #FE6714 solid; cursor: pointer; color:white; font-size:16px;" type="button" onclick="callpay()" >贡献一下</button>
</p></body></html>When the user clicks the "Contribute" button, the WeChat payment plug-in will pop up and the user can start payment.
4. Payment notification
After the payment is successful, the notification interface will also receive an xml notification of successful payment.
<xml> <appid><![CDATA[wx8888888888888888]]></appid> <bank_type><![CDATA[CFT]]></bank_type> <fee_type><![CDATA[CNY]]></fee_type> <is_subscribe><![CDATA[Y]]></is_subscribe> <mch_id><![CDATA[10012345]]></mch_id> <nonce_str><![CDATA[60uf9sh6nmppr9azveb2bn7arhy79izk]]></nonce_str> <openid><![CDATA[ou9dHt0L8qFLI1foP-kj5x1mDWsM]]></openid> <out_trade_no><![CDATA[wx88888888888888881414411779]]></out_trade_no> <result_code><![CDATA[SUCCESS]]></result_code> <return_code><![CDATA[SUCCESS]]></return_code> <sign><![CDATA[0C1D7F2534F1473247550A5A138F0CEB]]></sign> <sub_mch_id><![CDATA[10012345]]></sub_mch_id> <time_end><![CDATA[20141027200958]]></time_end> <total_fee>1</total_fee> <trade_type><![CDATA[JSAPI]]></trade_type> <transaction_id><![CDATA[1002750185201410270005514026]]></transaction_id> </xml>
After notification_url is received, a confirmation success message will be returned to WeChat server
<xml> <return_code><![CDATA[SUCCESS]]></return_code></xml>
The above is the detailed content of Detailed explanation of JS API payment examples developed by WeChat. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
If you forget your WeChat payment password, how to retrieve it?
Feb 23, 2024 pm 09:40 PM
In WeChat, users can enter their payment password to make purchases, but how do they retrieve their payment password if they forget it? Users need to go to My-Services-Wallet-Payment Settings-to recover their payment password if they forget it. This introduction to how to retrieve your payment password if you forget it will tell you the specific operation method. The following is a detailed introduction, so take a look! WeChat usage tutorial. How to find the WeChat payment password if you forget it? Answer: My-Service-Wallet-Payment Settings-Forgot payment password. Specific method: 1. First, click My. 2. Click on the service inside. 3. Click on the wallet inside. 4. Find the payment settings. 5. Click Forgot payment password. 6. Enter your own information for verification. 7. Then enter the new payment password to change it.
How to set up WeChat payment for Meituan Takeout How to set up WeChat payment
Mar 12, 2024 pm 10:34 PM
There are many food and snack shops provided in the Meituan takeout app, and all mobile phone users log in through their accounts. Add your personal delivery address and contact number to enjoy the most convenient takeout service. Open the homepage of the software, enter product keywords, and search online to find the corresponding product results. Just swipe up or down to purchase and place an order. The platform will also recommend dozens of nearby restaurants with high reviews based on the delivery address provided by the user. The store can also set up different payment methods. You can place an order with one click to complete the order. The rider can arrange the delivery immediately and the delivery speed is very fast. There are also takeout red envelopes of different amounts for use. Now the editor is online in detail for Meituan takeout users. We show you how to set up WeChat payment. 1. After selecting the product, submit the order and click Now
Can Xianyu pay with WeChat? How to change to WeChat payment method?
Mar 12, 2024 pm 12:19 PM
When everyone has nothing to do, they will choose to browse the Xianyu platform. Everyone can find that there are a large number of products on this platform, which can allow everyone to see various second-hand products. Although these products are second-hand products, there is absolutely no problem with the quality of these products, so everyone can buy them with confidence. The prices are very affordable, and they still allow everyone to face-to-face with these products. It is entirely possible for sellers to communicate and conduct some price bargaining operations. As long as everyone negotiates properly, then you can choose to conduct transactions, and when everyone pays here, they want to make WeChat payment, but it seems that the platform It's not allowed. Please follow the editor to find out what the specific situation is. Xianyu
How to pay with WeChat on Alibaba_How to pay with WeChat on Alibaba 1688
Mar 20, 2024 pm 05:51 PM
Alibaba 1688 is a purchasing and wholesale website, and the items there are much cheaper than Taobao. So how does Alibaba use WeChat payment? The editor has compiled some relevant content to share with you. Friends in need can come and take a look. How does Alibaba use WeChat payment? Answer: WeChat payment cannot be used for the time being; 1. On the page where we purchase goods, we click [Change payment method] 2. Then in the pop-up page, we can only go to [Alipay, staged payment] , cashier] can be selected;
Sharing the steps to apply for a refund with WeChat Pay
Mar 25, 2024 pm 06:31 PM
1. First, we need to open the WeChat APP on the mobile phone, and then click to log in to the WeChat account, so that we enter the WeChat homepage. 2. Click the [Me] button in the lower right corner of the WeChat homepage, then select the [Payment] option. We click to enter the payment page. 3. After entering the [Payment] page, click the [Wallet] option to enter, and click [Bill] in the upper right corner of the [Wallet] page.
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
How to set up WeChat payment on Didi Chuxing How to set up WeChat payment
Mar 13, 2024 pm 01:22 PM
The Didi Chuxing app provides more convenience for everyone's daily travel. You can go wherever you want, and all Didi vehicles are on call. You no longer need to wait anxiously. Dozens of taxi red envelopes are available for free. Travel faster. Open the homepage of the software, enter the starting point and destination according to your personal itinerary, and freely choose from vehicles of different prices below. Place an order with one click and publish the itinerary. Didi drivers will receive the order in seconds and arrive at the designated location as quickly as possible. For the location, just check your mobile phone number before getting on the bus. Of course, there are many ways to pay for the fare, including WeChat and Alipay, but everyone usually uses WeChat. It is easy to set up payment with one click. Now the editor is online carefully paying for Didi one by one. Travel users bring how to set up WeChat payment. 1. We are on the mobile phone
How to activate WeChat Pay? WeChat Pay activation settings
Mar 14, 2024 am 10:00 AM
WeChat is an instant messaging application launched by Tencent. It supports cross-platform and cross-operator message sending and receiving. It has rich functions, including voice, video chat, and sharing in Moments. It is deeply loved by the majority of users. WeChat Pay is a payment function in WeChat Wallet, providing users with a more convenient payment experience. Let’s learn how to activate WeChat Pay. How to activate WeChat Pay? WeChat Pay Activation Settings 1. Open WeChat on your mobile phone, click [Me] in the lower right corner to enter the personal homepage, 2. Click the [Service] option. 3. Then click the [Wallet] icon. 4. Under the [Wallet] section, click [Split Payment] to enter the introduction page. 5. At the bottom of the payment introduction page, click the [View my payment limit] button. 6. Read the distribution carefully
