Twilio Pay を使って電話決済を体験する(初級編)

# はじめに
これは、2019/03/21(木・祝)開催 [JP_Stripes Connect 2019](https://connect2019.jpstripes.com/)のワークショップ『「電話でペイ！」(Twilio Pay)を試してみよう！』で使用する資料です。

- Twilio \<Pay> を使って電話決済を体験する(初級編) ←こちら
- [Twilio \<Pay> を使って電話決済を体験する(中級編)](https://qiita.com/takeshifurusato/private/af96ecc7ce69dec8f42c)
- [Twilio \<Pay> を使って電話決済を体験する(上級編)](https://qiita.com/takeshifurusato/private/a3c4b0e2fdfba63186dd)

「Twilio \<Pay> を使って電話決済を体験する(初級編)」では、電話でクレジットカード決済を行うための必要最小限の構成を作成します。

# 注意事項
- Twilioアカウントは、以下の課金が発生します。
 - 1回の受話で1円/分の料金が発生します。
 - 1電話番号毎に毎月108円課金されます。
 - 1決済毎に15円の料金が発生します。※テストモードで利用する場合は発生しません。
- Stripeアカウントは、今回、テストモードで利用するため課金は発生しません。本物のクレジットカード決済を行いたい場合は、本番環境利用の申請をする必要があります。。

# 得られるもの
- シンプルな電話決済「電話でペイ(Twilio \<Pay>)」を体験できる

# ざっくり構成
![スクリーンショット 2019-03-14 15.44.22.png](https://qiita-image-store.s3.amazonaws.com/0/110436/b20edafe-fa4c-5502-77be-c23ece00c65b.png)


1. 着信：電話をTwilioで受ける。
2. TwiML呼出：Twilioにて応答する内容(TwilML)を呼出。
3. TwiML Binsという機能で、TwiMLを生成、応答。
4. TwiML応答：TwiMLBinsから応答されたTwiMLに記載された内容に基づき、Twilio\<Pay>を呼び出し電話で発話、ガイダンスに従い電話よりカード番号をプッシュ。\<Pay>Connectorがstripeと連携しchargeを実施。

# 事前準備
本ワークショップでは、以下のアカウントが必要です。

- Twilioアカウント
- Stripeアカウント

### Twilioアカウントが必要です。
Twilio \<Pay>を利用するために、Twilioのプラットフォームを使います。
アカウントをお持ちでない方は、以下より新規にアカウントを作成してください。
**トライアルアカウントの状態で問題ありません**
https://jp.twilio.com/docs/usage/tutorials/how-to-use-your-free-trial-account

### Stripeのアカウントが必要です。
以下よりアカウントを事前に作成してください。
テストモードを利用します。本番環境利用の申請は不要です。
https://dashboard.stripe.com/register

# ワークショップ
以下の手順になります。

1. Twilioの準備
- Twilio\<Pay>のセットアップ
- Twilio\<Pay>の決済応答を作成
- 電話でペイをテスト

## Twilioの準備
### Twilioの管理コンソールにログイン
URL: https://jp.twilio.com/console

### Twilioで電話番号を取得する
Twilioの管理コンソールのメニューより**Phone Numbers**を選択してください。
※メニューは画面左の<img width="33" alt="スクリーンショット 2019-02-28 16.53.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/110436/ca3dc084-d40c-8736-a34f-38744ac5eeee.png">をクリックすると表示されます。
<img width="616" alt="スクリーンショット 2019-02-28 16.52.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/110436/a63af6a5-dc86-302e-088d-ad3f960fb934.png">
＊画面の表示が異なる場合、Twilioアカウントを作って初めてログインした方は、[こちら](https://qiita.com/motchi0214/items/53cee45f5a6c0f169a29)を参考にしてください。

### Twilioで決済用の電話番号を取得する
左の**電話番号**メニューから**番号を購入**をクリックし、検索ボタンをクリックします。
<img width="1196" alt="スクリーンショット 2019-02-28 17.05.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/110436/5495053b-e1ea-7db3-9d65-cddb4d1fe982.png">
好きな電話番号を選び**購入**をクリックします。
<img width="1680" alt="スクリーンショット 2019-03-14 18.28.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/110436/5101f128-d4f1-f95b-ac3a-cae75485bb75.png">

**この番号を購入する。**をクリックします。
![スクリーンショット 2019-03-06 10.57.22.png](https://qiita-image-store.s3.amazonaws.com/0/110436/89f96184-53b1-f755-0523-54e149923ed2.png)
購入できました。**番号を設定する**をクリックします。
<img width="617" alt="スクリーンショット 2019-03-06 10.58.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/110436/12fe27fd-cc2f-88d9-2266-81881bbc40db.png">


## Twilio\<Pay>のセットアップ
Twilioアカウントで決済を行うための設定をします。

### PCI Modeの有効化
クレジットカード決済では、クレジットカードデータを安全に取り扱う事を目的として策定された、クレジットカード業界の国際セキュリティ基準「PCI DSS基準」というものがあります。2018年6月1日に施行された改正割賦販売法により、カード情報の適切な管理がカード情報を取り扱う事業者に求めらるようになりました。
Twilioでは、「PCI DSS基準」に準拠しており認定を受けています。PCI Modeの有効化することで、Twilio利用者がPCIに準拠している・していないにかかわらず、決済をすることができます(いわゆるクレジットカード情報の非保持化に対応しています)

Twilioの管理コンソールから**Programmable Voice** → **設定**へ移動します。
https://jp.twilio.com/console/voice/settings
<img width="775" alt="スクリーンショット 2019-02-28 17.14.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/110436/6bce0c93-ead7-db33-ef44-cf581af6b8d6.png">
画面下の**Authenticate to make changes**をクリックします。パスワードの入力を聞かれたら、入力してください。
**PCI Mode**から**Enable PCI Mode**をクリックしてPCI Modeを有効化します。
<img width="1219" alt="スクリーンショット 2019-02-28 17.30.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/110436/7638e828-f5f5-4ab0-a3db-5447524158cd.png">
利用規約に関するダイアログが表示されますので、お読みいただき**Accept and Save**をクリック
<img width="626" alt="スクリーンショット 2019-02-28 17.31.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/110436/30406c5c-e495-060b-e45a-0271f9c38dd8.png">
STATUSが"Enabled"になったことを確認します。
![スクリーンショット 2019-03-01 10.14.56.png](https://qiita-image-store.s3.amazonaws.com/0/110436/97c7d63b-55b2-770f-601d-8804e064ae27.png)

### \<Pay> Connectorsで、Stripeを有効にする
左側のメニューから**Programmable Voice** → **\<Pay> Connectors**へ移動し、stripeのアイコンをクリックします。
![スクリーンショット 2019-03-01 10.32.09.png](https://qiita-image-store.s3.amazonaws.com/0/110436/1576a4f4-ed29-9f66-1f2a-c525b66844c1.png)
以下の画面にて**インストール**をクリックします。
<img width="948" alt="スクリーンショット 2019-03-14 18.31.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/110436/3670b0f1-74c8-cccd-c4e0-a8e6f8e9f367.png">

利用規約・課金内容が表示されますので**同意してインストール**をクリックします。
![スクリーンショット 2019-03-01 10.42.04.png](https://qiita-image-store.s3.amazonaws.com/0/110436/9bae05c9-083a-3f23-f6a3-d80a08b45523.png)
以下の画面にて**インストール済み**となればOKです。
![スクリーンショット 2019-03-01 10.43.21.png](https://qiita-image-store.s3.amazonaws.com/0/110436/710fb794-761b-4c6f-c407-53722cb0bb76.png)

### stripe連携設定をする
ユニーク名、MODEをそれぞれ以下のように設定し、**connect with Stripe**をクリックします。

- こちらで入力した**ユニーク名**は後で使いますので、メモしておいてください。
- **MODE**は、「test」と「live」が選択できます。「test」を選ぶとStripeのテスト環境へ、「live」を選ぶと本番環境へ接続されます。

|項目名 |設定値 |
|:---|:---|
|ユニーク名|stripe_test|
|MODE|test|
![スクリーンショット 2019-03-01 11.13.13.png](https://qiita-image-store.s3.amazonaws.com/0/110436/1afc8588-31f3-8837-367a-4239e1a99f1e.png)
以下のような画面が表示されます。これは本番環境利用申請のための項目なので、今回は右上の**このアカウントフォームをスキップする**をクリックします。
<img width="885" alt="スクリーンショット 2019-03-14 18.31.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/110436/d67abea5-fff2-71dc-b784-0ecbfcd6ad07.png">


なお、ログインしていな場合は、以下のようなstripeの画面が表示されますので、**Stripeを使用してサインイン**を選択し、ログインをしてください。
![スクリーンショット 2019-03-01 11.25.23.png](https://qiita-image-store.s3.amazonaws.com/0/110436/123291bd-586e-3cd2-4250-9411e652dbc5.png)
最終的に以下のような画面（**STATUS**が**Connected in Test Mode**）になればOKです。
![スクリーンショット 2019-03-01 11.33.35.png](https://qiita-image-store.s3.amazonaws.com/0/110436/ad0bcf9b-c30f-e504-5ee1-1422be2056ee.png)

## Twilio\<Pay>の決済応答を作成
購入した電話番号へ着信があると、\<Pay>動詞を使い、クレジット決済の応答を作っていきます。
Twilioでは、電話を受信したときにの動作をXMLベースで指定するためのマークアップ言語である**TwiML**を使って応答動作を作成します。

### 決済応答をTwiMLを使って作成する
Twilioの管理コンソールから**Runtime**を選択します。※下の方にあります。
![スクリーンショット 2019-03-06 11.00.25.png](https://qiita-image-store.s3.amazonaws.com/0/110436/954c222c-5aed-b008-13b5-28fb60db0804.png)

**Runtime**メニューから**TwiML Bins**を選択します。
![スクリーンショット 2019-03-01 13.37.06.png](https://qiita-image-store.s3.amazonaws.com/0/110436/3815d102-050c-daec-d40b-dd849c563c11.png)
**Create a new Bins**を押して、TwiML Binsを新規作成します。
![スクリーンショット 2019-03-01 13.33.44.png](https://qiita-image-store.s3.amazonaws.com/0/110436/e6a00e6a-d32e-73b9-4acc-76dbb5d4a580.png)
表示された画面で以下のように入力してください。

|項目名 |設定値 |
|:---|:---|
|FRIENDLY NAME|stripe_demo|
|TWIML|以下の内容を入力|

```XML
<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Say language="ja-JP" voice="Polly.Mizuki">こんにちは。クレジットカード決済にようこそ。料金は100円です。</Say>   
  <Pay chargeAmount="100" currency='jpy' action="https://" postalCode="false" paymentConnector="stripe_test">
    <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">セキュリティーコードを入力してください。カードの裏に記載されています。</Say>
    </Prompt> 
  </Pay>
</Response>
```
4行目が決済に関する設定となります。**paymentConnector**には、上記で指定した\<Pay>Connectorsのユニーク名を指定する必要があります。

![スクリーンショット 2019-03-01 13.42.21.png](https://qiita-image-store.s3.amazonaws.com/0/110436/785f075c-19a9-0661-b896-9442d711f19e.png)

入力が完了したら、**Create**をクリックします。

###TwiMLを電話番号と紐づける。
Twilio管理コンソールから、**Phone Numbers**を選択します。
![スクリーンショット 2019-03-01 13.50.50.png](https://qiita-image-store.s3.amazonaws.com/0/110436/c0f2d8ca-60cc-b425-7bba-a72c34f24c37.png)

上記で購入した電話番号を選択し、**通話着信時**の設定にて、左のプルダウンから**TwilML**を選択、右のプルダウンから先程設定したTwiML Bins選択します。
![スクリーンショット 2019-03-01 13.53.03.png](https://qiita-image-store.s3.amazonaws.com/0/110436/9b3fc7f1-e1a2-2e39-b093-51e09273ba1c.png)

## 電話でペイをテスト
設定した電話番号に電話をかけてみます。

- **クレジットカード番号を入力してください。**のガイダンスで、「4242 4242 4242 4242 #」と入力します。※テストカード番号です。くわしくは[こちら](https://stripe.com/docs/testing#cards)
- **有効期限を、月と年のそれぞれ2桁の数字で入力してください。**のガイダンスで「1221#」と入力します。※有効期限が未来の正しい年月ならOK
- **セキュリティーコードを入力してください。カードの裏に記載されています。**のガイダンスで「999#」と入力します。※3桁の数字ならなんでもOKです。

ここまで進むと電話が切断されますので、stripeの管理画面にログインし、100円の決済が完了していることを確認します。

![スクリーンショット 2019-03-01 14.04.56.png](https://qiita-image-store.s3.amazonaws.com/0/110436/c9861123-5fb9-209f-14a0-9a511013af19.png)

# おまけ
Twilio \<Pay>では、その決済完了のステータスをcallbackとして受け取ることが簡単にできます。callbackとして呼び出しされるエンドポイントを作成し、決済結果を通知するようにします。

## ざっくり構成
![スクリーンショット 2019-03-14 15.40.57.png](https://qiita-image-store.s3.amazonaws.com/0/110436/a14318bc-403f-dc5e-9dc5-140854c760bf.png)

5. Webhook：\<Pay>が完了すると、予め**action**に指定しておいたURL(TwilioFunctions)に対し、結果を送信する。
6. TwiML応答：TwilioFunctionsがTwiMLを応答し、決済結果を電話で発話する

## 手順

1. callBack先をTwilioFunctionsを作成する。
2. TwilioFunctionsを\<Pay>のcallback先として指定する。

## callBack先をTwilioFunctionを作成する。
Twilioの管理コンソールから**Runtime** → **Functions**を選択します。
**Create a Function**を押して、Functionを新規作成します。
![スクリーンショット 2019-03-01 14.13.54.png](https://qiita-image-store.s3.amazonaws.com/0/110436/e3a46d58-0d8d-c7c7-bbb2-63cfd85c8257.png)
テンプレート選択画面が表示されるので、**Blank**を選択します。
![スクリーンショット 2019-03-01 14.15.33.png](https://qiita-image-store.s3.amazonaws.com/0/110436/216acdfd-7ef3-0ea6-ac51-aad4f9144f66.png)
表示された画面にて、以下のように入力し、**Save**をクリックします。

|項目名 |設定値 |
|:---|:---|
|FUNCTION NAME|stripeResult|
|PATH|/stripe-result|
|ACCESS CONTROL|チェックあり|
|EVENT|(未選択)|
|CODE|以下参照|

```JavaScript
exports.handler = function(context, event, callback) {
	let twiml = new Twilio.twiml.VoiceResponse();
	
	switch (event.Result) {
    case "success":
        text = "100円の決済が完了しました。ご利用ありがとうございました。";
        break;
    case "payment-connector-error":
        text = "エラーが発生しました。決済に失敗しました。";
        console.log(decodeURIComponent(event.PaymentError));
        break;
    default: 
        status_text = "error";
        text = "決済に失敗しました。";
    }

	twiml.say({ language: 'ja-JP', voice: 'Polly.Mizuki' },text);
    callback(null, twiml);
};
```
![スクリーンショット 2019-03-01 14.25.58.png](https://qiita-image-store.s3.amazonaws.com/0/110436/a72850f1-0a9b-bba0-e470-da46c6731433.png)
保存できたら、**PATH**の右にあるを![スクリーンショット 2019-03-01 14.27.13.png](https://qiita-image-store.s3.amazonaws.com/0/110436/8b44ab9e-dc9d-ef23-b515-eb5d814f653f.png)をクリックします。このFunctionのURLとなります。

## TwilioFunctionsを\<Pay>のcallback先として指定する。
先程コピーしたTwilioFunctionのURLを設定します。
Twilioの管理コンソールから**Runtime**→**TwiML Bins**を選択します。
![スクリーンショット 2019-03-01 14.33.39.png](https://qiita-image-store.s3.amazonaws.com/0/110436/21e6084d-caf8-94cf-22b6-83b4c4347d6c.png)
最初に作ったTwiML Binを選択し、TWIMLを以下のように書き換えます。
※4行目\<Pay>の**action**に、さきほどのFunctionのURLを入力し**Save**をクリックします。

```XML
<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Say language="ja-JP" voice="Polly.Mizuki">こんにちは。クレジットカード決済にようこそ。料金は100円です。</Say>   
  <Pay chargeAmount="100" currency='jpy' action="[ここにTwilioFunctionのURLを記入]" postalCode="false" paymentConnector="stripe_test">
    <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">セキュリティーコードを入力してください。カードの裏に記載されています。</Say>
    </Prompt> 
  </Pay>
</Response>
```
## 電話でペイをテスト
設定した電話番号に電話をかけてみます。
決済終了後に、「100円の決済が完了しました。ご利用ありがとうございました。」とメッセージがながれたら成功です。


# 時間がある人は・・・
[Twilio \<Pay> を使って電話決済を体験する(中級編)](https://qiita.com/takeshifurusato/private/af96ecc7ce69dec8f42c)にチャレンジしてみてください。

# お礼
今回の資料を作成するにあたり、以下の参考にさせていただきました。ありがとうございます。
https://qiita.com/mobilebiz/items/31b061af62b35fd82724
https://qiita.com/motchi0214/items/a95335679ee7e9d0b660
https://qiita.com/takeshifurusato/items/21e01852b634eb704102