3Dセキュアの仕様を理解し、StripeのPaymentElementを使って、3Dセキュアを扱う方法を学びます。 全体のアーキテクチャーは以下のようになっています。
| ストーリー0 | ストーリー1 | ストーリー2 | ストーリー3 |
|---|---|---|---|
 |
 |
 |
 |
| ユーザが新規アカウントにサインアップします。 基本情報を入力し、アカウントを作成します。 |
サインアップして、アカウントに対して、カードを保存します。 ここでは商品やサービスの購入は行われず、カードの有効性を確認し、カードの保存を行います。 |
保存したカードで、商品を購入します。 セキュアなログインを前提に、カードの入力を省略し、保存済みのカードで決済を行います。 |
加盟店起因で、管理画面から、保存されたカードで決済を行います。 例えば、定期購入や、サブスクリプションのような決済です。 |
| カード番号 | ユーザーストーリー1 | ユーザーストーリー2 | ユーザーストーリー3 |
|---|---|---|---|
| 4000 0027 6000 3184 | 3Dセキュア起動 | 3Dセキュア起動 | 3Dセキュア起動 |
| 4000 0000 0000 3055 | (？？) | (？？) | (？？) |
| 4000 0000 0000 3055 (カート情報入れた時) | (？？) | (？？) | (？？) |
-
コードをダウンロードして、サインアップページを開く
- コードをダウンロードします。github.com/yu-stripe/3ds-workshop です。download方法
- 全てのタスクは、
public/以下の編集で行えます -
public/signup.htmlをブラウザで開いてください
-
まずはこのサービスにサインアップします。
- メールアドレスは
[email protected]など、テスト用のアドレスを入力してください。 - サインアップのパスワードがコードに埋め込まれているので、それを探してサインアップしてください
- サインアップすると、
Customerオブジェクトが生成されます
- メールアドレスは
-
カード登録ページで、ユーザーストーリー1を実行してください。
-
save-card.htmlにて、カード保存を行って、3Dセキュアの起動を確認してください -
4000 0000 0000 3055をテストカードとして使い、有効期限、セキュリティコードは任意で入力してください - サンプルコードに3Dセキュア関連のハンドリングが実装されていますか？
- Areqフィールド（Authentication Request）を送信するコードが含まれていますか？
-
-
商品購入ページで、ユーザーストーリー2を実行してください。
- 商品購入(checkout.html) にて、保存したカードで、購入を行なってください.
- 商品購入ページの、コードの確認を行ってください。
- サンプルコードに3Dセキュア関連のハンドリングが実装されているか確認します。
- 義務化によると、3Dセキュアの起動はここでは行われません、仕様通りの実装になっていますか？
-
管理者ページにて、ユーザーストーリー3を実行してください。
-
/public/admin.htmlにて、保存したカードで、加盟店起因で、購入を行なってください - 義務化によると、3Dセキュアの起動はここでは行われません、仕様通りの実装になっていますか？
- Stripeにおける、
off_sessionとはなんでしょうか？Stripeドキュメントを調べてください
-
- サンプルコードにカート情報を追加すると、ユーザーストーリー2において、3Dセキュアの起動は変わったか？
-
public/checkout.htmlを開き、カード保存時にすでに3Dセキュアを実行しているもので決済をします -
public/checkout.jsを編集します - リスクが高い決済でかつ、metadataでカート情報を送り、再販性の高い商品である、
key:value=product_sku:expensive_skuを送信して、3Dセキュアの挙動を確認してください。 - API
POST /${backend}/create-intent-and-customer-sessionは、以下の形で、リクエストをとります-
{ customer_id: {{customerID}}, metadata: { product_sku: 'expensive_sku' } }
-
-
HTML/CSSとJavascriptで書いてあります。フレームワークを使っていないので、冗長的かもしれませんが、前提の知識を最小限に抑えています。
PaymentIntent:
PaymentIntentは、Stripeでの支払いを管理するためのオブジェクトです。このオブジェクトは、支払いの状態を遷移させ、実際の支払い操作（購入、リファンドなど）を行うために必要な情報を含んでいます。特に3Dセキュアが必要な場合、PaymentIntentを使用して、ユーザーが承認を行うためのフローを管理します。
参照: Payment Intent Documentation
SetupIntent:
SetupIntentは、将来の支払いのためにカード情報を保存するためのオブジェクトです。主に定期的な支払い（サブスクリプションなど）や、後で使用する目的でカード情報を取得する際に用いられます。SetupIntentを利用して、3Dセキュアの要求に応じてユーザーの認証を得ることも可能です。
参照: Setup Intent Documentation
Metadata:
Metadataは、Stripeのオブジェクトに追加情報を付加するためのキーとバリューのペアです。例えば、顧客のIDや注文番号などのカスタムデータをPaymentIntentやCustomerオブジェクトに保存することができます。これにより、データを整理し、業務管理や分析に役立てることができます。
Radar:
Radarは、Stripeが提供する詐欺検出ツールです。このツールは、取引が安全であるかどうかを判断し、不正行為を防ぐためのリアルタイムの分析を行います。Radarは、機械学習を用いて、新たな詐欺のパターンを特定し、ビジネスオーナーに対して安全な決済体験を提供します。