StripeとTwilio Payで電話決済

:::note alert
2023年5月1日を持ちまして、株式会社KDDIウェブコミュニケーションズのTwilioリセール事業が終了したため、本記事に記載されている内容は正確ではないことを予めご了承ください。
:::

# はじめに

この記事は、[Stripe Advent Calendar 2018](https://adventar.org/calendars/3096)の12月11日分の投稿となります。
*すみません、一日遅れてしまいました・・・。*

## Twilio Payとは

[Twilio Pay](https://twilio.kddi-web.com/magazine/2921/)とは、今年10月にサンフランシスコで開催されたTwilio年次イベント「SIGNAL」で発表された、音声通話でクレジットカード決済をするための機能です。
![Twilio-Pay-Announcement.png](https://qiita-image-store.s3.amazonaws.com/0/86046/590f094b-46b1-619e-e743-7d96ef13cd00.png)

皆さんご存知のように、クレジットカード決済システムにおいては、不正利用を防止する観点から非常に厳しいセキュリティ要件があります。現在主流なものとして、「PCI DSS基準」と呼ばれる、国際ペイメントブランド5社（AMEX、Discover、JCB、Master、VISA）が共同で策定したカード情報国際統一基準があります。
今回Twilio社は、このPCI DSS基準を満たす決済システムとして、「Twilio Pay」を発表しました。
ただ、Twilio自体はカード決済システムを持っているわけではなく、実際にはStripe社の決済APIと連携して、決済自体はStripe上で行われます。
![pay-diagram-1-final.width-800.png](https://qiita-image-store.s3.amazonaws.com/0/86046/2882d778-0de1-0c04-ce45-e0597e3c11a3.png)

気になるTwilio Payの利用料ですが、決済金額には依存せず、成功した決済もしくはトークン生成1回につき、15円（税込み）となっています。

## \<Pay\>動詞

Twilio Payの機能は、TwiMLと呼ばれるTwilioに指示を与える命令セットの中に新設された\<Pay\>動詞で実現します。
以下に簡単な\<Pay\>動詞の例を上げます。このサンプルは、$99.99の決済を行うためのものです。

```xml
<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Pay chargeAmount="99.99" postalCode="false" action="https://xxxxx-xxxxx-xxxx.twil.io/pay-action"/>
</Response>
```

このTwiMLを実行すると、Twilioがユーザに対して自動音声を使って、カード情報、有効期限、セキュリティコードをヒアリングし、取得したカード情報と決済金額で、Stripe社のAPIを通じて決済を行います。決済の結果は、actionで指定したWebhook先に通知されます。Webhookでは、決済結果と併せてカード情報の代わりのStripe社が払い出した顧客トークン（顧客を識別するための情報）が戻ります。このトークンを利用することで、次回以降はカード情報を聞かずに決済をすることもできます。

\<Pay\>動詞の詳しいマニュアルは、[こちら](https://jp.twilio.com/docs/voice/twiml/pay)にあります。

## Twilio Payのセットアップ

Twilio Payを利用するためには、以下の手順でTwilio側にセットアップが必要です。なお、Stripeのアカウントは事前に作成しておく必要があります。

- Twilioの管理コンソールにログインします。
- **Programmable Voice**の中の**設定**を選択します。
- **PCI Mode**の**Enable PCI Mode**ボタンを押して、PCIモードを有効にします。

![スクリーンショット 2018-12-12 09.54.05.png](https://qiita-image-store.s3.amazonaws.com/0/86046/fc96b182-3e8d-5db2-6031-ea7d7b1c5a5e.png)

- 利用規約のダイアログが開くので、**Accept and Continue**ボタンを押します。
![スクリーンショット 2018-12-12 09.55.13.png](https://qiita-image-store.s3.amazonaws.com/0/86046/1145cb18-2215-4417-83fc-ba42dff77753.png)


- **STATUS**が「Enabled」になったことを確認して、**Save**ボタンを押して、設定を有効にします。

- 続いて、同じく**Programmable Voice**の中の**\<Pay\>Connectors**を選択します。
![スクリーンショット 2018-12-12 09.58.17.png](https://qiita-image-store.s3.amazonaws.com/0/86046/82327325-faeb-a50c-097f-8e02999583bc.png)

- Stripeのアイコンをクリックします。
![スクリーンショット 2018-12-12 09.59.16.png](https://qiita-image-store.s3.amazonaws.com/0/86046/69f10e6b-27d6-68a8-b899-1b8e9e80c0bb.png)

- Stripe Connectorの詳細が表示されるので、**インストール**ボタンを押します。
- 利用規約の同意画面が表示されるので、**I agree to Twilio, Inc's Terms of Service**にチェックを入れて、**同意してインストール**ボタンを押します。
![スクリーンショット 2018-12-12 12.50.50.png](https://qiita-image-store.s3.amazonaws.com/0/86046/b8b8c1c0-c335-596d-1172-492dcb5741bc.png)

次に、Stripeとの連携設定を行います。

-　**ユニーク名**には、「Default」と入力します。これ以外の文字列を入れることもできますが、その場合は\<Pay\>動詞で**paymentConnector**パラメータを使って設定した名前を指定する必要があります。
-　**MODE**は、「test」もしくは「live」のいずれかが選択できます。testを選ぶとStripeのテスト環境、liveを選ぶと本番環境になります。
![スクリーンショット 2018-12-12 12.52.47.png](https://qiita-image-store.s3.amazonaws.com/0/86046/4b41753f-08cf-91d0-5c80-ed1eaa9504fd.png)

- **Connect with Stripe**ボタンを押します。
![スクリーンショット 2018-12-12 12.55.44.png](https://qiita-image-store.s3.amazonaws.com/0/86046/d7e3b8a6-d5e2-4c14-1217-e99537def899.png)

- **Stripeを使用してサインイン**ボタンを押します。
![Stripe_welcome.png](https://qiita-image-store.s3.amazonaws.com/0/86046/c839fe2a-2a1a-a9a3-b7e4-2a79834a4fee.png)

- Stripeのアカウントでログインします。
- ログインが成功すると連携が完了し、Twilioの管理コンソールに戻ってきます。
- **STATUS**が**Connected in Test Mode**（もしくはLive Mode）になっていることを確認します。

以上でセットアップは完了です。

## 決済してみる

では早速決済をしてみましょう。
liveモードでセットアップした方は、実際に決済が走りますので注意してください。

- Twilioの管理コンソールから、**Runtime**を選択し、さらに**TwiML Bins**を選びます。
- **Create a new Bins**もしくは、赤いプラスアイコンを押して、新しいTwiML Binsを作成します。
- **FRIENDLY NAME**には、なにか適当な名前をいれます。
- **TWIML**の欄を以下のように書き換えます。

```xml
<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Pay chargeAmount="990" currency="jpy" postalCode="false" action="https://">
    <Prompt for="payment-card-number">
	    <Say language="ja-JP" voice="Polly.Mizuki">クレジットカード番号を入力してくださ</Say>
    </Prompt>
    <Prompt for="expiration-date">
	    <Say language="ja-JP" voice="Polly.Mizuki">有効期限を、月と年のそれぞれ2桁の数字で入力してください</Say>
    </Prompt>
    <Prompt for="security-code">
	    <Say language="ja-JP" voice="Polly.Mizuki">セキュリティコードを入力してください。セキュリティコードは、カードの裏面に記載されている3桁のコードです。</Say>
    </Prompt>
  </Pay>
</Response>
```

![スクリーンショット 2018-12-12 13.22.35.png](https://qiita-image-store.s3.amazonaws.com/0/86046/2a6a3f9c-c52a-0458-b278-6a80ce9e96ec.png)

- **Create**ボタンを押して、作成したTwiMLを保存します。

最後に電話番号にTwiMLを紐づけます。

- Twilioの管理コンソールから、**Phone Numbers**を選択します。
- すでに購入済みの050番号があれば、そちらを選びます。もしない場合は、番号を一つ購入してください。
- 購入した050番号の設定画面を開き、**通話着信時**の設定から、「TwiML」を選択、さらに右側のプルダウンから、先程作成したTwiMLを選択します。
![スクリーンショット 2018-12-12 13.26.54.png](https://qiita-image-store.s3.amazonaws.com/0/86046/2830e357-c951-1c52-aaae-c9d5aa6cfc2e.png)

- **保存**ボタンを押して、設定を保存します。

## テスト

最後に決済をテストしてみましょう。

- 今設定した電話番号に電話をかけてみます。
- 「クレジットカード番号を入力してください」とガイダンスが流れたら、「4242424242424242#」（テスト用のカード番号）を入力します。
- 「有効期限を、月と年のそれぞれ2桁の数字で入力してください」とガイダンスが流れたら、「1021#」（これ以外でも有効期限が正しければ何でもOK）と入力します。
- 「セキュリティコードを入力してください。セキュリティコードは、カードの裏面に記載されている３桁のコードです」とガイダンスが流れたら、「111#」（３桁の数字なら何でもOK）と入力します。
- ここまで進むと電話が切れますので、Stripeの管理画面にログインして990円の決済が完了していることを確認します。

![スクリーンショット 2018-12-12 13.34.24.png](https://qiita-image-store.s3.amazonaws.com/0/86046/9a3a1d6c-7689-6f32-2eb3-603573b242c6.png)