小程序开发实战案例之二｜如何实现小程序支付

现武發表於 2023-12-6 09:41:00

小程序开发实战案例之二｜如何实现小程序支付

<div class="lake-content">
上一章讲完如何获取用户信息授权 后，下一步就可以进行小程序支付了。
本期就来介绍下支付宝小程序支付如何实现。
<img width="200" id="u1d8b01b0" class="ne-image lazyload" data-src="https://intranetproxy.alipay.com/skylark/lark/0/2023/png/136731/1701759717472-86a1a9ae-9eda-46d2-b54a-e1fea0511034.png">
 
PS：接入前的准备工作可以参考：接入准备；接入指南可参考：接入指南～
 
<h2 id="U6XEJ">获取小程序支付权限</h2>
获取权限分为三步：分别是 账号开通 JSAPI 支付、账号与小程序账号绑定 以及 小程序绑定 JSAPI 产品
 
<h3 id="ZWaId">账号开通 JSAPI 支付</h3>
需要用收款主体账号去签约，账号要求必须是企业或者是个体工商户。
可以直接通过 👉 签约直通车 进行开通
<img width="500" id="uecc36237" class="ne-image lazyload" data-src="https://intranetproxy.alipay.com/skylark/lark/0/2023/png/136731/1701739316437-4978f00a-f873-49c7-8e9c-8ea2149589a0.png">
 
<h3 id="TDnuW">账号与小程序账号绑定</h3>
开通成功之后，要去 小程序 AppID 管理 页面关联小程序，将开发的小程序关联到账号下。
⚠ 注意：哪个小程序开发就绑哪个小程序，不绑的话后面无法支付成功。
<img width="1000" id="uc619ecaf" class="ne-image lazyload" data-src="https://intranetproxy.alipay.com/skylark/lark/0/2023/png/136731/1701743113874-a725bb25-40d5-481b-b103-ce2bd2b9053e.png">
 
<h3 id="noJPl">小程序绑定JSAPI产品</h3>
要到小程序详情界面的【产品绑定】去绑 JSAPI 支付产品。
可以参考 👉 [应用如何实现产品绑定] 进行操作：
<img width="1249.0908820175932" id="ud9d4271f" class="ne-image lazyload" data-src="https://intranetproxy.alipay.com/skylark/lark/0/2023/png/136731/1701755900337-7ed4b4d8-51c7-45ca-9158-ac628773afd9.png">
 
签约过程中可能遇到的问题也给大家列在这里了，大家可以参考下～：
<ul class="ne-ul">
<li id="u44d0ae28" data-lake-index-type="0">[小程序功能列表中没有支付能力]</li>
<li id="u24051f9d" data-lake-index-type="0">[个人小程序是否支持支付功能]</li>
<li id="u7330f079" data-lake-index-type="0">[小程序支付签约要求]</li>
</ul>
 
小贴士 📖：账号不符合要求的也可以通过沙箱环境去测试下，可以参考之前写的这篇~
<div class="ne-quote">
<blockquote>
支付宝沙箱超详细教程+避雷经验，看这篇就够了
</blockquote>
</div>
 
<h2 id="wKvOD">支付调用整体流程</h2>
获取到权限之后我们就可以进行接口调用了，主要步骤分为：
<ul class="ne-ul">
<li id="u6bd6274b" data-lake-index-type="0">（前端+后端）获取用户的授权信息 </li>
<li id="u0782570a" data-lake-index-type="0">（前端）将订单信息传到服务端 </li>
<li id="u2a01f525" data-lake-index-type="0">（后端）服务端创建支付单 </li>
<li id="u661637ad" data-lake-index-type="0">（前端）唤起支付</li>
</ul>
 
