前端接入pingpp、stripe支付

简介: pingpp 支付接入安装npm i pingpp-js -Simport Pingpp from 'pingpp-js'调取后端提供的接口,获取pingpp++支付对象Pingpp.createPayment(data, function (result, err) {that.

pingpp 支付接入

  • 安装npm i pingpp-js -S
  • import Pingpp from 'pingpp-js'
  • 调取后端提供的接口,获取pingpp++支付对象

    Pingpp.createPayment(data, function (result, err) {
    that.btnLoading = false
    //              console.log("result:" + result)
    //              console.log("err.msg:" + err.msg)
    //              console.log("err.extra:" + err.extra)
    if (result === 'success') {
      // 只有微信JSAPI (wx_pub)、微信小程序(wx_lite)、QQ 公众号 (qpay_pub)、支付宝小程序(alipay_lite)支付成功的结果会在这里返回,其他的支付结果都会跳转到 extra 中对应的 URL
    } else if (result === 'fail') {
      // Ping++ 对象 object 不正确或者微信JSAPI/微信小程序/QQ公众号支付失败时会在此处返回
    } else if (result === 'cancel') {
      // 微信JSAPI、微信小程序、QQ 公众号、支付宝小程序支付取消支付
    }
                      })

    如果是微信扫码支付的话,后端接口返回的数据里data.credential.wx_pub_qr字段,前端直接qrcode工具转换成二维码就可以,然后去轮询,查询支付结果

如果是支付宝网页支付,调取createPayment方法后会直接调走

国际支付stripe

  • 引入<script src="https://js.stripe.com/v3/"></script>
  • 调取后端接口获取sessionid

    stripe.redirectToCheckout({
                       // Make the id field from the Checkout Session creation API response
                       // available to this file, so you can provide it as parameter here
                       // instead of the {{CHECKOUT_SESSION_ID}} placeholder.
                       sessionId: res.data
                     }).then(function (result) {
                         that.btnLoading = false
                       // If `redirectToCheckout` fails due to a browser or network
                       // error, display the localized error message to your customer
                       // using `result.error.message`.
                     })
  • 国际微信支付、国际支付宝支付

    if (this.payModel.payType === 'wechat') {
                      stripe.createSource({
                          type: 'wechat',
                          amount: that.Price.enMoney,
                          currency: that.currency,
                          statement_descriptor: this.orderId,
                          owner: {
                              name: this.userInfo.userName
                          }
                      }).then(function(result) {
                          that.handleQrcode(result.source.wechat.qr_code_url)
                          // handle result.error or result.source
                      })
                  } else {
                      stripe.createSource({
                          type: 'alipay',
                          amount: that.Price.enMoney,
                          currency: that.currency,
                          redirect: {
                              return_url: 'https://www.newstylegroup.com/order'
                          },
                          owner: {
                              name: this.userInfo.userName
                          },
                          statement_descriptor: this.orderId
                      }).then(function(result) {
                          that.btnLoading = false
                          window.location.href = result.source.redirect.url
                      })
                  }

    官方文档

相关文章
|
3月前
|
前端开发 小程序
前端解析支付宝返回form表单,自动跳转支付
前端解析支付宝返回form表单,自动跳转支付
197 1
|
1月前
|
前端开发 开发工具 数据库
支付系统资料-青戈版沙箱支付,订单编号样式设计,还有七天无理由退款,常与会员系统相搭配,内网穿透客户看到页面,前端展示,直播过程所有都能访问的写法
支付系统资料-青戈版沙箱支付,订单编号样式设计,还有七天无理由退款,常与会员系统相搭配,内网穿透客户看到页面,前端展示,直播过程所有都能访问的写法
支付系统资料-青戈版沙箱支付,订单编号样式设计,还有七天无理由退款,常与会员系统相搭配,内网穿透客户看到页面,前端展示,直播过程所有都能访问的写法
|
1月前
|
前端开发
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
|
1月前
|
前端开发 API
支付系统27-------梳理一下支付按钮,前端的代码
支付系统27-------梳理一下支付按钮,前端的代码
|
3月前
|
前端开发 定位技术 API
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)
【4月更文挑战第30天】本文介绍了在Flutter中集成第三方服务,如支付和地图,以增强应用功能和用户体验。开发者可通过官方或社区插件集成服务,关注服务选择、API调用、错误处理和用户体验。支付集成涉及选择服务、获取API密钥、引入插件、调用API及处理结果。地图集成则需选择地图服务、获取API密钥、初始化地图并添加交互功能。集成时注意选择稳定插件、阅读文档、处理异常、优化性能和遵循安全规范。随着Flutter生态发展,更多第三方服务将可供选择。
43 0
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)
|
9月前
|
前端开发 API
前端 -PC 端-支付流程
前端 -PC 端-支付流程
120 0
|
9月前
|
存储 移动开发 前端开发
前端-移动端--支付
前端-移动端--支付
52 0
|
移动开发 前端开发 Android开发
前端微信支付开发H5支付(微信外)
前端微信支付开发H5支付(微信外)
413 0
前端微信支付开发H5支付(微信外)
|
前端开发
前端微信JSAPI支付
前端微信JSAPI支付
192 0
|
前端开发 UED
支付宝玉伯:从前端到体验,如何把格局做大?
国内的前端行业,是一个群星璀璨,同时又有些纷纷扰扰的圈子。很多初出茅庐的年轻人怀着改变世界的梦想,谁也不服谁。
5924 0