云上开发花呗支付小程序-阿里云开发者社区

开发者社区> 开发者学习资源库> 正文
登录阅读全文

云上开发花呗支付小程序

简介: 本文将介绍如何使用小程序Serverless云调用开发一个具有花呗支付能力的小程序。

本章内容出自《15分钟打造你自己的小程序》电子书,点击下载完整版

云上开发花呗小程序

本文将介绍如何使用小程序Serverless云调用开发一个具有花呗支付能力的小程序。
说明:

  • 本场景的小程序Demo需要使用蚂蚁金服开放平台企业账号。单击这里进行申请。
  • 本场景中的小程序Demo涉及到资金类接口,必须使用公钥证书方式进行接口加签。具体操作请参考生成密钥

步骤一:签约支付宝开放能力

参考以下步骤,在蚂蚁金服开放平台签约小程序支付能力:

  1. 使用支付宝开发者账号登录蚂蚁金服开放平台开发中心。
  2. 在左侧导航栏单击开发管理
    image.png
  3. 在小程序详情开发管理页面的能力列表中,单击右上角添加能力按钮,添加小程序支付能力。

花呗支付能力需要签约才能生效,在小程序上线后,单击功能列表右侧立即签约。签约完成后,需要1个工作日左右的审批时间(审批结果会以短信和邮件形式告知),审批成功后,功能状态会变为已生效
image.png

步骤二:开发支付宝小程序

请参考以下步骤,开发支付宝小程序项目:

  1. 单击这里下载并安装小程序开发者工具。
  2. 打开小程序开发者工具。
  3. 在左侧导航栏选择支付宝 > 小程序
  4. 单击模板选取,然后单击云与开放能力页签,选择花呗支付并单击下一步
    image.png
  5. 设置项目名称和路径,然后单击完成
  6. 打开手机支付宝App扫描弹出的登录二维码。登录后,选择已创建的支付宝小程序应用完成关联,然后单击确定
  7. 当提示绑定阿里云账号时,单击前往绑定阿里云账号,然后在打开的验证页面选择一种账号验证方式并完成验证。或右键单击左侧的server|未关联目录,然后选择关联Serverless

说明:确保您要绑定的阿里云账号已关联支付宝账号。如果尚未关联,在阿里云账号页面,单击第三方账号绑定绑定支付宝。
image.png

  1. 在项目文件列表中找到app.js文件,配置以下信息,然后保存。

    • appId是小程序的ID。您可以在蚂蚁金服开放平台的支付宝小程序页面查看App ID。
    • spaceId、clientSecretendpoint小程序Serverless控制台创建服务空间后可以获得。
      image.png

步骤三:调试小程序

打开小程序模拟器,在弹出的服务授权框中仔细阅读《用户授权协议》后选择同意
image.png

小程序云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.createpayment.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)
  },

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

开发者免费资源中心,技术电子书、会议PPT、论文资料持续供应中

官方博客
官网链接