前端接入pingpp、stripe支付

  1. 云栖社区>
  2. 博客>
  3. 正文

前端接入pingpp、stripe支付

烟海之蓝 2019-10-16 17:45:19 浏览1384
展开阅读全文

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
                      })
                  }

    官方文档

网友评论

登录后评论
0/500
评论
烟海之蓝
+ 关注