クーポンを使用した定期購読の実装方法

ストライプデベロッパーオフィスアワーの新エディション

• こんにちは、私はアリです。今回はストライプデベロッパーオフィスアワーの別のエディションです。

• 現在、我々は前例のない時代を経験しており、ビジネスは急速に変化する状況に迅速に対応しなければなりません。

• ストライプでは、私たちの優先事項は、お客様へのサービスを継続できるようにし、支払いインフラストラクチャが安定した状態を維持できるようにすることです。

• 特に継続的なビジネスモデルを持つビジネスは、お客様に今後の数ヶ月にわたる安心感と利益を提供したいと望んでいます。

• そこで今日は、ストライプの定期購読を利用するビジネスが、サインアップフローにクーポンを実装する方法について説明します。

• まず、ストライプエレメントを使用し、定期購読を作成するWeb統合を構築します。その後、統合にクーポンのサポートを追加し、お客様がサインアップ時にクーポンコードを入力し、定期購読に割引を受けることができるようにします。

• ストライプデベロッパーオフィスアワーに再びようこそ。私はアリです。さあ始めましょう。

• まず、Boilerplateコードを設定するためにtraxion lyを使用します。私の手元にはすでにストライプCLIがセットアップされているので、stripe samples createを実行します。

• サーバーサイドの言語を尋ねられますので、Rubyを選択します。

• 新しいフォルダが作成されました。このフォルダには、クライアントサイドの実装用のサブフォルダとサーバーの実装用のサブフォルダが含まれています。

• このディレクトリをVisual Studio Codeで開きましょう。

• ここにはHTMLとJavaScriptファイルが含まれています。そして、サーバーサイドにはserver.rbファイルがあります。このファイルには、stripe gem、Sinatra gem、そして.envファイルを取り込むコードが含まれています。

• バンドルインストールを行い、gemをインストールします。次に、index.htmlファイルを開き、サーバーを実行し、ローカルウェブサーバーでページを表示しました。

• 次のステップでは、index.rbファイルにstripeエレメントを追加し、カードエレメントのインスタンスを作成し、サブスクライブボタンを設定します。

• クライアントサイドからサーバーサイドにトークン化された支払い方法を送信し、それを処理してストライプ顧客にアタッチし、ストライプ定期購読を作成します。

• カスタムCSSファイルを作成し、それをHTMLファイルにリンクし、UI要素を識別できるようにします。

• エラーラベルを追加して、UIでエラーを表示できるようにします。

ストライプデベロッパーオフィスアワーの新エディション

Stripe JS3のスクリプトを追加する

• この統合の開発中にデバッグしやすいように、要素を追加していきます。

• まず、カード要素用のdiv、購読ボタン、矢印ラベルがあります。

• ここにStripe JS3を参照するためのスクリプトを追加しましょう。

• stripe js3を参照し、それがインスタンスされる方法です。

• 次に、このファイル内にJavaScriptのスクリプトタグを追加します。

• ここでは、初期化し、要素を作成し、カード要素をマウントするためのコメントを残します。

• create more stripeを呼び出し、stripeオブジェクトを参照し、stripeの公開キーを渡します。

• 要素を作成したいので、stripe.elementsという関数を呼び出します。

• 最後に、このstripeのインスタンスからカード要素を作成したいので、その部分を行います。

• これで、カード要素のインスタンスができました。

• 最後に、マウントする必要があるので、cardElement.mountとし、マウントする要素のIDを指定します。

• ページをリフレッシュすると、Stripe要素が表示され、カード番号を入力できるようになります。

• さらに、購読ボタンもありますが、現時点では機能はありません。

• 次に、購読ボタンとエラーラベルにボタンハンドラを追加しましょう。

• 購読ボタンとエラーラベルへの参照を作成します。

• 購読ボタンにイベントリスナを追加し、クリック時に関数を実行するように設定します。

• 購読ボタンがクリックされたときに、カード要素に入力されたカードをトークン化したいとします。

• Stripe.jsを呼び出し、要素を作成し、支払い方法を作成します。

• 結果にエラーがある場合は、結果のエラーメッセージを表示します。

• 成功した場合は、支払い方法IDをログ出力します。

• 支払い方法がトークン化され、Stripeで支払い方法として認識されます。

• このIDをサーバーサイドのエンドポイントに投稿する必要があります。

• サーバーサイドのエンドポイントで顧客に関連付け、その顧客で購読を作成します。

Stripe JS3のスクリプトを追加する

