Stripe Billingを利用して、コンビニ決済での定期購入サブスクリプションを管理する(JS・ノーコード編)

定期課金においても、クレジットカード以外の決済方法をサポートすることで、より多くの顧客にリーチできます。

コンビニ決済を有効化すると、顧客は定期的な料金の支払いをコンビニで行えます。これにより、これまでリーチすることが困難だった「**クレジットカードを持たない顧客**」にリーチすることが可能です。

また、顧客も公共交通機関での移動中や、信頼性の低いネットワークを利用している状況など、**「クレジットカードを取り出して入力する」操作がやりにくい場面**でも、安心して注文ができるようになります。さらに、Stripeでサブスクリプションを集約管理することで、契約期間中にコンビニ決済と**カードやその他の決済方法への切り替えも簡単**に可能です。

この記事では、Billingを利用している場合に、コンビニ決済を受け付けるための方法と、実運用に備えて注意しておきたいポイントの例を紹介します。

# Dashboardからの操作で、ノーコードに開始する

定期課金を最も簡単に始める方法は、Dashboardから操作することです。
実際にテスト環境でサブスクリプションを作成してみましょう。

## コンビニ支払いを受け付けるサブスクリプションを作成しよう

まずDashboardのメニューにある[作成]ボタンをクリックし、[サブスクリプション]を選択しましょう。＊[c]キーと[s]キーを順番に押すことでも移動できます。

![MLNjT2Ew.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/a25df79b-4c8f-249b-8ba0-119fce71fa60.png)


サブスクリプション作成ページでは、まず[顧客]セクションで、サブスクリプションを提供する顧客を選びます。もし、テスト用の顧客データが存在しない場合は、[新しい顧客を追加]を選択して、先にテスト用の顧客データを作成しましょう。
この際、**顧客のメールアドレスは、[ダッシュボードのログインユーザーと同じアドレス]に設定**しましょう。ログインユーザーと同じメールアドレスであれば、Dashboardからメールをテスト送信することができます。

![qBlLpdEY.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/4f6c573c-046b-d9e0-95c9-833e5c0b5227.png)


続いて、[料金体系]セクションから、請求する料金プランを選択します。こちらも、[新しい商品を追加]から新しく商品・料金データを作成するページに移動できます。

![sSnexcl9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/c36d2f27-0041-33df-1721-d72e6ee54012.png)

次に[支払い方法]セクションで、支払い方法を設定しましょう。
まず、[手動支払い用の請求書を顧客にメールで送付する]を選択します。


![YHDIgXsw.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/0fddfcc1-5611-01ee-c75d-5772ca3f145e.png)

コンビニ決済が有効化されていれば、[支払い方法]にコンビニ決済のアイコンが表示されています。表示されていない場合や、ほかの支払い方法を非表示にしたい場合は、右横の[管理]リンクをクリックして、設定を変更しましょう。

![CCrdeZhZ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/0ee8d96a-7a3e-86c5-6dbc-d04a6f23e160.png)


最後に、ページ上部の[テストのサブスクリプションを開始]をクリックしましょう。

![vfSSz2ah.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/72dd2b65-3e94-11de-5a8d-88f02fd49d53.png)

サブスクリプション一覧に移動し、一覧に作成したサブスクリプションが表示されていれば、作成完了です。

![E-qAcmFw.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/cf261325-4b79-ef38-eb66-0895a3ca90b0.png)


## 作成したサブスクリプションの請求メール・支払いリンクを確認しよう
続いてどのようなメールが送信されるかを確認しましょう。
サブスクリプション一覧から、作成したサブスクリプションをクリックし、詳細ページに移動します。

![74syDVGA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/d2b18a10-d9da-082a-8fdb-2943bf5077da.png)


ページをスクロールし、[インボイス]を見つけたら、初回の請求の行をクリックしましょう。

![_2G2Wa1m.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/932db7d6-f9b0-79af-83ce-09489c7222fb.png)

インボイスの詳細ページから[請求書を送信]をクリックし、メールを送信しましょう。もしテスト環境でメール送信ができない場合は、**顧客のメールアドレスをDashboardにログイン中のユーザーのメールアドレスに変更**します。

![K_Z3f8Uy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/04411bfe-03e7-c513-63b3-e9656a2a8e57.png)

送信に成功すると、Stripeが顧客に送信する請求書メールが届きます。

![7u0s2YIY.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/c961b102-aad5-fb67-dc81-35f8e927e7c6.png)


ここで[この請求書を支払う]をクリックすると、請求書の決済ページに移動します。
コンビニ決済が有効化されている場合、決済方法の１つにコンビニ決済が表示されます。

![KPRkA66V.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/6bfe14c9-f2a7-8783-2738-f5fe7b51cdc3.png)


電話番号には、[組み込みをテストする]にあるテスト用の番号を入力します。たとえば、`11111111110`を入力すると、3分後にコンビニでの決済が完了したものとしてStripeが処理を行います。

なお、実際の決済では、支払い処理完了後に表示される支払いコードなどを利用して、顧客がコンビニで決済を行う必要があります。

