支付寶小程序 快速示例·花唄支付

本次快速示例是通過使用 Serverless 云調(diào)用來實(shí)現(xiàn)花唄支付，這里將演示如何搭建小程序支付和花唄支付能力。

前提條件

安裝最新版 IDE，點(diǎn)擊下載。

獲取模板代碼

這里提供 Demo 源碼 下載，可以使用 IDE 進(jìn)行調(diào)試。

一、創(chuàng)建和配置小程序項(xiàng)目

首先要在支付寶小程序頁面創(chuàng)建小程序。

1. 進(jìn)入 支付寶小程序 頁面，然后在自主研發(fā)布局點(diǎn)擊 立即創(chuàng)建，就可進(jìn)入小程序創(chuàng)建頁面。
2. 在小程序頁面，點(diǎn)擊 創(chuàng)建，然后輸入小程序的名稱，再點(diǎn)擊 創(chuàng)建。

1. 點(diǎn)擊查看進(jìn)入某一個具體的小程序應(yīng)用詳情頁。
2. 為了保證商家和支付寶用戶的身份以及通信時的數(shù)據(jù)安全，開發(fā)者在調(diào)用接口前，需要配置密鑰，對交易數(shù)據(jù)進(jìn)行雙方校驗(yàn)。密鑰包含應(yīng)用私鑰（APP_PRIVATE_KEY），應(yīng)用公鑰（APP_PUBLIC_KEY）。
   • 通過支付寶小程序 APPID，應(yīng)用公/私鑰，支付寶公/私鑰來保證通信安全。
   • 更多信息可以參考：公私鑰介紹 和支付寶簽名快速入門。
3. 具體操作如下：
   • 您可以通過支付寶提供的密鑰生成工具一鍵生成小程序應(yīng)用私/公鑰。在設(shè)置成功后可以在查看中獲取 應(yīng)用公鑰 以及 支付寶公鑰。
   • 注意密鑰格式必須為 PKCS8（Java 適用）。

二、開通服務(wù)空間

本文將介紹小程序開發(fā)者工具（IDE）授權(quán)云資源流程，幫助開發(fā)者更加便捷地操作與管理小程序云服務(wù)。

前提條件

• 已 開通小程序云。
• 已下載并安裝 小程序開發(fā)者工具。

操作流程

1. 打開 IDE，新建項(xiàng)目，填寫 項(xiàng)目名稱、項(xiàng)目路徑，并在 后端服務(wù) 中選擇 小程序Serverless，點(diǎn)擊 完成。

1. 使用支付寶賬號登錄后，關(guān)聯(lián)相應(yīng)的小程序。小程序開發(fā)者工具需要主賬號授權(quán)后才能對云資源環(huán)境進(jìn)行查詢、部署等操作。在 主賬號授權(quán) 的彈框中，點(diǎn)擊 前往綁定阿里云賬號，前往阿里云頁面進(jìn)行授權(quán)。

1. 進(jìn)入阿里云網(wǎng)站，進(jìn)行首次登錄設(shè)置：快速注冊阿里云新賬號，或綁定已有阿里云賬號。（如已進(jìn)行阿里云賬號綁定則無需此步驟）

1. AliyunMPIDEDefaultRole 用于小程序開發(fā)者工具（MPIDE）服務(wù)默認(rèn)角色的授權(quán)策略。點(diǎn)擊 同意授權(quán)，授權(quán)后小程序開發(fā)者工具（MPIDE）將擁有對您云資源相應(yīng)的訪問權(quán)限。

1. 至此則完成了阿里云賬號的綁定流程，進(jìn)入 阿里云-小程序云產(chǎn)品控制臺。

三、關(guān)聯(lián)小程序

在開發(fā)前，您需要將支付寶小程序 APPID，小程序應(yīng)用私鑰，支付寶公鑰添加到阿里云小程序 Serverless 控制臺。

完成以下操作，添加支付寶小程序信息：

1. 在支付寶小程序應(yīng)用列表中獲取小程序 APPID。
2. 在支付寶小程序創(chuàng)建與配置中通過密鑰生成工具一鍵生成小程序應(yīng)用私鑰處獲取小程序應(yīng)用私匙。
3. 在支付寶小程序應(yīng)用詳情頁，設(shè)置 > 開發(fā)設(shè)置 > 開發(fā)信息 > 接口加簽方式 > 查看 處查看支付寶公鑰。

四、安裝依賴

進(jìn)入 client 目錄，執(zhí)行如下代碼安裝相關(guān)的依賴。

npm install

五、開發(fā)小程序

將 client/pages/app.js 中對應(yīng)的如下小程序配置項(xiàng)改為用戶自己的參數(shù)。具體參數(shù)可以參考上面的開發(fā)步驟。

import { log } from './utils';import MPServerless from '@alicloud/mpserverless-sdk';import cloud from 'alipay-serverless-sdk';my.serverless = my.serverless || new MPServerless({  uploadFile: my.uploadFile,  request: my.request,  getAuthCode: my.getAuthCode,}, {  appId: '2021*********', // 小程序應(yīng)用標(biāo)識  spaceId: 'ca8eb10f-26c1-4bee-**********', // 服務(wù)空間標(biāo)識  clientSecret: 'Xckz2************', // 服務(wù)空間 secret key  endpoint: 'https://api.************' // 服務(wù)空間地址，從小程序Serverless控制臺處獲得});// 必須要初始化哦~cloud 是一個單例，初始化一次 App 引入均可生效cloud.init(my.serverless);App({  async onLaunch(options) {    log.info('App onLaunch');    // 授權(quán)登錄方法    var res = await my.serverless.user.authorize({      authProvider: 'alipay_openapi',    });    console.log('基礎(chǔ)授權(quán)結(jié)果:' + res);  },  onShow(options) {    log.info('App onShow');  },});

六、使用支付、花唄分期付、退款等相關(guān)能力

在頁面中使用小程序支付和退款。

import cloud from 'alipay-serverless-sdk';const createRes = await cloud.payment.common.create('小程序Serverless支付測試', "ziqing" + new Date().getTime(), '0.03', this.data.userId);my.tradePay({  tradeNO: createRes.tradeNO,  success: async (res) => {    console.log(res);  }})// 退款await cloud.payment.common.refund(createRes.outTradeNo, '0.03')

頁面中使用花唄分期和退款。

import cloud from 'alipay-serverless-sdk';


var huabeiConfig = new Object({
  hbFqNum: "3",
  hbFqSellerPercent: "100"});const createRes = await cloud.payment.huabei.create('小程序Serverless支付測試', "ziqing" + new Date().getTime(), '0.03', this.data.userId, huabeiConfig);
my.tradePay({
  tradeNO: createRes.tradeNO,
  success: async (res) => {
    console.log(res);
  }})// 退款await cloud.payment.common.refund(createRes.outTradeNo, '0.03')

其他能力的使用請參見 Alipay Serverless SDK。

七、完成開發(fā)

效果如下圖：