前端接入pingpp、stripe支付

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

  官方文档