![NoewKxSb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/acc9bac4-be73-ff29-ec42-c1776d334336.png)


「ユーザーにコンビニでの決済を案内する画面が表示されること」と「コンビニ決済独自のテスト用コードが用意されていること」の２点以外は、他の遅延型決済と同じように処理することができます。

# コードで実装する(Node.js編)

コードでの実装の場合、Stripeが提供するREST APIをSDK経由で実行します。
この記事では、Node.jsを例に実装方法を紹介しますが、APIドキュメントではその他の言語やcUrl・Stripe CLIでの実行方法も確認できます。

https://stripe.com/docs/api/subscriptions/create#create_subscription-payment_settings

基本的には、「[手動支払い用の請求書を顧客にメールで送付する]設定でサブスクリプションを作成するコード」に少し手を加える程度です。

```js
          const newSubscription = await stripe.subscriptions.create({
            customer: 'cus_xxxx',
            items: [{
              price: 'price_xxxx',
              quantity: 1
            }],
            collection_method: 'send_invoice',
            days_until_due: 30,
            payment_settings: {
                payment_method_types: ['konbini', 'card'],
            },
          })
```

`payment_method_types`の指定を省略した場合、管理画面で有効化している決済方法を顧客が選べるようになります。
こちらの場合も、Dashboard操作と同じく、メールに記載されたリンクから、コンビニ決済を選択することで支払い方法を取得することができます。

# サブスクリプションでコンビニ決済をサポートする際の注意点

## 「更新・契約と決済が同時期ではない」ケースが発生する
コンビニ決済などでは、サブスクリプションを作成・更新したタイミングではまだ決済が完了していません。

そのため、サブスクリプション作成時の処理やイベントで、サービス提供を開始するシステムの場合は、決済が完了していない状態でユーザーがサービスを利用できる状態になります。

「発行された請求書やサブスクリプションが期限切れになったタイミングでクローズする」措置を取ることも可能ですが、もし決済が完了してから利用開始させたい場合は、Webhookを利用した実装への変更を検討しましょう

## 返金が必要な場合、銀行口座を顧客に登録してもらう必要がある

クレジットカードでの決済の場合は、カード側に返金を行うことができます。しかしコンビニ決済の場合は、返金額を振り込むための銀行口座情報を顧客に入力してもらう必要があります。

![Z516t90w.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/465495f7-5339-502b-15bd-c91af6c40d4a.png)

口座情報の入力は、Stripeが顧客に送信するメールから行えますので、通常のDashboardからの返金操作を実行後、顧客の操作を待ちましょう。

# Webhookでコンビニ決済のサイクルを処理する

コンビニ決済など、顧客側で決済のためのアクションが必要なサブスクリプションでは、「決済が完了した時点から、サービスの提供を開始する」仕組みが必要になります。
そのため、Webhookのイベントを利用し、statusがactiveになったタイミングでアプリのDBを更新するなどの処理を行いましょう。

```js
      if (event.type === 'customer.subscription.updated') {
          const subscription = event.data.object;
          if (subscription.status === "active") {
            /**
             * サブスクリプションを開始することを、システムに伝える。
             **/
          }
      }
```
また、次回以降の請求についても、コンビニ決済では顧客側のアクションが必要です。
そのため、もしCRMなどで顧客のフォローを行いたい場合などでは、以下のようにイベントを受け付けましょう。

```js
      if (['invoice.payment_action_required'].includes(event.type)) {
        /**
         * コンビニでの決済など、顧客側で対応が必要な請求が発生した際の処理を実装する。
         * - UIやメールなどでユーザーに通知する
         * - CRMなどを経由して自社サポートチームにフォローを依頼する
         */
      }
```

Webhookの利用法についての詳細は、ドキュメント( https://stripe.com/docs/billing/subscriptions/webhooks )をご確認ください。


# おわりに

クレジットカード以外の決済方法を提供できるようにすることで、サービスによってはリーチできる顧客の幅が広がります。
Webhookイベントをベースとしたシステム体系にする必要はありますが、一度対応が完了できれば、今後も同様の決済方法が増えた場合のサポート工数を減らすことができます。

すでに本番環境で Stripe アカウントをご利用の場合、ダッシュボード上から審査手続きを開始することができます。
「設定」＞「支払い方法」より、「有効にする」ボタンをクリックしてください。


# [関連記事]コンビニ決済入門シリーズ

https://qiita.com/hideokamoto/items/c59c4c4ee24b98ac997b

https://qiita.com/hideokamoto/items/f0304cb005f276e35d43


# [関連記事]コンビニ決済入門シリーズ

## Checkout / Elementsへの導入方法

https://qiita.com/hideokamoto/items/c59c4c4ee24b98ac997b

## Webhookでの処理方法

https://qiita.com/hideokamoto/items/f0304cb005f276e35d43

## Connectを利用したマーケットプレイスへの導入方法

https://qiita.com/hideokamoto/items/9a4258ad5a41440274a2