本章内容出自《15分钟打造你自己的小程序》电子书，点击下载完整版
云上开发花呗小程序
本文将介绍如何使用小程序Serverless云调用开发一个具有花呗支付能力的小程序。
说明：
步骤一：签约支付宝开放能力
参考以下步骤，在蚂蚁金服开放平台签约小程序支付能力：
- 使用支付宝开发者账号登录蚂蚁金服开放平台开发中心。
- 在左侧导航栏单击开发管理。
- 在小程序详情开发管理页面的能力列表中，单击右上角添加能力按钮，添加小程序支付能力。
花呗支付能力需要签约才能生效，在小程序上线后，单击功能列表右侧立即签约。签约完成后，需要1个工作日左右的审批时间（审批结果会以短信和邮件形式告知），审批成功后，功能状态会变为已生效。
步骤二：开发支付宝小程序
请参考以下步骤，开发支付宝小程序项目：
- 单击这里下载并安装小程序开发者工具。
- 打开小程序开发者工具。
- 在左侧导航栏选择支付宝 > 小程序。
- 单击模板选取，然后单击云与开放能力页签，选择花呗支付并单击下一步。
- 设置项目名称和路径，然后单击完成。
- 打开手机支付宝App扫描弹出的登录二维码。登录后，选择已创建的支付宝小程序应用完成关联，然后单击确定。
- 当提示绑定阿里云账号时，单击前往绑定阿里云账号，然后在打开的验证页面选择一种账号验证方式并完成验证。或右键单击左侧的server|未关联目录，然后选择关联Serverless。
说明：确保您要绑定的阿里云账号已关联支付宝账号。如果尚未关联，在阿里云账号页面，单击第三方账号绑定绑定支付宝。
-
在项目文件列表中找到app.js文件，配置以下信息，然后保存。
- appId是小程序的ID。您可以在蚂蚁金服开放平台的支付宝小程序页面查看App ID。
- spaceId、clientSecret和endpoint在小程序Serverless控制台创建服务空间后可以获得。
步骤三：调试小程序
打开小程序模拟器，在弹出的服务授权框中仔细阅读《用户授权协议》后选择同意。
小程序云Serverless代码详解
- 初始化Serverless SDK
在使用小程序Serverless服务前，需要您在小程序中安装小程序Serverless客户端SDK并初始化。小程序Serverless客户端SDK的更多信息请参见安装客户端SDK2.2版本。
// client/app.js
import MPServerless from '@alicloud/mpserverless-sdk';
const mpserverless = new MPServerless({
uploadFile: my.uploadFile,
request: my.request,
getAuthCode: my.getAuthCode,
}, {
appId: ' ', // 小程序应用标识
spaceId: ' ', // 服务空间标识
clientSecret: ' ', // 服务空间 secret key
endpoint: ' ' // 服务空间地址，从小程序Serverless控制台处获得
}); - 初始化云调用SDK并授权登录
要使用小程序云提供的扩展能力，您需要先在控制台开通云调用功能，然后在小程序中安装云调用SDK并进行初始化。
在调用小程序Serverless服务前，需要先调用authorize接口请求授权，支付宝小程序的授权请求参数authProvider应为alipay_openapi， 更多信息请参见authorize。
// client/app.js
import cloud from 'alipay-serverless-sdk';
cloud.init(my.serverless);
App({
async onLaunch(options) {
var res = await my.serverless.user.authorize({
authProvider: 'alipay_openapi',
});
},
});- 创建交易
以下代码调用payment.common.create和cloud.payment.huabei.create接口实现了创建直接付款订单和花呗分期付款交易能力，更多直接付款和花呗分期接口信息请参见payment.common.create和payment.huabei.create。
async tradeCreate() {
let createRes
if (this.data.checked === '1') {
// 直接付款
createRes = await cloud.payment.common.create('小程序Serverless支付测试', "demo" + new Date().getTime(), '0.03', this.data.userId);
} else {
// 花呗分期
var huabeiConfig = new Object({
hbFqNum: "3",
hbFqSellerPercent: "100"
});
createRes = await cloud.payment.huabei.create('小程序Serverless支付测试', "demo" + new Date().getTime(), '0.03', this.data.userId, huabeiConfig);
}
this.setData({
tradeNO: createRes.tradeNo,
outTradeNo: createRes.outTradeNo
})
return createRes.tradeNo
},- 付款
以下代码调用my.tradePay支付宝开放能力API唤起支付宝收银台进行支付，更多小程序支付信息请参见小程序支付。
async onRepeatPayHandler(data) {
my.tradePay({
tradeNO: this.data.tradeNO,
success: async (res) => {
if (res.resultCode === "9000") {
my.alert({
title: '支付成功',
content: res.resultCode,
});
const value = data.currentTarget.dataset.item
const { key } = value
const { paymentHistory } = this.data
paymentHistory.map(v => {
if (v.key === key) {
v.tradeStatus = 'TRADE_SUCCESS'
}
})
my.serverless.db.collection('payment').updateOne({
key
}, {
$set: {
tradeStatus: 'TRADE_SUCCESS'
}
})
this.setData({
paymentHistory
})
}
},
});
},- 退款
以下代码调用payment.common.refund云调用接口进行退款操作，更多信息请参见payment.common.refund。
async onRefundPayHandler(data) {
const value = data.currentTarget.dataset.item
const { outTradeNo, totalAmount, key } = value
const rs = await cloud.payment.common.refund(outTradeNo, String(totalAmount))
if (rs.code === "10000") {
my.showToast({
content: '退款成功',
});
const { paymentHistory } = this.data
paymentHistory.map(v => {
if (v.key === key) {
v.tradeStatus = 'TRADE_CLOSED'
}
})
this.setData({
paymentHistory
})
my.serverless.db.collection('payment').updateOne({
key
}, {
$set: {
tradeStatus: 'TRADE_CLOSED'
}
})
} else {
my.showToast({
content: '退款失败',
});
}
console.log(rs)
},