<h3 id="Ur0af">第一步、获取用户的授权信息</h3>
目的：这一步是为了能够获取到用户的 user_id（openid）
注意：user_id 和 openid 都是可以的，新老账号可能获取到的信息不一样，我之前老的账号获取到的是user_id，新申请的账号获取到的是 openid，根据大家的自己账号实际情况来看~
对此内容感兴趣的小伙伴也可以查看 👉[openid 和 userid 的区别]
<h4 id="w9hV4">方法一：通过用户授权获取（用户端有弹窗）</h4>
大家可以参考我之前写的获取用户信息的 my.getAuthCode 步骤，下面简单概括下就是：
<ul class="ne-ul">
<li id="ue79ec69f" data-lake-index-type="0">前端通过 my.getAuthCode 方法获取到用户的授权 authCode </li>
<li id="u6cec3502" data-lake-index-type="0">将 authCode 传到后端通过 alipay.system.oauth.token 接口获取 access_token 参数</li>
<li id="ued213a5b" data-lake-index-type="0">后端用 access_token 参数传入 alipay.user.info.share 接口中获取到 user_id（openid）</li>
</ul>
<h4 id="pWkUA">方法二：通过静默授权获取（用户端无弹窗）</h4>
静默授权与用户授权同样是使用的 my.getAuthCode 方法，但是 scopes 传参不同，获取到的信息 只有 uid（openid），调用步骤为：
<ul class="ne-ul">
<li id="ufc02477c" data-lake-index-type="0">前端通过 my.getAuthCode 方法（scopes 入参 auth_base）获取到用户的授权 authCode </li>
<li id="u9bb58f4c" data-lake-index-type="0">将 authCode 传到后端通过 alipay.system.oauth.token 接口到 user_id（openid）</li>
</ul>
代码示例
<div class="cnblogs_code">
<pre>Page({
getAuthCode() {
my.getAuthCode({
 scopes: 'auth_base',//静默授权
 success: res => {
 const authCode = res.authCode;
 fail: err => {
 console.log('my.getAuthCode 调用失败', err)
 }
});
}
})</pre>
</div>
 
<div class="lake-content">
授权这块的问题在上一篇
<ul>
<li id="u8b79ff91" data-lake-index-type="0">[小程序静默授权是否可以拿到用户头像昵称]</li>
<li id="u2bc4d23e" data-lake-index-type="0">[支付宝小程序可以在首页获取到user_id吗]</li>
</ul>
 
</div>
<div class="lake-content">
<h3 id="ZyENj">第二步、将订单信息传到服务端</h3>
 用户信息获取到之后，我们就可以将订单信息和用户信息一起再打包，通过 my.request 传回服务端
<div class="cnblogs_code">
<pre>//.js页面
Page({
pay(){
my.request({
 url: '商家服务端地址',//须加httpRequest域白名单
 method: 'POST',
 data: {//data里的key、value是开发者自定义的
 from: '支付宝',
 order: 'XXXXX',//订单信息
 },
 dataType: 'json',
 success: function(res) {
 my.alert({content: 'success'});
 },
 fail: function(res) {
 my.alert({content: 'fail'});
 },
 complete: function(res) {
 my.hideLoading();
 my.alert({content: 'complete'});
 }
});
}
});</pre>
</div>
 
如果是在本地测试的话记得在 IDE 的【详情】里面把下面这两个校验勾选上，不然IDE会去校验域名的合法性的。
<img width="452.7272629146736" id="u97da13e2" class="ne-image lazyload" data-src="https://intranetproxy.alipay.com/skylark/lark/0/2023/png/136731/1701758431755-d739bbbe-1fe0-4d6d-beed-5b76d436a7c9.png">
 
这边给大家汇总一些 my.request 调用过程中的常见问题：
<ul class="ne-ul">
<li id="uc08b8098" data-lake-index-type="0">[my.request API 可以使用 ip 地址访问吗]</li>
<li id="u69b6bd4e" data-lake-index-type="0">[my.request 的 url 参数的域名是否需要配置白名单]</li>
<li id="u069e8160" data-lake-index-type="0">[my.request 默认请求头]</li>
<li id="u5301ebeb" data-lake-index-type="0">[my.request 默认请求超时是多久]</li>
</ul>
 
<h3 id="xBQxK">第三步、服务端创建支付单</h3>
目的：获取 trade_no（支付宝交易号）
接收到前端传过来的订单信息之后，需要将信息传入 alipay.trade.create 接口中获取 trade_no。
服务端的代码大家可以直接参考：👉 [alipay.trade.create 代码示例]
 
📌下面简单列一下后端几个必传的参数：
<ul class="ne-ul">
<li id="u1fea7835" data-lake-index-type="0">out_trade_no：商户端自定义订单号，需保证在商户端的唯一性。</li>
<li id="ua989b714" data-lake-index-type="0">total_amount：订单金额，单位元，精确到两位小数。</li>
<li id="u9f390ea9" data-lake-index-type="0">subject：订单标题，会在账单界面展示。</li>
<li id="u68e5f46c" data-lake-index-type="0">product_code：产品码，固定值 JSAPI_PAY。</li>
<li id="u838b7991" data-lake-index-type="0">op_app_id：传小程序appid。</li>
</ul>
 
如果获取到的是user_id，传入
<ul class="ne-ul">
<li id="ua3f2d515" data-lake-index-type="0">buyer_id：传入之前获取到的user_id。</li>
</ul>
 
如果获取到的是openid，传入
<ul class="ne-ul">
<li id="u036d1f00" data-lake-index-type="0">buyer_open_id：传入之前获取到的openid。</li>
</ul>
 
后端接口调用成功之后就可以获取到 trade_no 参数了：
<img width="1046.3636136843159" id="u346afbc1" class="ne-image lazyload" data-src="https://intranetproxy.alipay.com/skylark/lark/0/2023/png/136731/1701744290657-72b1ceb4-5cf8-49b4-955c-68729f2d6c50.png">
 
服务端接口报错的常见问题如下：
<ul class="ne-ul">
<li id="u2d072be6" data-lake-index-type="0">[小程序支付报错：ACCESS_FORBIDDEN]</li>
<li id="u22e6a769" data-lake-index-type="0">[小程序支付报错：本笔交易不支持在本小程序内支付请联系商户完成小程序 APPID 的绑定后再重新发起支付]</li>
<li id="uedabad1d" data-lake-index-type="0">[ACQ.UNBOUND_APPLICATION（指定小程序主体未完成关联绑定）]</li>
<li id="u82f751e0" data-lake-index-type="0">[小程序支付报错：支付失败，商家支付唤起方式不正确，请联系商家解决]</li>
</ul>
 
<h3 id="p9j9M">第四步、唤起支付</h3>
前端获取到 trade_no 之后，我们就可以通过 my.tradePay（发起支付） 方法在小程序上唤起收银台了。
<div class="cnblogs_code">
<pre>// .js
my.tradePay({
// 传入支付宝交易号trade_no
tradeNO: '201711152100110410533667792',
success: (res) => {
my.alert({
 content: JSON.stringify(res),
});
},
fail: (res) => {
my.alert({
 content: JSON.stringify(res),
});
}
});</pre>
</div>
 
如果是 IDE 上测试的话，需要用支付宝扫码进行支付：
<img width="223" id="u6c7f2f21" class="ne-image lazyload" data-src="https://intranetproxy.alipay.com/skylark/lark/0/2023/png/136731/1701746705821-3e10f402-f7b8-43d2-a62f-7f5bf514ac13.png">
 
真机测试可以直接唤起收银台进行支付：
<img width="603" id="u8fc6f393" class="ne-image lazyload" data-src="https://intranetproxy.alipay.com/skylark/lark/0/2023/jpeg/136731/1701759175478-d6e8990b-ccc4-40bc-a7f8-cec95964b1c3.jpeg">
 
大家也可以看下支付过程中可能会遇到的一些问题～：
<ul class="ne-ul">
<li id="ubb78df4a" data-lake-index-type="0">[小程序前端跳转是否可以判断支付成功]</li>
<li id="u85a6a910" data-lake-index-type="0">[小程序开发者工具是否在支持测试小程序支付功能]</li>
<li id="u444e485c" data-lake-index-type="0">[小程序支付如何设置同步]</li>
<li id="ub385b252" data-lake-index-type="0">[小程序支付报错：当面付等产品不支持在小程序场景内使用，请联系商户更换收单产品后再重新发起支付]</li>
</ul>
 
以上就是小程序支付的所有内容了，希望能够帮助到你*★,°*:.☆(￣▽￣)/$:*.°★* 。
</div>
 
</div> 
来源：https://www.cnblogs.com/yjdmx/p/17878831.html

頁: [1]

琼殿技术论坛's Archiver

小程序开发实战案例之二｜如何实现小程序支付