Stripeパート - [kintone+Stripe+LINE]をノーコードで組み合わせて無人店舗を実現！

## はじめに
本資料は下記イベントの説明用資料です。

https://linedevelopercommunity.connpass.com/event/305413/

事前にMakeを利用してLINEのチャットbotを用意するパートを完了した状態から開始します。そのため、この記事に直接アクセスされた方や、資料内で紹介されている前提条件がわからないという方は、まず初めに以下の資料をお読みください。

https://zenn.dev/tmitsuoka0423/articles/kintone-stripe-line-handson-20240117

## このパートで取り組むこと

このパートでは、Makeのシナリオがおおよそ次のような状態から始まります。

![スクリーンショット 2024-01-11 11.02.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/1757b6bd-a74a-9a61-8385-79a784d2b29e.png)

Stripe編では、この[ここを Stripe Checkout URLに変更する]テキストを、実際のURLに変更する作業を行います。このパートを完了すると、次のようにLINE上のチャット入力に対する返信に、注文用URLが含まれるようになります。

![IMG_2649.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/2adff1a5-7f6d-784f-b718-0fda846b8bd3.jpeg)

また、後半のステップでは、kintoneに連携するための注文情報を取得するシナリオも新しく作成します。

![スクリーンショット 2024-01-11 15.56.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/59ed933f-8323-d6a9-4c60-340416ea44ae.png)

## Stripeアカウントを準備する

