StripeとZapierを使ってノーコードでデジタルコンテンツを販売する


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/842cefac-ce6c-4a6c-ae4c-54cbfee10664.png)
## やりたいこと
Stripeの決済後に、顧客にPDFなどの電子ファイルやオンラインセミナーへの招待URLをメール送付する、というユースケースを想定して機能を作ってみます。

今回は [Zapier](https://zapier.com/) というツールを使って購入後のメール配信を自動化する方法を紹介します。
ZapierはあらゆるWebサービスを連携してタスクを自動化できるツールです。コーディング不要なので、非エンジニアの方でも比較的簡単に使えると思います。無料プランもあるのでぜひ試してみてください。

## 事前準備
- 販売するコンテンツ（PDF／ウェビナーのリンクなど）
→ ファイルの場合はGoogle Driveなどに保存して共有リンクを配布します
- Stripeアカウント
→ [禁止業種](https://stripe.com/jp/legal/restricted-businesses)に該当しないか確認してください
- Zapierアカウント


## YouTube解説
手順を動画で解説しました。記事と併せてご参照下さい。寝起きでテンション低いです

https://youtu.be/1mKRCwdnN2A

## Stripe／環境を変更する
最初に [Stripeのダッシュボード](https://dashboard.stripe.com/) 右上の環境切替のスイッチを押して、**テスト環境に変更**します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/67992d2c-8e1e-f303-2ce2-d2239529df5c.png)



## Stripeテスト／商品を登録する
Stripeのテスト環境で 商品→商品を追加 を押します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/7c9324e3-e40e-5f41-95ce-2f5562e7c295.png)

商品のタイトル、サムネイル、価格を登録します。<b>価格のタイプは「一括」を選択</b>
最後に「保存」を押して商品を作成してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/9075edb7-a58d-dda1-cf97-550590e9a2b9.png)

## Stripeテスト／支払いリンクを発行する
先ほど作成した商品の画面で「支払いリンクを作成」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/7ff176d5-02d0-6b63-c6de-ed24e90df8bd.png)

決済画面のプレビューが表示されます。「次へ」を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/d0f721d5-c822-27d8-fb77-642decd64a6f.png)

連結アカウントに... のチェックボックスを外します。「リンクを作成」を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/b73c0619-f3bf-dca5-4547-20885913bb37.png)

テスト用の支払いリンクが発行されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/81b8b39a-3308-9746-0312-4afe75d6934c.png)

## Stripeテスト／決済してみる
発行したリンクにアクセスして、テスト決済してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/f44f0a72-d5e0-57cb-7e16-4d0b1b52d0c6.png)

テスト環境ではStripeのテストカードを使って決済することができます。

カード番号 `4242-4242-4242-4242` 、カード有効期限、CVCは適当に入れて「支払う」を押すと、決済できると思います。

テストに使えるカード番号は他にもあります → [Testing | Stripe のドキュメント](https://stripe.com/docs/testing#cards)

## Stripeテスト／APIキーをメモする
テスト環境のAPIシークレットキーをメモしておきます。

開発者→APIキー→テストキーを表示 をクリックして表示された `sk_test_･･･` から始まる文字をメモ帳などにコピペしてください。次の工程で使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/38068f41-d693-e2fd-7ba0-80146e1a7210.png)

## Zapier／フローを作成する
続いて、Zapier側の作業をしていきます。[Zapierのダッシュボード](https://zapier.com/app/dashboard) を開いて、Stripe決済をきっかけにメール配信するフローを作成します。

#### Stripeアカウント(テスト)と連携する
My Apps→Add Connection
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/8eb8beb0-e470-d962-b655-7f3637104df8.png)
Stripeを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/2c16e82a-adaa-fb8a-3b9b-7ec159a30a2b.png)
先の手順で発行したテストキーを入力してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/8440c07a-a99b-3414-12ac-9813f6cccee3.png)

「Test connection」を押して接続テストします。_Test Successful!_ と表示されれば成功です。
「Edit connection name」から接続名を変更できますので、テスト環境と分かるような名前に変えておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/5540e8eb-01ab-745f-8f93-ccbdf4621a4c.png)

#### フローを作成する（トリガー）
[Zapierのダッシュボード](https://zapier.com/app/dashboard) 左上にある「Create Zap」を押して新しいフローを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/ef16501a-1f44-b6aa-be53-2e2f8f117064.png)
トリガーするアプリケーションは Stripe を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/c4612788-eabf-3f7d-b08c-b33d9b425234.png)
トリガーイベントは _New Event_ を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/de499938-d055-b4ae-640b-3a53325b2cb0.png)

アカウントは先ほどのものを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/94eca652-f5ee-da4f-de87-30db7b1cede5.png)
イベントタイプは _Checkout Session Completed_ を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/df13089d-e032-408f-0778-42219c6b6a3f.png)
Test triggerで先ほどテスト決済した内容が入ってくると思います。イベントがない場合は、再度テスト決済をしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/ad746da6-1fd8-a18d-6547-fcba02352afc.png)

#### フローを作成する（アクション）
続いて、イベント発火後のアクションを設定します。_Email by Zapier_ を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/5660daa9-ee2b-2f28-3854-4eb7d734c682.png)
アクションは _Send Outbound Email_（メール送信する）を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/eb69c549-cf2a-7e3d-92a8-0d9021e218e2.png)
決済後に送信するメールの内容です。宛先には顧客のメールアドレスを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/ecf69423-ab4f-728f-c423-eb686169f8e2.png)
「Test & Continue」 を押すとテストメールが送られます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/e75d24c8-5cb5-e492-53c7-a0756ffae41a.png)
最後に、「Turn on Zap」 を押してフローを有効にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/a04bdc8c-466d-d7b9-73e2-7bbbc714693c.png)

