StripeとTwilioでSMS認証機能搭載の高速チェックアウトシステムを実装する方法
読む所要時間: 10 分
![Build fast checkout with SMS verification using Stripe and Twilio Build fast checkout with SMS verification using Stripe and Twilio](/content/dam/twilio-com/global/en/blog/legacy/2020/build-fast-checkout-with-sms-verification-using-stripe-and-twilio-jp/JYs5huFqhbCBxNoi_BjF4gtDJJWqiUWayeIs0bIT0uZoXKNtlkACB4GdRKL2igDr7xZcpkqvhPe6AD.png)
StripeとTwilioが協力し、サンプルアプリケーションを構築しました。このサンプルアプリケーションでは、顧客から支払い情報を安全に収集して保存する機能やTwilio Verifyを用いてリピート顧客に対して既に登録されているカード情報を用いた請求を行う前に認証コードを送信する機能が実装されています。
デモとリソース
YouTubeチャンネル「Stripe Developers」では、サンプルアプリケーションの設定方法を説明したこのチュートリアルの動画版を視聴できます。
![YouTube - Checkout Remember Me with Twilio Verify](/content/dam/twilio-com/global/en/blog/legacy/2020/build-fast-checkout-with-sms-verification-using-stripe-and-twilio-jp/1im95_hv0RYpqXVisFklSWRpBcCOTUsYUfufkary4PsrSfho-ybuRuvEDilRe9S9CR-D9z2M6ZpUUs.jpeg)
ローカルマシンでのサンプル実行
サンプルアプリケーションには、JavaScript(Node.js)形式とPython(Flask)形式の2つのバックエンド実装が用意されています。今回のチュートリアルでは、Node.jsバックエンドの設定方法について説明します。Python Flaskサーバーの実行手順についてはこちらを参照してください。
Stripe CLIを使用したサンプルの作成
Stripe CLIを使用し、Stripeサンプルを非常に簡単に設定できます。こちらの手順に従い、CLIをインストールします。
次に、Stripeアカウントにログインします。アカウントはこちらから作成できます。ログイン後、以下を実行します。https://www.youtube.com/watch?v=gjh5gOalYcM
手順に従い、自身のアカウントでCLIを認証します。
以下のコマンドを実行し、サンプルを作成し、バックエンドの選択画面でnode
を選択します。
![Stripe CLI](/content/dam/twilio-com/global/en/blog/legacy/2020/build-fast-checkout-with-sms-verification-using-stripe-and-twilio-jp/THUkP1yswDDzDqRa50-WJksfMyfdnx4me7iC2bBl_P-6u8DEuZR60e70PUYw0iAu11Uc4I6Q-zsjsF.png)
次に、新たに作成したサンプルフォルダに移動し、依存関係をインストールします。
Stripe CLIがテストAPIキーを含んだ.env
ファイルを自動的に設定します。この.env
ファイルを開き、以下のTwilio識別子を追加します。
変数 | 説明 |
---|---|
ACCOUNT_SID | Twilioコンソール内を検索 |
AUTH_TOKEN | Twilioコンソール内を検索 |
VERIFY_SERVICE_SID | Verifyサービスを作成し、Verify SIDを取得 |
Twilioアカウントはこちらのリンクから作成できます。(このリンクを使用するとアカウントのアップグレード時に10米国ドル相当分のクレジットが追加で付与されます。)
Verifyサービスについては新しいサービスをTwilioコンソールで作成します。
![Verify Service](/content/dam/twilio-com/global/en/blog/legacy/2020/build-fast-checkout-with-sms-verification-using-stripe-and-twilio-jp/iWQyugf6pchhOJgxHzIlkkgdvkphEVB4nWof1D32OqGhWHR16Y2rLtEL7wFCScrBhzAnlGO_OG1nao.png)
Verify SIDは[General Settings]で確認できます。
![Verify Service SID](/content/dam/twilio-com/global/en/blog/legacy/2020/build-fast-checkout-with-sms-verification-using-stripe-and-twilio-jp/g-k0NN3vzhVabLaXfvr25KTfNq5yHRbUGcvRIGXPGVw4hJr2Dn4LH3YXRUMoa9TK89RiQ3DdvWIHuZ.png)
必要な環境変数がすべて設定できたため、次にローカルサーバーを起動します。
これで、http://localhost:4242/でアプリケーションが起動しました。 🎉
ソースコードの確認
国際電話番号入力フィールドの設定
国選択機能を提供し、クライアント側で電話番号の形式の設定と検証を行うために、オープンソースライブラリintl-tel-inputを使用します。
クライアント側で入力を検証することでサーバーへのリクエスト件数を最小限に抑え、ユーザーにフィードバックをスピーディに提供できます。その結果、ユーザーエクスペリエンスを向上できます。
サーバー側で電話番号を検索
クライアント側での検証は非常に重要ですが、それだけでは十分とは言えません。そのため、Lookup APIを実行しサーバー上でも電話番号を確認します。
顧客の支払情報の収集と保存
顧客の支払情報を安全に収集するために、セットアップモードでStripe Checkoutを使用します。
生成されるチェックアウトセッションIDを使用し、Stripeがホストする支払いフォームに顧客をリダイレクトします。
入力されたクレジットカード情報をStripe Checkoutで検証し、有効な場合は顧客オブジェクトにそれをアタッチします。その後、顧客をアプリケーションにリダイレクトし、保存された顧客のクレジットカード情報を利用します。
認証コードの送信
保存されている支払い情報に対して請求を行うには、顧客が認証されており、顧客のクレジットカードへの請求が許可されていることを確認する必要があります。こちらの例では、Twilio Verifyを使用し顧客の電話番号に認証コードを送信することで本人認証を行っています。
次のような手間のかかる作業はすべてTwilio Verifyで自動的に処理されます。
- 世界的に認知されているショートコードまたは英数字の送信者IDからの送信
- 配信到達性を上げるために世界中のキャリアが許可リストに登録しているメッセージテンプレートの使用
- ランダムな認証コードの生成とその有効期限の管理
このスニペットは認証コードを生成し、顧客へと送信します。
認証コードの確認
次に、顧客がアプリケーションに入力したコードを取得し、Twilio側で確認します。
顧客への請求
認証が完了したため、保存されているクレジットカード情報に対して請求をお子います。
Stripe Webhookイベントのリッスン
Stripe CLIでは、ローカルで実行しているサーバーにWebhookイベントを転送してWebhookをテストできます。例として別のターミナルウィンドウで以下のコマンドを実行します。
CLIが実行されているターミナルにイベントが表示され、ローカルサーバーの/webhook
のルートにWebhookイベントが転送されます。
ご不明な点は、
今回のチュートリアルが皆さんのお役に立てば幸いです ❤️ フィードバックやご質問がある場合は、Twitterで投稿者までご連絡ください。