最近公司正在做一個國際版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/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，默認值為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