学べること前半の記事に引き続きStripeを利用した決済処理の解説を行います。後半では月額サービスに向いているサブスク決済（毎月同額の決済）の実装方法に関してご説明します。１）事前準備：Stripeアカウントの作成、プラグインの設定（※すでに前半の記事でアカウント作成とプラグインの設定をしている方はこの章は飛ばしてください）Stripeアカウントとプラグインの設定はサブスク決済を行うのにも必要になります。前半の記事で説明していますのでそちらをご参照ください。２）事前準備：商品の作成商品の登録方法単発購入とは異なりサブスク決済を行う場合には事前にStripe側で商品を登録する必要があります。Stripeのテスト環境にてサブスク商品を作成します。商品カタログを選択し、商品を追加ボタンをクリックします。以下のような形で必要事項を記載します。継続を選択し、請求期間は毎月を選択します。（毎月以外にも毎日〜毎年まで様々な期間が設定可能です）商品を追加をクリックします。下記のように商品が作成されれば事前準備は完了です！３）実装：サブスク決済画面の作成最小限の構成にするので購入ボタンのみにして実装します。複数の月額プランがある場合でも同様にプランごとの実装をすれば問題なく対応できます。ワークフローの作成ボタンをクリックして、Edit workflowを選択しワークフローを編集をします。アクションは「Subscribe the user to a plan」を選択します。その際に「Stripe plan name」という項目に先程作成した商品のイベントログを見て「price_」で始まるIDがあるのでそれと同じIDを設定します。これによりサブスク対象がどの商品なのか設定することができます。そのほかの項目はデフォルトのままで大丈夫です。後はプレビューしてボタンをクリックすれば、Stripeの決済画面に遷移するようになります。何かしらのユーザーでログインしていないとエラーになるため、ログイン後の状態で実施してください。４）本番公開時の注意点本番用商品の作成本番でサブスク決済する際にはテスト環境と同様に本番にもサブスク商品を作成しないといけません。同様の方法で商品の作成を実施するか、テストのものをそのまま利用できるようでしたら、本番環境にコピーを選んでそのままコピーすることも可能です。本番用商品の設定実は大変不便なのですが、本番用の商品をワークフローの「Subscribe the user to a plan」に設定するにはdevelopmentのキーを本番のものに変更する必要があります。設定後はテスト環境で間違って本番決済しないようにご注意ください。おわりに：決済完了と今回の成果物のイメージ今回実装したサブスク決済の処理について動画でどのようになるのか確認してみましょう。問題なく実装できていれば下記のような挙動になります。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FiO_CXHNMA7g%3Fsi%3DgUKrzqSMviIBjVtE%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E