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

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

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><imgclass="cvv-icon"@click="iconCvv"src="../assets/images/icon-question-cvv@2x.png"/></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，默认值为falseplaceholder: 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卡号校验的基本功能

第六步：支付

两个对象

Payment_method (pm) //创建账单
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，再去扣款完成交易