本章内容出自《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)
},