## 決済してみる
再度、支払いリンクから`4242-4242-4242-4242` のテストカードを使って決済してみましょう。メールアドレスはご自身のものを指定してください。

↓コンテンツ付きのメールが届きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/61b88622-8fd1-c976-e463-9e7c0973364c.png)


:::note
差出人はZapierのメールドメインになります。ご自身のアドレスで送信したいときはSMTPやGmailのコネクタを使ってください
→ [SMTP by Zapier Integrations](https://zapier.com/apps/smtp/integrations)
→ [Gmail Integrations](https://zapier.com/apps/gmail/integrations)
:::

## Stripe／本番環境に移行する
動きが確認出来たら、実際に支払いを受け付けられるようにStripeの本番環境に設定を移行します。
※ テスト環境のままだと、本物のクレジットカードを使った決済ができません。

#### 本番環境に商品をコピーする
作成した商品の詳細ページにある「本番環境にコピー」ボタンを押して、本番環境に同じ商品を複製します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/05c17d75-4464-dad6-54f8-fdc4dbb22aba.png)

#### ダッシュボードの環境を本番環境に切り替える
ダッシュボード右上の環境切替のスイッチを押して、本番環境に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/f6179251-28f9-3940-2569-c0ad16254ef3.png)

#### 本番環境用の支払いリンクを作成する
テスト環境と同様に支払いリンクを発行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/4870d314-1321-075d-fb46-d089ea745e1b.png)
「プロモーションコードを許可」を有効にするとクーポンを受け付けることができます。「次へ」を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/7387b744-2df5-bf86-9965-cbef3a8691e0.png)
「リンクを作成」を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/cf2c7d5b-1bf8-9a95-0df7-c40e6aac2cd3.png)
リンクが発行されました！ **お客様にはこのリンクを共有してください**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/81b8b39a-3308-9746-0312-4afe75d6934c.png)
#### 本番用のAPIキーを発行する
開発者→APIキー→シークレットキーを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/19b3e498-7a14-d06e-9e9e-10c41f3fd633.png)
適当な名前を付けてAPIキーを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/963f4c0c-32a4-c415-e6fe-26c2b3cd0a4c.png)
`sk_live_･･･` から始まるAPIキーをメモしてください。後の手順で使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/426d9b01-64ad-c14e-18b7-a945d71fd7a2.png)

::: note alert
本番用のAPIキーの取り扱いには注意してください。絶対に他人に共有しないでください。
:::

#### Zapierに本番環境用の接続を作成する
[Zapierのダッシュボード](https://zapier.com/app/connections/stripe) から、Stripeの接続を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/f4016552-df14-48e6-e746-e9d68b973465.png)
新しい接続を作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/55ea860c-f465-b8ec-515a-2f96f26b64ac.png)
前のステップで発行した本番環境のAPIキーを入れて、「Yes, Continue」を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/293a1d1b-5ff1-dcc7-25fb-db6c6c8c9bb9.png)
作成したら本番用と分かるように名前を変更しておきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/7dc97ec5-85bc-ab9a-8837-d9e7c988605e.png)


#### フローで使用するアカウントを変更する
フローで使用するStripeアカウントを本番用に変更します。
Zaps→[･･･]→View
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/f72ffb5f-8c76-463c-1c93-8ab103595bfd.png)
Choose account を開いて、**TestからLiveに変更**します。他は変更せずに 「Continue」します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/444d7e41-4aca-b998-96b9-4ea3114ac71d.png)
テストのところはSkipします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/3dbed7f9-4da6-a5de-96a5-014d9f8a93b5.png)
変更したら一覧に戻り、トグルをオンにしてフローを有効化しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/f3f755fa-f76e-84c4-d248-a872f6ab16b1.png)
以上で環境の切り替えは完了です。
支払いリンクをお客様に送って、どんどん買ってもらいましょう👍

## 法律面でのチェック項目
個人で商品・サービスをネットで販売する際には、以下の記載が必要になります。
- 利用規約
- プライバシーポリシー
- 特定商取引法に基づく表記

詳しくは行政のホームページなどをご参照ください。
→ [通信販売広告について｜通信販売｜特定商取引法ガイド](https://www.no-trouble.caa.go.jp/what/mailorder/advertising.html)
→ [特定商取引法に基づく詳細と要件 : Stripe: ヘルプ & サポート](https://support.stripe.com/questions/details-and-requirements-under-the-specified-commercial-transactions-act)

## Stripe／事業者の情報を正しく登録する
Stripeの設定画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/7074b568-2f8b-baed-0417-4c8ed5a97c8d.png)

##### ① 設定→アカウントの詳細
公開ビジネス情報欄に自社の基本情報、利用規約、プライバシーポリシーへのURLを追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/a722bc60-3b68-9a3d-3013-e1b4e778dbf0.png)

##### ② 設定→CheckoutとPayment Links
登録したビジネス情報が決済ページに表示されるように、設定を変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/d4858bf1-8f89-71b3-885e-bc6cfda44ae8.png)

## まとめ
手順は以上です。お疲れさまでした。

Zapierのアカウントは無料プランだと制限がありますので、実際に運用する際はご注意下さい。

Stripeのイベント処理は他にも[Webhookを使った方法](https://stripe.com/docs/webhooks)があり、Stripeとしてはこちらを推奨しているようです。<b>事業が軌道に乗って、複雑な処理が必要になった場合は、コードを書いてWebhookを扱う方法を検討されることをおすすめします。</b>

ご質問などありましたらご連絡ください
→ [Twitter](https://twitter.com/kaonaga9)