Stripe支付简介和前端js调用

最近公司正在做一个国际版APP，涉及到海外支付，调研过Paypal、Skrill、BrainTree、Stripe（可参考海外移动支付方案对比），最终 选择了Stripe支付。Stripe特点如下：

1. 收费规则简单透明，手续费就是收取订单总额的3.4 % + HK$2.35。没有月费、开户费、退款手续费，撤销付款费用手续费HK$85.00
2. Stripe支持135+种货币创建付款（目前不支持*，只支持中国香港）。 
3. Stripe还支持其他付款方式，包括ACH信用转账、ACH借记转账、支付宝、Android Pay、Apple Pay、Bancontact、Bitcoin（比特币）、银行卡（Visa，Mastercard，American Express，Discover，Diners Club，JCB等）、Giropay、iDEAL、SEPA、SOFORT、微信支付等来自全球的热门支付方式。
4. Stripe的开发文档清晰简单，集成友好。提供了IOS、Android的SDK，以及对各种语言的支持。
5. 因为没有中国的移动支付那么发达，外国人一般都通过信用卡支付。

 

 

Stripe支付校验（https://stripe.com/docs/js）效果预览

测试卡号  （https://stripe.com/docs/testing）

日期:将来的任意日期   CVC:任意三位数字

普通卡：

4242424242424242   

需3D校验卡（所谓3D校验就是需要用户输入验证码来校验，stripe提供）

4000000000003220

4000002500003155

 

V3使用方法

 

以vue.js为例

视图层：

      <!-- stripe生成的组件 -->
          <div class="text-center">
            <div class="card-input gotham" id="card-number-element"></div>
            <div class="text-left gotham error">{{ stripeValidationError }}</div>
            <div class="box-row">
              <div class="card-input1 gotham" id="card-expiry-element"></div>
              <div class="card-input2 gotham" id="card-cvc-element"></div>
              <img
                class="cvv-icon"
                @click="iconCvv"
                src="../assets/images/[e-mail]"
              />
            </div>
          </div>

 

Script层：

    // 请求获取支付公钥接口
    http.getSecretToken().then(res => {
      if (res.state == 11) {
        console.log(res.data.token)
        this.stripe = Stripe(res.data.token) // 引入**
        this.createAndMountFormElements() // 调用执行stripe创建函数
      }
    })

    // stripe生成卡号校验部分
    createAndMountFormElements() {
      let elements = this.stripe.elements({
        locale: "en" // 设置默认显示语种   en 英文 cn 中文 auto 自动获取语种
      })

      // 创建cardNumber并实例化
      this.cardNumberElement = elements.create("cardNumber", {
        style: style,
        showIcon: true, // 设置卡片icon，默认值为false
        placeholder: this.cardNumberplaceholder
      })
      this.cardNumberElement.mount("#card-number-element")

      // 创建cardExpiry并实例化
      this.cardExpiryElement = elements.create("cardExpiry", { style: style })
      this.cardExpiryElement.mount("#card-expiry-element")

      // 创建cardCvc并实例化
      this.cardCvcElement = elements.create("cardCvc", { style: style })
      this.cardCvcElement.mount("#card-cvc-element")

      // 异常文字抛出
      this.cardNumberElement.on("change", this.setValidationError)
      this.cardExpiryElement.on("change", this.setValidationError)
      this.cardCvcElement.on("change", this.setValidationError)
    },
    // 获取异常文字
    setValidationError(event) {
      this.stripeValidationError = event.error ? event.error.message : ""
    },

 

第一步：引入script 

<script src="https://js.stripe.com/v3/"></script>

第二步：引入publishableKey

let stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

第三步：create an Elements（创建Elements）

let elements = this.stripe.elements()

注：可以带参数，fonts和locale，详见文档https://stripe.com/docs/js/elements_object/create

例如：

      let elements = this.stripe.elements({
        locale: "en" // 设置默认显示语种：en英文、cn中文、auto自动获取语种
      })

 

第四步：创建并实例化一个Element

create方法实例化对象  参数type  有Card、cardNumber、cardExpiry、cardCvc、fpxBank、iban、idealBank、paymentRequestButton、auBankAccount

每个type代表不同的实例化对象

 

注：card包含cardNumber、cardExpiry、cardCvc，不能同时创建

常用cardNumber、cardExpiry、cardCvc三个，创建三个实例化对象

可带option参数，常用style、showIcon、placeholder，详见文档：https://stripe.com/docs/js/elements_object/create_element?type=cardNumber

 

然后再实例化出来

element.mount(domElement)方法，绑定视图层的id

例：this.cardNumberElement.mount("#card-number-element")

第五步：获取异常文字的方法

首先，定义变量stripeValidationError来存储异常情况文字

<div class="text-left gotham error">{{stripeValidationError}}</div>   // 可以自定义

定义setValidationError方法

 

再用上stripe的change事件，详见文档：https://stripe.com/docs/js/element/events/on_change?type=cardElement

 

以上步骤就可以完成stripe卡号校验的基本功能

 

第六步：支付

两个对象

1. Payment_method (pm)    //创建账单
2. PaymentIntent (pi)     //  付款意图

 

Payment_method对象字段详见文档https://stripe.com/docs/api/payment_intents/object

PaymentIntent对象字段详见文档https://stripe.com/docs/api/payment_methods/object

前后端交互一般流程：

1、前端调stripe接口(创建Payment_method） ，返回Payment_method id（id格式为pm_xxxxxxx）

2、拿到Payment_method id后，请求后端接口，后端部分的stripe进行处理，返回PaymentIntent id（id格式为pi_xxxxxxx）

3、拿到PaymentIntent id去请求后端接口扣款，完成交易

 

前端stripe.createPaymentMethod => Payment_method id => 后端部分stripe => PaymentIntent id => 扣款

 

*前端处理详细过程

1、创建账单

调用 stripe.createPaymentMethod(paymentMethodData) 方法

paymentMethodData对象参数详见文档：https://stripe.com/docs/js/payment_methods/create_payment_method#stripe_create_payment_method-paymentMethodData

必须参数：type，card，billing_details

注意：billing_details一定要是对象，而且有固定格式，不然会请求失败报错

  "billing_details": {
    "address": {
      "city": null,
      "country": null,
      "line1": null,
      "line2": null,
      "postal_code": null,
      "state": null
    },

格式详见文档https://stripe.com/docs/api/payment_methods/create#create_payment_method-billing_details

// 示例代码
this.stripe.createPaymentMethod({
            type: "card",
            card: this.cardNumberElement, // 创建好的cardNumber实例
            billing_details: stripePaymentMethodOBJ  // 组装好的billing_details对象数据
          })
          .then(result => {
            if (result.error) {
              this.stripeValidationError = result.error.message 
            } else {
              // sessionStorage.setItem("paymentMethodId", result.paymentMethod.id)
              this.paymentMethodId = result.paymentMethod.id  // 获取paymentMethod.id 
			}
		})

拿到paymentMethod.id后请求后端接口，返回PaymentIntent id，再去扣款 完成交易

 

*3D校验

所谓3D校验就是需要用户输入验证码来校验，页面stripe提供

在获取到paymentMethod.id 后请求后端stripe获取PaymentIntent 对象的时候，后端会返回需不需要3D校验的信息

  

调用stripe.handleCardAction(clientSecret)方法，拉起3D校验弹窗

clientSecret字段存在于PaymentIntent 对象中

方法详情见文档：https://stripe.com/docs/js/payment_intents/handle_card_action