目次一覧
状態:-
閲覧数:1,033
投稿日:2019-02-13
更新日:2019-03-21
トークン化の流れ / トークン化する方法は2種類 / さらに3種類に分かれる
X.checkout.js 処理の流れ / Y.Stripe.js と Stripe Elements 処理の流れ / Z.Stripeのモバイルライブラリ 処理の流れ
感想履歴 / 質問履歴5 / 質問履歴7
X.checkout.js 処理の流れ / Y.Stripe.js と Stripe Elements 処理の流れ / Z.Stripeのモバイルライブラリ 処理の流れ
感想履歴 / 質問履歴5 / 質問履歴7
トークン化の流れ / トークン化する方法は2種類 / さらに3種類に分かれる
トークン化の流れ
1.トークン生成
・クライアント(購入者のブラウザなど)で、トークン生成する
2.トークンをStripeへ送信
・生成したトークンをカード情報とともに、Stripeサーバへ送信
3.Stripeサーバがトークンを戻す
・クライアントは、Stripeサーバより返されたトークンを受け取る
4.クライアントはトークンを販売者側のサーバへ渡す
・クライアントは、Stripeサーバより返されたトークンを、今度は販売者側のサーバへ送信する
・販売者側のサーバは、トークンを受け取る
5.課金実行
・販売者側のサーバは、受け取ったトークンなどを使用して、Stripeの課金APIをリクエスト
・課金実行
6.課金後の処理
・成功コールバックで課金データをユーザーに紐付ける
トークン化する方法は2種類
A.Stripeに丸投げ
・Stripeが用意した仕組み(js)を利用してトークン化
B.自力で構築
・自前でトークン化
比較一覧表
- | Stripeに丸投げ | 自力で構築 |
---|---|---|
「顧客の生のカード情報」をどこが取得するか | Stripe側のサーバ | 販売者側のサーバ |
PCI DSS 対応 | Stripe | 販売者 |
さらに3種類に分かれる
「A.Stripeに丸投げ」する方法はさらに3種類に分かれる
・X.checkout.js
・Y.Stripe.js と Stripe Elements
・Z.Stripeのモバイルライブラリ
X.checkout.js
・ウェブとモバイルでの最もシンプルな決済フロー
・HTML、JavaScript、およびCSSを組み合わせて、埋め込み支払いフォームを作成する
・顧客が支払い情報を入力すると、カードの詳細が検証され、サーバーサイドコードで使用できるようにトークン化される
※カスタマイズ性は低い
比較一覧表
- | checkout.js | Stripe.js と Stripe Elements | Stripeのモバイルライブラリ |
---|---|---|---|
JavaScriptライブラリのURL | https://checkout.stripe.com/checkout.js | https://js.stripe.com/v3/ | - |
Stripeサーバより返された「トークン」をどこで受け取る | クライアントのformタグ内 | クライアントのJavaScript処理内 | - |
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
https://checkout.stripe.com/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 のライブラリ
・カード情報をトークン化して安全に処理する
https://js.stripe.com/v3/
トークン生成
・コード内容は理解できていない
this.createToken=en(function(t,n){var r=e._mids();return Da(e._controller,r)(t,n)})
Stripe Elements
・UIコンポーネント(支払いフォーム)を作成する
トークン受取先
・クライアントのJavaScript処理内で受け取る
Z.Stripeのモバイルライブラリ 処理の流れ
・未確認
感想履歴 / 質問履歴5 / 質問履歴7
感想履歴
「クライアントサイドのトークン化」という表現が分かり難いかも
・少なくとも私には分かり難かった……
クライアントサイドだけでトークン化が完結するわけではない
・下記はStripeではなく、PAY.JPだけれども、「カード情報をトークン化する処理」の説明は分かりやすい
・1.チェックアウトやpayjp.jsで生成されたフォームにカード情報を入力し送信
・2.入力されたカード情報は直接PAY.JPサーバーへ送られ、PAY.JPは一意のトークンを返す
・3.サーバーサイドでトークンを受け取り、トークンを使った各種処理を行う(支払い処理、顧客へカードを紐付けるなど)
・カード情報のトークン化・2.入力されたカード情報は直接PAY.JPサーバーへ送られ、PAY.JPは一意のトークンを返す
・3.サーバーサイドでトークンを受け取り、トークンを使った各種処理を行う(支払い処理、顧客へカードを紐付けるなど)
違うかも
・クライアントサイドだけでトークン化が完結できる?
・クレジットカード情報をトークン化するpayjp.jsの使い方
トークン化は、クライアントサイド(購入者のブラウザなど)で行う
・Stripeが用意した仕組み(js)を利用して、クライアントサイド(購入者のブラウザなど)でトークン化
クライアントでトークン作成しても、それだけでは意味を成さない
・クライアントでトークン作成出来ても、サーバサイドでも保管しておかないと意味がない
・その意味で言えば、クライアントサイドだけでトークン化が完結するわけではない
質問履歴5
Q5.トークン化
・2019/2/13
トークン化について
------------------------------------------------------
「クライアントサイドのトークン化を使用できない場合」について
https://stripe.com/docs/api/tokens
>クライアントサイドのトークン化を使用できない場合は、公開可能または秘密のAPIキーを使用してAPIを使用してトークンを作成することもできます
Q1.「クライアントサイドのトークン化を使用できない場合」というのは、例えばどういう状況ですか?
・jsを使用できない環境ということですか?
Q2.APIを使用してトークンを作成するには?
・この方法はどこに記載されているのでしょうか?
Q3.APIを使用してトークンを作成した場合
・顧客情報はどこに保存されるのでしょうか?
・自分(販売側)のサーバですか?
・それとも「お客様の情報はStripeに直接送信されない」とあるので、最終的に保存する場所としては同じStripeなのでしょうか?
------------------------------------------------------
「クライアントサイドのトークン化」について
Q4.APIも使用しますか?
・「クライアントサイドのトークン化」の意味は、「jsを使用してトークン化」あるいは「クライアントサイドをトリガーとしてトークン化」というような意味合いですか?
・クライアントだけでトークン化が完結するわけではない、という認識で合っているでしょうか?
------------------------------------------------------
「クライアントサイドのトークン化を使用できない場合」について
https://stripe.com/docs/api/tokens
>クライアントサイドのトークン化を使用できない場合は、公開可能または秘密のAPIキーを使用してAPIを使用してトークンを作成することもできます
Q1.「クライアントサイドのトークン化を使用できない場合」というのは、例えばどういう状況ですか?
・jsを使用できない環境ということですか?
Q2.APIを使用してトークンを作成するには?
・この方法はどこに記載されているのでしょうか?
Q3.APIを使用してトークンを作成した場合
・顧客情報はどこに保存されるのでしょうか?
・自分(販売側)のサーバですか?
・それとも「お客様の情報はStripeに直接送信されない」とあるので、最終的に保存する場所としては同じStripeなのでしょうか?
------------------------------------------------------
「クライアントサイドのトークン化」について
Q4.APIも使用しますか?
・「クライアントサイドのトークン化」の意味は、「jsを使用してトークン化」あるいは「クライアントサイドをトリガーとしてトークン化」というような意味合いですか?
・クライアントだけでトークン化が完結するわけではない、という認識で合っているでしょうか?
質問履歴7
Q7.トークン化
・2019/2/16
Checkout利用時の「トークン生成タイミング」と「トークン生成場所」について
先日ご回答いただきました件につきまして。
理解できたと思っていたのですが、新たな疑問が生じたため、再度質問させてください。
Checkout利用時の「トークン生成タイミング」と「トークン生成場所」について
トークン生成場所はどこですか?
・顧客のブラウザ?
・Stripeサーバ?
最初に、checkout.jsを取得して、クライアントで実行することにより、フォームタグ内が下記のような結果に置き換わると思うのですが、
・この段階では、(まだカード情報を入力していないので)トークン生成していない、という理解で合っているでしょうか?
・distinct_idは何を意味していますか?
https://checkout.stripe.com/m/v3/index-3f0dc197837628f45156bf4f7ed0f6ad.html?distinct_id=108a9823-5b77-55e5-5e8f-f3f1fadbd0e0
<処理の流れ>
・1.顧客がボタンを押すと決済フォームが表示される
・2.顧客がフォーム内容を入力する
・3.Stripeサーバがフォーム入力情報を受け取る
・4.Stripeサーバが、顧客のブラウザへトークン(tok_xxxxxxx)を返す
・5.顧客のブラウザが、トークン(tok_xxxxxxx)を販売者側のサーバへ送信
上記処理内容が正しかった場合、「トークン生成タイミング」はどこに該当するでしょうか?
理解できたと思っていたのですが、新たな疑問が生じたため、再度質問させてください。
Checkout利用時の「トークン生成タイミング」と「トークン生成場所」について
トークン生成場所はどこですか?
・顧客のブラウザ?
・Stripeサーバ?
最初に、checkout.jsを取得して、クライアントで実行することにより、フォームタグ内が下記のような結果に置き換わると思うのですが、
・この段階では、(まだカード情報を入力していないので)トークン生成していない、という理解で合っているでしょうか?
・distinct_idは何を意味していますか?
https://checkout.stripe.com/m/v3/index-3f0dc197837628f45156bf4f7ed0f6ad.html?distinct_id=108a9823-5b77-55e5-5e8f-f3f1fadbd0e0
<処理の流れ>
・1.顧客がボタンを押すと決済フォームが表示される
・2.顧客がフォーム内容を入力する
・3.Stripeサーバがフォーム入力情報を受け取る
・4.Stripeサーバが、顧客のブラウザへトークン(tok_xxxxxxx)を返す
・5.顧客のブラウザが、トークン(tok_xxxxxxx)を販売者側のサーバへ送信
上記処理内容が正しかった場合、「トークン生成タイミング」はどこに該当するでしょうか?