X.checkout.js 処理の流れ ／ Y.Stripe.js と Stripe Elements 処理の流れ ／ Z.Stripeのモバイルライブラリ 処理の流れ

X.checkout.js 処理の流れ

1.決済フォームのHTML

<form action="your-server-side-code" method="POST">

  <script

    src="https://checkout.stripe.com/checkout.js" class="stripe-button"

    data-key="pk_xxxxxx"

    data-amount="999"

    data-name="eee"

    data-description="Widget"

    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"

    data-locale="auto"

    data-zip-code="true"

    data-currency="jpy">

  </script>

</form>

2.トークン作成
▼checkout.js

作成したトークン
・["stripe_token"])パラメータの値として返される

token:function(parameters){return track("token",parameters,["stripe_token"])}

このフォームに戻ってきたトークンを<form action="your-server-side-code" method="POST">でサーバーサイド（"your-server-side-code"）に渡します。

トークン受取先
・クライアントのformタグ内で受け取る

Y.Stripe.js と Stripe Elements 処理の流れ

▼Stripe.js
・決済フローを実現するための JavaScript のライブラリ
・カード情報をトークン化して安全に処理する

トークン生成
・コード内容は理解できていない

this.createToken=en(function(t,n){var r=e._mids();return Da(e._controller,r)(t,n)})

Stripe Elements
・UIコンポーネント(支払いフォーム)を作成する

トークン受取先
・クライアントのJavaScript処理内で受け取る

Z.Stripeのモバイルライブラリ 処理の流れ

・未確認