首页 > 其他分享 >uniapp 如何接入 airwallex的支付

uniapp 如何接入 airwallex的支付

时间:2023-04-06 17:13:43浏览次数:26  
标签:uniapp 函数 接入 paymentMethodType airwallex 支付 回调 Airwallex

在uni-app中接入 Airwallex 的支付,需要进行如下步骤:

  1. 在你的uni-app项目中引入Airwallex SDK。
import airwallex from 'airwallex-payment-widgets';
  1. 初始化Airwallex支付控件。
const paymentMethodConfig = {
  env: 'staging', // 环境,包括“staging”和“production”
  paymentIntentId: 'pi_XXXXXXXXXXXXXXX',
  clientSecret: 'cs_XXXXXXXXXXXXXXX',
  customerId: 'cus_XXXXXXXXXXXXXXXX',
  paymentMethodType: 'card',
  cardConfiguration: {
    billing: {
      address: {
        country: 'CN',
        city: 'Shanghai',
        street: 'Pudong New District'
      }
    }
  },
  onComplete: function (result) {
    console.log(result);
  },
  onCancel: function () {
    console.log('cancel');
  },
  onFailed: function () {
    console.log('failed');
  }
};

airwallex.init(paymentMethodConfig);

其中,paymentMethodConfig 对象包含了以下参数:

  • env: 环境,可以是 "staging" 或 "production"。
  • paymentIntentId: 支付意向 ID,可以在 Airwallex Dashboard 中创建。
  • clientSecret: 客户端密钥,用于验证客户端请求是否合法。
  • customerId: 客户 ID,用于记录此次交易的客户信息。
  • paymentMethodType: 支付方法类型,可以是 "card"、"wechatpay_cn" 或 "alipay_cn" 中的一种。
  • cardConfiguration: 只有当 paymentMethodType 为 "card" 时才需要设置,用于配置信用卡支付的参数。
  • onComplete: 支付完成后的回调函数。
  • onCancel: 用户取消支付时的回调函数。
  • onFailed: 支付失败时的回调函数。
  1. 调用 Airwallex 提供的 show 方法,显示支付控件。
airwallex.show();
  1. 在回调函数中处理支付结果。当支付成功时,会触发 onComplete 回调函数,并返回一个 paymentMethod 对象。当用户取消支付或支付失败时,会触发 onCancel 或 onFailed 回调函数。

以上就是在uni-app中接入Airwallex支付的基本流程。具体实现过程可能会因为环境、业务需求等因素而略有不同。

标签:uniapp,函数,接入,paymentMethodType,airwallex,支付,回调,Airwallex
From: https://www.cnblogs.com/xqschool/p/17293389.html

相关文章

  • Containerd接入Harbor仓库【3】
    1.说明在使用容器时,避免不了会使用到私有仓库,一般都是采用harbor作为私有仓库,docker对接harbor仓库非常简单,哪containerd如何对接harbor呢?在内网使用harbor根据个人习惯,一般都是非http并且是通过IP直接访问,如下:harbor仓库地址为:http://192.168.199.102:80,cont......
  • Golang 应用接入 Prometheus 监控
    前言Prometheus提供了官方版Golang库(https://github.com/prometheus/client_golang)用于采集并暴露监控数据,本文快速为你介绍如何使用官方版Golang库来暴露Golangruntime相关的数据,以及其它一些基本简单的示例,并使用Prometheus监控服务来采集指标展示数据。❝有关全面......
  • uniapp开发小程序输入框拉起软键盘时,输入框显示不全,被软键盘挡住一半
    在开发过程中,input或者Textarea聚焦时,出现遮挡一半的情况处理方法:(1)在input或者textarea添加:cursorSpacing="20"留出光标到软键盘的距离。 (2)若在弹窗定位中时需要加入:fixed="true"属性,不然拉起软键盘时没有显示在软键盘上面。 (3)若在<u-popup>中时iphone可能还无法解决这个......
  • HCIP-ICT实战进阶12-接入安全技术介绍
    HCIP-ICT实战进阶12-接入安全技术介绍HCIP最后一篇理论博客了,这个搞完我再考虑要不要把系统集成也整一份博客,还是把HCIP实验的博客整理整理,这学期争取去国科那边接接项目吧.0前言在这篇博客中,我将介绍常见的以太网交换安全技术,包括端口隔离、端口安全、MAC地址表安......
  • uniapp-报错记录
    1.JSON转换格式,数据中含有地址 解决方法:经过JSON.stringify()方法转换过的对象或数组,再使用encodeURIComponent()方法再次编码,使用时先通过decodeURIComponent解码,然后再使用JSON.parse()方法转化成json类型的对象或者数组2.globalData踩坑 不小心把globalData写成了函数,一......
  • 从头开始新建uniapp
    1、打开HBuilderX,新建项目 2、修改AppID(在https://mp.weixin.qq.com注册一个小程序)   3、登入Hbuilder自动获取ApppID   4、运行-微信开发者工具 5、此时会自动打开微信开发者工具运行对应项目,如果微信开发者工具打开后没有出现对应成功运行的效果(如下......
  • LiveVISGAT1400视图库服务-支持海康大华华为宇视天地伟业等设备视图库接入使用说明
    @目录LiveVISGAT1400视图库服务安装使用说明1、服务说明1.1、安装包说明1.2、视图库服务1.3、配置视图库服务参数2、服务运行2.1、Windows2.2、Linux3、配置设备接入3.1、海康视图库接入示例3.2、大华视图库接入示例4、平台使用4.1、管理平台4.2、接口文档5、统一编码规则6、Live......
  • Uniapp开发的微商个人相册多端小程序源码
    ☑️品牌:Uniapp☑️语言:vue☑️类型:微商个人相册☑️支持:小程序......
  • 基于uniapp开发的zblog多端小程序源码
    ☑️品牌:uniapp☑️语言:vue☑️类型:文章资讯博客☑️支持:小程序......
  • PowerJob 快速上手 Ruoyi接入PowerJob
    一、引入依赖1、pom.xml(ruoyi)<!--快速集成PowerJob执行器--><dependency><groupId>tech.powerjob</groupId><artifactId>powerjob-worker-spring-boot-starter</artifactId>......