さっそく始めていきましょう。このパートでは、[前のパート](https://zenn.dev/tmitsuoka0423/articles/kintone-stripe-line-handson-20240117)で利用したLINEとMakeに加えて、Stripeアカウントが必要です。すでにアカウントをお持ちの方は、次のURLからログインしましょう。

https://dashboard.stripe.com/login

:::note
**Stripeアカウントは、メールアドレスがあれば無料で作れる**
もしStripeアカウントがない方も安心してください。有効なメールアドレスがあれば、無料ですぐにStripeアカウントが作成できます。

![スクリーンショット 2024-01-12 15.04.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/697c09c7-5591-1e36-a2c4-f1f3c97f9070.png)
https://dashboard.stripe.com/register から、アカウントを作成して、ログインしましょう。
:::

### ワークショップ用のストアアカウント

Stripeでは、ストアやサービス毎に複数のアカウントを作成・管理することが可能です。アカウントを分けることで、APIの動作確認やワークショップ中の事故で顧客データや請求内容に予期せぬ変更が入るリスクなどを回避できます。

ページ左上のアイコンをクリックし、[新規アカウント]をクリックしましょう。

![3fcedd882d34-20220419.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/04b5385f-c184-4673-098e-176e725ddbb5.png)

アカウントでは、ビジネス・企業名とどの国で業務を行なっているかの２点を設定します。

今回はデモアプリですので、以下のように設定しましょう。

- アカウント名: demo.furni.com
- 業務をおこなっている国: Japan

![スクリーンショット 2024-01-12 15.08.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/4f413a2e-6039-b130-7934-86e3a6315a7c.png)

設定が完了すると、アカウントのTOPページに移動します。

![スクリーンショット 2024-01-12 15.08.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/835a7f88-2cf4-ceb3-d53c-e31ac41ab42c.png)

:::note

**Tips: 本番環境での利用について**

アカウント作成すると、テスト環境が用意されます。

テスト環境では、「Stripeが用意するテストカード番号以外の入力を拒否する」「請求書などのメールを送信できるアドレスが制限されている」などの制限があります。

実際に顧客の決済を受け付けるには、なるべく早い段階で本番環境の利用申請を行うようにしましょう。

![b0d0b1a434d3-20220419.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/c67d0e64-c27e-d6ef-980f-d2c184078344.png)

なお、「サービス内容の詳細などの情報が不十分だと判断された場合」や「[禁止/制限付き業種](https://stripe.com/ja-it/legal/restricted-businesses)に該当すると判断された場合」、アカウントが停止される可能性があります。禁止・制限付き業種に該当しないかの事前に確認や、できるだけ詳細なビジネス情報の入力をお勧めします。
:::

### LINEから注文する商品と料金を作成する

今回のワークショップで販売する商品の情報は、Stripe上で管理します。ここからはStripe上に販売する商品を登録する方法を紹介します。
まず左側のメニューから[商品カタログ]をクリックします。
![スクリーンショット 2024-01-12 15.18.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/89f13dd8-d00b-d37f-c030-964b3fbf606d.png)

:::note warn
もしメニューにない場合は、[その他+]をクリックしましょう。サブメニューが表示されますので、その中にある[商品カタログ]をクリックします。
![スクリーンショット 2024-01-12 15.19.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/3ffca024-8447-c721-709c-304b42089308.png)
:::

商品カタログページの右側にある[商品を追加]ボタンをクリックしましょう。
![スクリーンショット 2024-01-12 15.21.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/b2e1e58e-efa5-a8fe-c8a4-24eb2ab49f3b.png)

商品の登録画面が開きます。

![スクリーンショット 2024-01-12 15.23.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/ef0f8a91-b8f5-d9e9-5f3a-c7f14db5ac81.png)

デモ用の商品として、以下のテキストと画像を入力・アップロードしましょう。

|商品名|画像（フリー素材DLページ）|説明文|
|:--|:--|:--|
|焙煎済みコーヒー豆|https://www.pakutaso.com/20170200038post-10294.html|厳選したコーヒー豆をお届けします。|

![スクリーンショット 2024-01-12 15.26.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/a5c8f88c-fce3-5205-55fc-8623ba5fd685.png)

続いて料金を登録します。

|種類|金額|通貨|
|:--|:--|:--|
|1回限り|2000|JPY|

![スクリーンショット 2024-01-12 15.27.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/527d5848-ee8b-dc8e-b678-c22c831d7278.png)

[商品を追加]ボタンをクリックして保存しましょう。保存に成功すれば、[商品カタログ]の一覧に商品が追加されます。

![スクリーンショット 2024-01-12 15.27.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/db196342-6f04-c691-d0cc-ddf7748c5e5d.png)

これで商品の登録が完了しました。

### Stripe Payment Linksで支払いURLを作成する

続いて決済ページのURLを簡単に作ってみましょう。商品カタログの一覧ページで、作成した商品をクリックします。

![スクリーンショット 2024-01-12 15.27.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/db196342-6f04-c691-d0cc-ddf7748c5e5d.png)

商品情報と、設定された料金プランが表示されます。料金が１つ登録されていますので、[支払いリンクを作成]ボタンをクリックしましょう。

![スクリーンショット 2024-01-12 15.29.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/7a415c49-d6a3-0443-18ee-c5a66a6ecbc8.png)

決済ページの設定画面とプレビューが表示されました。

![スクリーンショット 2024-01-12 15.30.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/a6eb0e34-fcd7-a44b-4f11-72b5b166b5ad.png)

少し設定をカスタマイズしてみましょう。[オプション]にある[支払い件数を制限]をオンにします。すると数量が指定できるフィールドが表示されますので、`2`や`5`などの数字を入れましょう。この設定を有効にすることで、支払いリンクから決済できる回数を制限することができます。

![スクリーンショット 2024-01-12 15.31.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/a5ff914d-e39c-932a-6544-8ab91f41991d.png)

ページ右上の[リンクを作成]ボタンをクリックすると、支払いリンクが作成されます。

![スクリーンショット 2024-01-12 15.33.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/428caaf2-4c92-d240-8893-b679f6747120.png)

支払いリンクのURLが生成されました。[コピー]ボタンをクリックして、URLをコピーしましょう。

![スクリーンショット 2024-01-12 15.34.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/90ec172b-f855-735e-22e4-e3b76a756cd0.png)

### Makeで、LINEの返信メッセージに支払いURLを設定する


決済用のURLを取得しましたので、Makeに設定した返信メッセージを変更しましょう。Makeで設定した返信メッセージのテキストのうち、`[ここを Stripe Checkout URLに変更する]`を先ほど取得したURLに変更します。

![スクリーンショット 2024-01-12 15.37.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/c3334a89-5792-ef03-2790-4726918fea52.png)

これで最小ステップでのLINEとStripeを使ったチャットコマースを実現できます。

## MakeのシナリオにStripeを組み込む

LINEとStripeの連携を最小構成で済ませる方法を紹介しました。しかしこの方法では、注文する商品や数量・組み合わせごとにURLを発行する必要があります。そこでMakeを使って「リダイレクト型の決済フォーム」を動的に作る方法も体験しましょう。

### StripeのAPIキーを取得する

MakeでStripeを利用するには、APIキーが必要です。Stripeダッシュボード上部にあるメニューで、[開発者]をクリックしましょう。開発者ページのタブに[APIキー]がありますので、これを開きます。

![スクリーンショット 2024-01-15 13.06.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/16047e72-5df5-7ee3-58d6-30156ce0b0cc.png)

APIキーは３種類あります。今回は[シークレットキー]を利用しますので、[テストキーを表示]ボタンをクリックしましょう。

![スクリーンショット 2024-01-15 13.07.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/c39461a3-800c-9e5f-caa5-ffbcbf41be63.png)

`sk_test`から始まるAPIキーが表示されました。このAPIキーをコピーしましょう。

![スクリーンショット 2024-01-15 13.08.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/2ffd0269-180a-9eef-d6ad-b627e70a1a12.png)

:::note
**制限付きAPIキーで、より安全にStripeアカウントを運用する**
シークレットキーは顧客情報や売上データなどにもアクセスできる、非常に強力な権限を持つAPIキーです。そのため、本番環境で利用する場合は、[制限付きキー(Restricted API Key | RAK)]の利用をお勧めします。


![スクリーンショット 2024-01-15 13.10.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/ec5836f3-cc6f-02e9-3211-a4bace75bdf2.png)

今回のワークショップで使用する場合、次の権限を有効化しましょう。

|リソースタイプ|権限|Connectの権限|
|:--|:--|:--|
|Balance|読み取り|なし|
|Events|読み取り|なし|
|Checkout Sessions|書き込み|なし|
|Webhook Endpoints|書き込み||
|（それ以外のリソース）|なし|なし|
:::

### Stripeモジュールを追加する

動的に支払いURLを作成する場合、MakeのStripeモジュールを利用します。画面下部の[+]ボタンをクリックして、新しいモジュール追加画面を開きましょう。

![スクリーンショット 2024-01-11 11.10.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/0eb2aac3-84fd-3cb6-5c3e-181d60885d69.png)

検索窓に[Stripe]と入力して、[Enterキー]をクリックすると、Stripeモジュールが表示されます。これをクリックしましょう。

![スクリーンショット 2024-01-11 11.10.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/3fac2b24-bfb6-fc3c-7464-47d2bd58b30c.png)

Stripeモジュールをクリックすると、追加するアクションが選べる画面が開きます。[Make an API Call]と検索窓に入力し、[Make an API Call]アクションをクリックしましょう。

![スクリーンショット 2024-01-11 11.12.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/37d4859a-a491-417f-b59e-8b80b9fb6141.png)

新しいアクションが追加されました。右上に赤いバッジが表示されていますので、クリックしてみましょう。

![スクリーンショット 2024-01-11 11.12.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/df89c807-30a1-8b70-1100-a2f2a189220b.png)

モジュールに関する注意メッセージが表示されました。[The module is not connected to the data flow]は、このモジュールがシナリオ内のデータフローに接続されていないことを伝えています。これについては、後のステップで接続を行いますので、一旦後回しにしましょう。

もう１つのメッセージ[The module is not set up]は、MakeのStripeモジュールがStripeアカウントと接続できていないことを伝えています。接続を行うため、このテキストをクリックしましょう。

![スクリーンショット 2024-01-11 11.16.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/db848cee-d0d3-b99f-7f46-eb41b7290bab.png)

**The module is not set up.**　をクリックすると、次の画面に切り替わります。[Create a connection]をクリックして、接続のためのウィザードを開きましょう。

![スクリーンショット 2024-01-11 11.16.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/540235c3-c753-b724-2e7b-5a09ff7d3304.png)

接続画面では、[Connectionの名前]と、[API Key]の2つを入力します。　**[Connectionの名前]**　はMakeでStripeモジュールを利用する際に、どのStripeアカウントと接続するかを判断するために利用します。ワークショップでテストするだけであれば、デフォルト値の[My Stripe connection]のままで進めましょう。

![スクリーンショット 2024-01-11 11.16.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/5dcff677-c06e-fa89-55a4-3e90e8ac8a9b.png)

前のステップ取得したStripeのシークレットキーを **API Key**にペーストしましょう。この状態で[Save]をクリックすると、接続設定が完了します。

![スクリーンショット 2024-01-11 11.18.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/9cb6bfb9-2722-31d2-34bd-8f1e7c26b3f7.png)

[Connection]に作成した名前のConnectionが表示されました。

![スクリーンショット 2024-01-11 11.20.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/c7a8fe51-a5c3-1413-6143-3398556a2abb.png)

ここからはStripe Checkoutを利用した注文URLを作成する設定を行いましょう。

### Stripe Checkoutで動的に注文URLを作成する

[Make an API Call]では、APIリクエスト内容をそれぞれ設定する必要があります。次の表とスクリーンショットを参考に、情報を入力しましょう。

#### 各項目に入力する情報

- Connection: [作成したもの]
- URL: `v1/checkout/sessions`
- Method: `POST`
- Headers: デフォルトのまま
- Query String: 下の表を参考に設定する
- Body: 空欄

#### [Query String]に登録する情報

|Key|Value|Valueに入力する値の作り方|
|:--|:--|:--|
|`mode`|`payment`|`payment`をそのまま入力 or コピーアンドペーストしてください|
|`line_items[0][quantity]`|`1`|注文数量です。整数を入力してください。|
|`line_items[0][price]`|`<price_から始まる、作成した商品の料金ID>`|[`price`の作り方を見る](#料金idの取得方法)|
|`success_url`|`https://line.me/R/oaMessage/%40{@を除いたLINE ID}`|[`success_url`の作り方を見る](#success_url作成方法)|
|`metadata[line_user_id]`|![スクリーンショット 2024-01-15 11.19.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/a80f5341-eec4-fddd-59f5-8db774646015.png)|[`line_user_id`の作り方を見る](#lineのユーザーidを設定する方法)|


![スクリーンショット 2024-01-11 11.52.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/53eb1389-8bf4-ddb7-0aeb-dd67209549dc.png)

#### `success_url`作成方法

`success_url`は、決済が完了した後に遷移するページのURLを指定します。今回はLINEのチャットに戻る必要がありますので、LINEのURLを作成しましょう。


[LINE Official Account Manager](https://manager.line.biz/)を開き、下の画像を参考にbotのLINE IDを取得しましょう。

![スクリーンショット 2024-01-11 11.37.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/3d49c83c-622a-a08d-e5c9-7782af8876ef.png)

取得したLINE IDを使って、次のようなURLを作ります。

`https://line.me/R/oaMessage/%40{@を除いたLINE ID}`

このURLを、`success_url`の値に設定しましょう。

参考: https://developers.line.biz/ja/docs/line-login/using-line-url-scheme/#opening-chat-screen

#### LINEのユーザーIDを設定する方法

kintoneに情報を送信するため、metadataにLINEのユーザーIDを設定します。**Value**には、**Watch Events**のデータから、`Events[].Source.User ID`を選択しましょう。

![スクリーンショット 2024-01-15 11.18.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/4d10f2cb-8a1f-af4b-d9ab-855e425f8932.png)


#### 料金IDの取得方法

料金IDは、Stripeダッシュボードの[商品カタログ]から取得できます。商品カタログの一覧ページで、作成した商品をクリックします。

![スクリーンショット 2024-01-12 15.27.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/db196342-6f04-c691-d0cc-ddf7748c5e5d.png)

商品詳細ページの中段に、[料金]セクションが表示されています。ここに表示されている料金の[**API ID**]をコピーして入力しましょう。

![スクリーンショット 2024-01-12 15.29.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/7a415c49-d6a3-0443-18ee-c5a66a6ecbc8.png)

`price_`から始まるIDの右側に、コピーボタンがありますので、これを使うと簡単にコピーできます。

![スクリーンショット 2024-01-15 11.04.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/6d24f7df-1b30-5594-dc02-1e5af297f03d.png)


### MakeのシナリオにStripeを連結する

用意したモジュールをシナリオに組み込んでいきましょう。組み込みは「既存のステップのunlink」と「新しいlinkの設定」の２手順で行います。

#### 作成済みのステップをunlinkする

まずは作成済みのステップをunlinkしましょう。[Watch Events]と[Send a Reply Message]を結ぶ線をクリックし、[Unlink]をクリックしましょう。これで一度リンクしたステップのつながりを解除できます。

![スクリーンショット 2024-01-11 11.46.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/9a0be813-ae73-a0dc-fd5b-63068ff3246c.png)

解除に成功すると、次の画像のように3つのステップが孤立した状態の画面ができあがります。

![スクリーンショット 2024-01-11 11.47.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/06053d99-ae28-4e87-2a81-0a1105c79e77.png)

##### 新しいリンクを設定する

新しいシナリオでは、次のようなステップで処理を行います。

- LINEのWebhookイベントを受け付ける
- Stripe Checkout Sessionを作成する
- Checkout SessionのURLを含む返信文をLINEに返す

そのため、[LINE - Watch Events]→[Stripe Make an API Call]→[Send a Reply Message]の順番でリンクを作りましょう。
 
![スクリーンショット 2024-01-11 11.46.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/abf02089-bfe3-0618-1311-4056caba0f7f.png)


##### APIレスポンスを記録するため、シナリオを一度呼び出す

シナリオの流れをつなぐことができました。しかしLINEの返信文にCheckout SessionのURLを含めるには、[Make an API Call]のレスポンスをMakeに認識させる必要があります。これはデフォルトではどのようなAPIレスポンスがくるか、Make側が判断できないモジュールであるため、`Body`の中身をUIで選択できないためです。

![スクリーンショット 2024-01-12 16.23.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/84430931-bc76-cce1-6d09-c69472526f07.png)

APIレスポンスを認識させるには、一度シナリオを実行させましょう。画面左下の[Run once]をクリックしましょう。

![スクリーンショット 2024-01-11 11.53.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/26930dc9-dcd3-04ab-76c0-c33d7b1e1f36.png)

:::note
すでにシナリオを一度実行させたことがある場合、このようなメッセージが表示されます。

![スクリーンショット 2024-01-11 11.53.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/f36bebe0-7414-18e2-14dc-bf2fd64e6092.png)

この場合、[Wait for new data]をクリックしましょう。
:::

[Run once]が[Stop]に変わりました。これでLINEへのメッセージ送信からシナリオを実行する準備ができました。

![スクリーンショット 2024-01-11 11.53.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/d343fb06-7356-3833-8755-b31ffd38827c.png)

LINEのチャット画面から、メッセージを送信しましょう。（入力するテキストは、どんな内容でも構いません）。シナリオにエラーが発生していなければ、前のステップで設定したPayment Linksの支払いURLが含まれたメッセージが表示されるはずです。

![4eQw6CE.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/e8e743e0-b6c4-9753-37bb-0a615f85abbf.png)

これでMakeが[Make an API Call]モジュールでどんなレスポンスを受け取るかを認識するようになりました。

![スクリーンショット 2024-01-12 16.22.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/a36019c9-579e-f5c2-efbb-eee9c618b123.png)

##### LINEの返信文に、Stripe　Checkoutの注文リンクを追加する

[Send a Reply Message]モジュールの返信文を入力している部分に、[Make an API Call]モジュールの結果を入れましょう。`Body`の中に`url`がありますので、次の画像のように設定しましょう。この際Payment Linksで作成した支払いURLは削除します。

![スクリーンショット 2024-01-11 11.49.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/493ccf37-b8a2-d28f-87e4-ca69fb894fdb.png)

これで注文URLを作成するシナリオが完成しました。

### 注文してみる

実際に動作させてみましょう。先ほどのステップと同様、[Run once]をクリックしてシナリオを起動させます。

![スクリーンショット 2024-01-11 11.53.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/26930dc9-dcd3-04ab-76c0-c33d7b1e1f36.png)

LINEからテキストを送信すると、`checkout.stripe.com`から始まる注文URLが自動返信されるようになります。

![IMG_2649.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/2adff1a5-7f6d-784f-b718-0fda846b8bd3.jpeg)

リンクにアクセスすると、Stripeが提供する注文フォームが表示されます。

![スクリーンショット 2024-01-17 18.25.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/2beaa3b5-1b02-6c1a-0ef4-eb351d42ffd7.png)

テストモードでは、ダミーのカード情報を入力することで、決済処理を試すことができます。下のスクリーンショットを参考にカード情報などを入力して、[支払う]ボタンをクリックしましょう。

![スクリーンショット 2024-01-17 18.24.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/cdf127fa-bf98-c11a-63e2-75e1146d3301.png)

:::note
**様々な支払いシナリオをテストする**
Stripeでは、決済に関する様々なシナリオをテストする仕組みが用意されています。


- 海外からの支払いをテストする
- 盗難などで停止されたカード番号が入力されたケースをテストする
- チャージバック（不審請求）が発生したケースをテストする

以下のドキュメントから、テストケースごとのカード番号を確認できます。ぜひこちらもお試しください。

https://stripe.com/docs/testing

:::

## Stripeの注文情報をkintoneに連携するためのシナリオをMakeで作成する

ここまではLINEでのチャットから商品の注文や、サブスクリプションを申し込みするフローの作成をMakeで行いました。ここからは注文された商品などの情報をkintoneなどに送信するための準備を行いましょう。

### MakeからStripe Webhookを接続する

Makeでシナリオ一覧ページに移動しましょう。[Create a new scenario]ボタンをクリックします。

![スクリーンショット 2024-01-11 15.36.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/76dbde99-1052-f3f1-2f0f-81eeb128b143.png)

新しいシナリオ作成画面が開きましたので、[+]ボタンをクリックします。

![スクリーンショット 2024-01-11 15.36.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/1dff6b7d-2d4c-5a5a-940c-a036b4e49ba4.png)

トリガーになるサービスや種類を選べます。検索フォームに[Stripe]と入力し、[Stripe]をクリックしましょう。

![スクリーンショット 2024-01-11 15.37.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/37cf3ecd-ea90-f438-3b05-f53ee085a43b.png)

今回は[Watch Events]を選択します。これでStripe上で発生したイベントをトリガーに、Makeのシナリオを実行できます。

![スクリーンショット 2024-01-11 15.37.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/7ec3e6c2-8330-9a79-0481-2f5e4af576c1.png)

[Watch Events]を使ってStripeのイベントをトリガーにする場合、[Create a webhook]ボタンが表示されます。これをクリックしましょう。

![スクリーンショット 2024-01-11 15.37.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/c500cd1c-ac06-aa47-3e04-309502479e32.png)

[Webhook name]、[Connection]そして[Group]を設定します。[Connection]は、先ほど作成したものを選択しましょう。
![スクリーンショット 2024-01-11 15.37.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/0b7cb3fb-6d67-a394-b725-597d1bb4351e.png)

Groupは、StripeのWebhookイベントを指定します。今回は次の２つを選択しましょう。

![スクリーンショット 2024-01-11 15.37.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/fe68927c-09b5-51a8-1e02-03b02d2f5727.png)

[Save]をクリックすると、Webhookの設定が完了します。

![スクリーンショット 2024-01-11 15.39.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/b23f778d-edd9-fb3c-e3f2-07bb91bdbd47.png)

:::note
Stripeダッシュボードの[開発者 > Webhook]を見ると、`make.com`ドメインのURLが設定されていることがわかります。

![スクリーンショット 2024-01-11 15.39.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/26863964-4d06-f0c0-641f-366afc57118c.png)
:::




### Stripe Shellで、ブラウザからWebhookイベントを呼び出してみる

[Make an API call]と同じく、こちらもMake側でどんなデータが利用できるかを認識させる必要があります。今回はStripeダッシュボードから簡単にWebhookイベントをトリガーする方法を紹介します。

まずはMakeのシナリオ画面で、[Run Once]をクリックしましょう。

![スクリーンショット 2024-01-15 13.45.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/b20ed63a-c00a-d24f-0422-013b80039925.png)


続いてStripeダッシュボードを開きましょう。画面右下に[`>_`]のようなアイコンがありますので、クリックします。

![スクリーンショット 2024-01-11 15.51.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/ed0646f2-a797-818f-6137-4e6ea9a209a2.png)

するとページ下部にコマンド入力画面が開きます。これがブラウザ上でStripe CLIを実行できる[Stripe Shell](https://stripe.com/docs/stripe-shell/overview?locale=ja-JP)という機能です。

![スクリーンショット 2024-01-11 15.51.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/0d6ad005-3d5c-aa74-ac2b-840d01ecf8e6.png)

ここで`stripe trigger checkout.session.completed`と入力してみましょう。`stripe trigger`はStripe上の任意のWebhookイベントをテストできるCLIコマンドで、今回はStripe Checkoutの決済が完了した際にトリガーされる`checkout.session.completed`をテストしています。

![スクリーンショット 2024-01-11 15.52.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/03712bd6-32ca-ec31-07d2-b0835852462a.png)

コマンドを入力したら、[Enterキー]を押して実行しましょう。次のようなテキストが表示されて、[トリガーが成功しました]と表示されれば成功です。

![スクリーンショット 2024-01-11 15.52.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/2f9dd0aa-de37-519b-2433-7a6e1b6d0a77.png)

Make側に戻って、先ほど作成した[Watch Events]をクリックしてみましょう。`OUTPUT`の中に`checkout.session.completed`で送信されるイベントが表示されるようになりました。

![スクリーンショット 2024-01-11 15.52.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/586c5016-f806-25ca-62c1-3d6bf43f70e7.png)

このデータを元にして、kintoneに連携する準備を行いましょう。

:::note warn
**`checkout.session.completed`に加えて`checkout.session.async_payment_succeeded`も利用する理由**
コンビニ決済や銀行振込などの「注文後に支払い操作をユーザーが行う決済手段」もStripe Checkoutはサポートします。その場合、`checkout.session.completed`イベントがトリガーされた時点ではまだ支払いが完了していません。
コンビニ決済や銀行振込などの非同期型決済手段での入金・支払い確認を受け付けるには、`checkout.session.completed`だけでなく`checkout.session.async_payment_succeeded`もトリガーに利用しましょう。

この場合、[Watch Events]の次のステップに[Router]モジュールを配置して、`payment_status==='paid'`以外のイベントを処理しないように設定します。

![スクリーンショット 2024-01-15 13.51.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/2f426028-803a-0a06-3971-b2dad53205dd.png)


:::

### 注文内容を取得する

`checkout.session.completed`と`checkout.session.async_payment_succeeded`イベントには、注文した商品の数量などの情報が含まれていません。そのため、[Make an API Call]モジュールを利用して「カートの中身」を取得しましょう。

![スクリーンショット 2024-01-11 15.53.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/ea8c578b-cc81-c59d-69e0-58ebd440d8de.png)

[Watch Event]（もしくは[Router]）のリンク先に新しくモジュールを作成しましょう。こちらも[Make an API Call]を選択します。

![スクリーンショット 2024-01-11 15.53.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/3651f5cb-433a-3c1e-d936-bc27f18f5e1a.png)

今回入力する内容は、次の通りです。

- Connection: [作成したもの]
- URL: v1/checkout/sessions/`[1. Object: id]`/line_items
- Method: GET
- Headers: デフォルトのまま
- Query String: デフォルトのまま
- Body: 空欄


URL内のIDについては、[Watch Events]のOutputからIDを取得しましょう。

![スクリーンショット 2024-01-11 15.50.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/20edfcb5-f860-dd9e-f360-90d61ad9907a.png)

こちらのレスポンス内容もMakeに認識させましょう。もう一度Stripe Shellから`stripe trigger checkout.session.completed`を実行しましょう。

![スクリーンショット 2024-01-11 15.52.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/2f9dd0aa-de37-519b-2433-7a6e1b6d0a77.png)

これで注文商品の中身が[Make an API Call]モジュールのOutputから取得できるようになりました。

![スクリーンショット 2024-01-11 15.56.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/59ed933f-8323-d6a9-4c60-340416ea44ae.png)


## まとめ

今回のパートでは、次の内容についてMakeでノーコードに実装する方法を紹介しました。

- ノーコードで決済・サブスクリプション申し込みフォームのURLを作成する方法
- LINEチャットからオンラインでの決済・サブスクリプション申し込みフローの実装方法
- 決済・申込をトリガーに注文・申込情報詳細を取得する方法

最後のパートでは、これらの情報をkintone上で分析する方法などを体験します。

## 参考

https://community.make.com/t/how-to-create-a-stripe-product-on-make-com-using-their-api-docs/18958

https://stripe.com/docs/payment-links/share

https://zenn.dev/tmitsuoka0423/articles/line-stripe-checkout-memo

https://stripe.com/docs/checkout/quickstart


## Additional Tips

ワークショップ本編では紹介しませんが、注文フローのカスタマイズ方法をいくつか紹介します。
ぜひ「試してみた」「さらにこんなこともやってみた！」などを、この記事のコメントや #JP_Stripes ハッシュタグでお知らせください！


### 注文時に数量を変更できるようにする

Checkout Sessionを作成する際の[Make an API Call]モジュールで、[Query String]に以下の値を追加してみましょう。

|Key|Value|
|:--|:--|
|`line_items[0][adjustable_quantity][enabled]`|`true`|

この値を設定することで、注文フォーム内で購入する商品の数を変更できるように設定できます。

![スクリーンショット 2024-01-17 16.43.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/9a8d45a8-f5e4-892b-2eaa-98f7f77841db.png)

### 3Dセキュア認証を必須にする

高額商品を取り扱う場合などでは、３Dセキュア認証を利用して不正利用のリスクを軽減することができます。Stripeではダッシュボードの[不正利用]からノーコードで設定ができます。

![スクリーンショット 2024-01-17 16.46.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/713fac58-e35d-7cd5-8321-6a703f407f12.png)

[ルール]タブに移動すると、３Dセキュア認証の実施・成功・カゴ落ち率などが確認できます。

![スクリーンショット 2024-01-17 16.46.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/21de16c9-b193-9681-79ca-feb8d1c07427.png)

すこしスクロールすると、[認証ルール]セクションがあります。ここで３Dセキュア認証を実施する閾値を変更できます。

![スクリーンショット 2024-01-17 16.46.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/cb272f71-cd04-6286-c559-f2501448eeea.png)

必須化する場合、[3D セキュアに対応しているカードの場合]の右側にある[...]をクリックし、[有効化]をクリックしましょう。

![スクリーンショット 2024-01-17 16.46.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/eff48d88-61f8-bae6-3088-6c4dcf365373.png)

変更の影響を、過去の取引データを元にプレビューできます。ここで[ルールを有効にする]をクリックすると、設定完了です。

![スクリーンショット 2024-01-17 16.47.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/5fbbeb5c-487f-541a-3240-6bff5a50f517.png)

項目のテキストが薄くなっていなければ、有効化に成功しています。

![スクリーンショット 2024-01-17 16.47.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/750b7c5f-e36d-ed1c-7ffa-3d7657a80bae.png)

設定後、注文処理を行おうとすると、３Dセキュアの認証画面が開きます。なお、３Dセキュア2 (EMV 3DS)では、リスクベースの評価が行われるため、テストに利用したカード番号によっては、モーダルが一時的に開くだけで、追加のユーザー操作なしに認証が完了することがあります。

![スクリーンショット 2024-01-17 16.48.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/26f7e8f6-c519-4c3a-94e5-f60b161fab3b.png)

https://stripe.com/ja-us/guides/3d-secure-2