Rubyでの定期支払いの処理

• ストライプのAPIを使用してRubyで定期支払いの処理を行います。

• 最初に、パラメータ名を定義し、支払い方法IDを取得します。

• 次に、エラーハンドリングのためのtry-catchブロックを作成します。

• 顧客を作成するため、stripe.customer.createメソッドを使用します。

• 次に、作成した顧客に支払い方法をアタッチし、説明を追加します。

• 顧客が作成されたら、そのIDを出力します。

• 顧客が作成されたら、サブスクリプションを作成します。

• サブスクリプションを作成するには、顧客のID、デフォルト支払い方法、およびサブスクリプションアイテムを指定する必要があります。

• 作成したサブスクリプションのIDを出力し、ステータス200を返します。

• エラーハンドリングも追加し、エラーメッセージをログに記録して返します。

• 成功した場合はサブスクリプションオブジェクトをJSON形式で返し、失敗した場合はエラーメッセージを返します。

• 最後に、成功した場合はサブスクリプションIDと最新の請求額を表示するページにリダイレクトします。

Rubyでの定期支払いの処理

サブスクリプションの取得と割引クーポンの適用

• まず、Stripeからのサブスクリプションを取得するか、このサブスクリプションのアイデアを渡します。ここで解析されたサブスクリプションIDについて、私たちはいくつかの高度な機能を使用します。これを展開と呼ぶ機能です。

• 通常、サブスクリプションオブジェクトを取得すると、最新の請求書というフィールドがあります。最新の請求書には、そのサブスクリプションで最新の請求書の請求書IDが含まれています。そのため別のAPIコールを行って取得することができますが、代わりに行うことは、サブスクリプション取得コールの中で展開することです。つまり、請求書IDのフィールドではなく、請求書オブジェクト全体を取得します。

• 展開は文字列の配列を取りますので、latest invoice を渡します。これにより、サブスクリプション全体と請求書オブジェクトを得ることができます。その後、サブスクリプションIDと請求書ID（実際には請求額）をログに出力しましょう。

• 最後に、サブスクリプションページをレンダリングします。これは、顧客に対してサブスクリプションIDと最新の請求書の請求額を表示するだけのページです。

• 今度は、ユーザーがクーポンコードを入力できるようにしましょう。インプットフィールドと適用ボタンを設置します。StripeのAPIを使用して、クーポンを作成し、適用する方法について見ていきましょう。

• ダッシュボードからクーポンを作成し、名前には通常、チェックアウトフローで顧客に入力してもらう名前を設定します。今回はstay safeという名前で50%割引クーポンを複数の月の間有効なものとして作成します。

• クーポン作成後、クーポン名とIDを関連づけるマップを作成します。これにより、フロントページにクーポンコードの入力欄と適用ボタンを追加します。ボタンはサーバーサイドでクーポンを検証し、その結果をユーザーに通知する役割を担います。

• そして、クーポンボタンにイベントリスナーを追加し、サーバーへのポストリクエストを処理するためのエンドポイントを作成します。手順を追ってサーバーサイドの処理を行います。

サブスクリプションの取得と割引クーポンの適用

サブスクリプションにクーポンを適用する

• データが有効かどうかをチェックしましょう

• クーポンが適用された場合、ラベルに「クーポンが適用されました」と表示します

• クーポンを変数coupon_input_valueとして参照します

• flight couponが初期化されていない場合は、初期化します（flight coupon = nil）

• データが無効な場合は、無効なクーポンですと表示します

• 適用されたクーポンをパラメータとして渡す際に、そのクーポンが存在する場合のみ適用し、存在しない場合は空の文字列を渡します

• 後続の手順として、クーポンコードをサブスクリプション作成リクエストと一緒に送信する必要があります

• サーバーコードに新しいステップを追加して、クーポンをサブスクリプションに適用します

• サブスクリプションのステータスページに「coupon」を追加し、割引オブジェクトの下にあるクーポンの名前を表示します

• クーポンを適用してサブスクリプションを作成し、割引が適用されていることを確認します

• クーポンを削除し、カード番号のみを指定してサブスクリプションを作成し、クーポンの適用状況を確認します

サブスクリプションにクーポンを適用する

Conclusion:

この記事で紹介した手順に従って、ストライプの定期購読を利用するビジネスが、サインアップフローにクーポンを実装することができます。定期購読を活用して、顧客に割引を提供し、ビジネスを成長させましょう。

Q & A