CodeStar + Twilio PayでAlexa経由の電話決済を実装する

JAWS Days 2019 Alexaワークショップの資料です。

## 前提
- AWS Coupon $25が提供されます
 - Code Star(CloudFormation)により複数のリソースを立ち上げます。消し忘れによる課金に注意してください
- Twilioは無料トライアルアカウントがありますが、すでにトライアル期間を終了しているなどの場合、以下の課金が発生します
 - Twilio Payは1リクエスト（成功したリクエスト、もしくはトークン作成成功時のみ課金対象となります）あたり15円の課金が発生します
 - Twilioで取得した電話番号にも課金が発生します

## 構成
![Untitled(4) (1).png](https://qiita-image-store.s3.amazonaws.com/0/23936/a9e1101c-84bb-b4dc-2c96-dac1ee715932.png)

## Goal
AWSのリソースをフル活用した、Alexaスキルバックエンドの開発を体験する。

## Checkpoint
- CodeStar他AWSをフル活用してAlexaスキルを開発する
- Cloud9を用いたインブラウザコーディングを体験する
- CodeStarを利用したCI / CDパイプラインの構築・運用について体験する
- Twilio / Stripeを用いたオンライン決済を体験する
- SAMを用いたServerless APIの実装を体験する
- AlexaのAPIを活用してユーザーに電話をかける実装を体験する

## 事前準備

本ワークショップでは、以下のアカウントが必要です。
事前に必ず用意してください。

- AWSアカウント
- Amazon開発者アカウント（日本語）
- Stripeアカウント
- Twilioアカウント

### AWSアカウント
本ワークショップでは、AWS Lambda・CodeStarをはじめとした多数のAWSリソースを利用します。
https://aws.amazon.com/jp/register-flow/ より作成してください。

※当日はAWS Japanより25ドルのクーポンを提供していただきます。

### Amazon開発者アカウント（日本語）
https://developer.amazon.com/ja/
https://developer.amazon.com/ja/blogs/alexa/post/9f852a38-3a44-48bd-b78f-22050269d7c7/hamaridokoro

### Stripeアカウント
Twilio Payの決済にStripeを利用します。
https://dashboard.stripe.com/register よりアカウントを事前に作成してください。

※テストモードを利用します。本番環境利用の申請は不要です

### Twilioアカウント
電話を利用した決済に、Twilioで取得した電話番号とTwilio Payが必要です。
https://jp.twilio.com/docs/usage/tutorials/how-to-use-your-free-trial-account

## AWS / Alexaのリソース作成

Alexa  / バックエンドはCodeStarで管理します。
Hosted Skillでもいけないことはないですが、AWSのイベントなのでAWS側でできるだけがんばりましょう。
### リージョンをus-east-1に変える
今回利用するサービスの一部（Cloud9）は、東京リージョンで利用できません。
また、Alexa Skill / CodeStarにも現時点ではリージョンの制約があります。

そのため、本ワークショップは**かならずus-east-1(バージニア北部)**に切り替えてから取り組んでください。


### CodeStarでスタック作成
CodeStarはテンプレートから起動できます。Alexa用のテンプレートが2種ありますが、Node.js側を選択してください。
Pythonでもできないことはないですが、メンターがPythonに詳しいという保証はありませんので自己責任でお願いします。

<img width="996" alt="codestar-1.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/b936c6fb-0a17-0ddd-d6d9-62507b6a646e.png">

#### プロジェクト名とリポジトリの選択
プロジェクト名を設定します。後半にてCLIコマンドが出てくる関係から、`twilio-pay`をプロジェクト名に設定してください。

またCI / CDパイプラインも構築するので、リポジトリが必要です。
今回はAWSを使い倒したいので、CodeCommitを選択しましょう。

<img width="1117" alt="スクリーンショット 2019-02-01 18.36.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/4ea0871c-b24b-2e6d-f19e-0d9f071b205e.png">

#### Amazon開発者アカウントへのリンク
スキルをデプロイするためにアカウントリンクが必要です。
<img width="1047" alt="スクリーンショット 2019-02-01 18.36.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/86cf0613-c7b4-4fe5-2be6-485c6684d148.png">
ボタンをクリックして、Amazon開発者アカウントでログインし、各種権限を与えましょう。

<img width="590" alt="スクリーンショット 2019-02-01 18.37.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/fef85e30-254b-2e20-b9fa-810c20911221.png">
"AWS CodeStar は Amazon 開発者アカウントに接続されました"と表示されればOKです。

<img width="1057" alt="スクリーンショット 2019-02-01 18.38.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/11f139fd-e215-2d2e-4983-e8e941af72c6.png">

#### 構成のレビュー
Code Starは自動で複数のリソースを作成します。実装からデプロイまでどのようなフローになるか確認しておきましょう。

<img width="1054" alt="スクリーンショット 2019-02-01 18.38.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/78874625-9326-c286-007c-6ebd1e6d0650.png">

#### エディタの選択
エディタを選べます。任意のエディタを選択することもできますが、ワークショップではAWS Cloud9を使うことを前提として進めます。

<img width="1145" alt="スクリーンショット 2019-02-01 18.39.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/03c9c3d0-4a7f-08fc-2ff8-3e979b83a39a.png">

Cloud9の設定はデフォルトでOKです。
<img width="1171" alt="スクリーンショット 2019-02-01 18.40.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/f8b9c2f4-a47a-fcb5-3e36-a12896da5910.png">

#### セットアップ完了
以上で環境準備ができました。
AWS / Alexaの各種リソースが今作成されています。

<img width="1288" alt="スクリーンショット 2019-02-01 18.41.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/fbfb0763-c4fc-7e10-26bb-c57e5dbe71bd.png">

## Twilio Payの準備
AWS Cloud9が利用できるようになるまで時間があるので、先にTwilio Payの設定を行います。

### Twilioの開発コンソールへログイン
URL: https://jp.twilio.com/console
参考資料：https://qiita.com/mobilebiz/items/31b061af62b35fd82724

### Twilioの電話番号を取得する
Twilioがユーザーに架電するための番号が必要です。左側のメニューから[Phone Numbers]をクリックします。
![スクリーンショット 2019-02-21 17.45.31.png](https://qiita-image-store.s3.amazonaws.com/0/23936/27a0ca75-4165-f49a-1a2c-a3bb9025f23e.png)

＊画面の表示が異なる場合は[こちらのページ](https://qiita.com/motchi0214/items/53cee45f5a6c0f169a29)ヘ移動してください。
<img width="1440" alt="スクリーンショット 2019-02-23 4.36.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/49fd31af-7164-3fd3-0262-a4394732c519.png">
こういう画像が出た場合は、[こちらのページ](https://qiita.com/motchi0214/items/53cee45f5a6c0f169a29)

[アクティブな電話番号]に電話番号がある方は、「Twilio Pay設定ページへ移動する」までスキップします。

### 電話番号を購入する
電話番号を購入するには、左側のメニューから[番号を購入]をクリックします。
![スクリーンショット 2019-02-21 17.48.12.png](https://qiita-image-store.s3.amazonaws.com/0/23936/ed4aec37-aacb-eb31-240c-e1bf5ab5a042.png)

細かい指定が可能ですが、デフォルトのまま[検索]をクリックします。
![スクリーンショット 2019-02-21 17.49.16.png](https://qiita-image-store.s3.amazonaws.com/0/23936/705ff4e6-6b71-d630-221d-f166ff4a03d9.png)
電話番号のリストが表示されますので、[Voice]にアイコンが表示されている電話番号を１つ選んで購入します。

![スクリーンショット 2019-02-21 17.50.20.png](https://qiita-image-store.s3.amazonaws.com/0/23936/a54e3d48-809f-c2d5-4294-e54d0cba1964.png)
![スクリーンショット 2019-02-21 17.50.30.png](https://qiita-image-store.s3.amazonaws.com/0/23936/9fb64840-c9fe-7028-4ea6-d5ffc9513963.png)

[閉じる]をクリックして、左側のメニューの[アクティブな電話番号]をクリックします。
電話番号が追加されていればOKです。

### Twilio Pay設定ページへ移動する

左側のメニューから[Programmable Voice > 設定]へ移動します。
https://jp.twilio.com/console/voice/settings

### PCI Modeの有効化

![スクリーンショット 2019-02-01 18.44.40.png](https://qiita-image-store.s3.amazonaws.com/0/23936/346fa09c-80b8-4a78-d9cd-567b47d76120.png)

[PCI Mode]から[Enable PCI Mode]をクリックしてPCI Modeを有効化します。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f38363034362f66633936623138322d336538642d356462322d363033312d6561376437623163356135652e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/23936/8dd222fa-8858-4be5-c647-a02eb21f91e0.png)

利用規約のダイヤログが開きますので、右下にあるAcceptのボタンを押してください。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f38363034362f31313435636231382d323231352d343431372d383366632d6261343264666637373735332e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/23936/4a2aec71-d42b-93cc-39bd-c1dd3c46ae10.png)

STATUSが"Enabled"になっていればOKです。

<img width="805" alt="スクリーンショット 2019-02-23 9.23.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/7935a8f5-e7c6-dd80-1a5d-d744eada21f7.png">

最後に下部の[Save]ボタンを押して保存しましょう。


### Stripeコネクターの有効化
サイドバーから[<Pay>Connectors]をクリックします。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f38363034362f38323332373332352d666165622d613530632d303937662d3865303239393935383362632e706e67 (1).png](https://qiita-image-store.s3.amazonaws.com/0/23936/76c8fd8d-28ee-c065-381f-107acda71a63.png)
Stripeのアイコンをクリックしてインストールします。

利用規約と課金方法について表示されますので同意してインストールしてください。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f38363034362f62386238633163302d633333352d353936642d313137322d3439326463623537343162632e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/23936/fbde0edd-9e98-706d-37a3-eb3fa158678d.png)

### Stripeとの連携設定
設定画面から連携の設定ができます。かならず以下の設定にしてください。

|項目名|値|
|:--|:--|
|ユニーク名|Default|
|MODE| test |

connect with Stripeをクリックすると、Stripeへのログイン画面が表示されます。作成したアカウントでログインしてください。

<img width="782" alt="スクリーンショット 2019-02-23 9.25.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/d2c624bd-ff94-d827-7d04-d7b9c60bae95.png">

本番環境利用申請などの画面が出ます。今回はトライすることが目的なので、「このアカウントフォームをスキップ」でスキップしましょう。
<img width="877" alt="スクリーンショット 2019-02-23 9.26.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/f20b61f5-beb5-d443-e62f-d768696ac6de.png">

以下のような表示になればOKです。
<img width="687" alt="スクリーンショット 2019-02-23 9.39.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/e2d1641c-35db-ba3e-6eb3-8f98e8022859.png">


## Code StarでAlexaスキルを実装する
Code Starの準備ができていれば、以下のような画面がでます。
[コーディングの開始]をクリックしましょう。

<img width="1280" alt="スクリーンショット 2019-02-01 18.58.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/ebe29438-de1a-0e0f-fe34-222e6c81513f.png">

Cloud9が起動します。
ディレクトリ構成がASK CLIでセットアップしたときと異なりますので注意してください。

<img width="1066" alt="スクリーンショット 2019-02-01 18.59.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/9b731f0f-4ee4-8072-35f1-2e7ee57e297b.png">

### スキルの日本語化
まずはスキルを日本語化します。（2019年2月時点では、英語でしかセットアップされない）

#### 対話モデルの日本語化

対話モデルを日本語化しましょう。
対話モデルのJSONファイルは、interactionModels/customディレクトリ配下にあります。

```console
$ mv twilio-pay/interactionModels/custom/en-US.json twilio-pay/interactionModels/custom/ja-JP.json
```

`ja-JP.json`には以下の内容を入れてください。

```json
{
    "interactionModel": {
        "languageModel": {
            "invocationName": "電話決済",
            "intents": [
                {
                    "name": "AMAZON.CancelIntent",
                    "samples": []
                },
                {
                    "name": "AMAZON.HelpIntent",
                    "samples": []
                },
                {
                    "name": "AMAZON.StopIntent",
                    "samples": []
                },
                {
                    "name": "TwilioPayIntent",
                    "samples": [
                        "電話で決済してください",
                        "電話で決済して",
                        "電話で決済",
                        "電話決済してください",
                        "電話決済して",
                        "電話決済",
                        "カード決済してください",
                        "カード決済して",
                        "カード決済",
                        "決済してください",
                        "決済して",
                        "決済"
                    ]
                },
                {
                    "name": "HelloWorldIntent",
                    "slots": [],
                    "samples": [
                        "ハローワールド",
                        "ハロー",
                        "こんにちは",
                        "こんちは"
                    ]
                }
            ],
            "types": []
        }
    }
}
```

#### skill.jsonいじる

続いてスキル情報を更新します。
スキル情報は`twilio-pay/skill.json`で設定します。
以下のコードをコピペして保存してください。

```json
{
  "manifest": {
    "publishingInformation": {
      "locales": {
        "ja-JP": {
          "summary": "Alexaワークショップで作成したスキルです。",
          "examplePhrases": [
            "アレクサ、電話決済を開いて",
            "アレクサ、電話決済を開いて決済して",
            "アレクサ、電話決済"
          ],
          "name": "Alexaワークショップ",
          "description": "Alexaワークショップで作成したスキルです。"
        }
      },
      "isAvailableWorldwide": true,
      "testingInstructions": "Sample Testing Instructions.",
      "category": "EDUCATION_AND_REFERENCE",
      "distributionCountries": []
    },
    "apis": {
      "custom": {
      }
    },
    "manifestVersion": "1.0"
  }
}

```

### Lambdaを変更してみる
続いてAlexaの返答を日本語にします。Alexaの返答はAWS Lambdaで設定します。
`twilio-pay/lambda/custom/index.js`に以下のコードを貼り付けましょう。

```js
const Alexa = require('ask-sdk-core');

const LaunchRequestHandler = {
    canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'LaunchRequest';
    },
    handle(handlerInput) {
      const speechText = 'ワークショップサンプルスキルです。何を試しますか？';
      return handlerInput.responseBuilder
        .speak(speechText)
        .reprompt(speechText)
        .getResponse();
    }
};
const HelloWorldIntentHandler = {
    canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'IntentRequest'
        && handlerInput.requestEnvelope.request.intent.name === 'HelloWorldIntent';
    },
    handle(handlerInput) {
      const speechText = 'こんにちは。何を試しますか？';
      return handlerInput.responseBuilder
        .speak(speechText)
        .reprompt('何を試しますか？')
        .getResponse();
    }
};
const HelpIntentHandler = {
    canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'IntentRequest'
        && handlerInput.requestEnvelope.request.intent.name === 'AMAZON.HelpIntent';
    },
    handle(handlerInput) {
      const speechText = 'このスキルはAlexaワークショップのサンプルスキルです。何を試しますか？';
     
      return handlerInput.responseBuilder
        .speak(speechText)
        .reprompt(speechText)
        .getResponse();
    }
};
const CancelAndStopIntentHandler = {
    canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'IntentRequest'
        && (handlerInput.requestEnvelope.request.intent.name === 'AMAZON.CancelIntent'
          || handlerInput.requestEnvelope.request.intent.name === 'AMAZON.StopIntent');
    },
   handle(handlerInput) {
      const speechText = 'ごきげんよう';
      return handlerInput.responseBuilder
        .speak(speechText)
        .getResponse();
    }
};
const SessionEndedRequestHandler = {
    canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'SessionEndedRequest';
    },
    handle(handlerInput) {
      // Any cleanup logic goes here.
      return handlerInput.responseBuilder.getResponse();
    }
};

// The intent reflector is used for interaction model testing and debugging.
// It will simply repeat the intent the user said. You can create custom handlers
// for your intents by defining them above, then also adding them to the request
// handler chain below.
const IntentReflectorHandler = {
    canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'IntentRequest';
    },
    handle(handlerInput) {
      const intentName = handlerInput.requestEnvelope.request.intent.name;
      const speechText = `${intentName} インテントが呼び出されました。他のインテントを試しますか？`;
 
      return handlerInput.responseBuilder
        .speak(speechText)
        .reprompt('他のインテントを試しますか？')
        .getResponse();
   }
};

// Generic error handling to capture any syntax or routing errors. If you receive an error
// stating the request handler chain is not found, you have not implemented a handler for
// the intent being invoked or included it in the skill builder below.
const ErrorHandler = {
    canHandle() {
      return true;
    },
    handle(handlerInput, error) {
      console.log(`~~~~ Error handled: ${error.message}`);
      const speechText = `すみません。うまく聞き取れませんでした。もう一度いってもらえますか？`;

      return handlerInput.responseBuilder
        .speak(speechText)
        .reprompt(speechText)
        .getResponse();
    }
};

// This handler acts as the entry point for your skill, routing all request and response
// payloads to the handlers above. Make sure any new handlers or interceptors you've
// defined are included below. The order matters - they're processed top to bottom.
exports.handler = Alexa.SkillBuilders.custom()
  .addRequestHandlers(
    LaunchRequestHandler,
    HelloWorldIntentHandler,
    HelpIntentHandler,
    CancelAndStopIntentHandler,
    SessionEndedRequestHandler,
    IntentReflectorHandler) // make sure IntentReflectorHandler is last so it doesn't override your custom intent handlers
  .addErrorHandlers(
    ErrorHandler)
  .lambda();
```

### Code Starでデプロイしてみる

ここで一度編集内容をデプロイしてみましょう。
今回の構成では、Cloud9 -> (Git) -> CodeCommit -> (CodePipeline) -> CodeBuildというルートでデプロイされます。

#### ターミナルの表示
ターミナルは画面下部に表示されている"bash - "から始まるタブです。

<img width="1010" alt="スクリーンショット 2019-02-02 22.52.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/bfcb5d39-9470-1460-4492-265d271b909c.png">

表示されていない場合、[View > console]をクリックしてください。
![スクリーンショット 2019-02-21 17.39.41.png](https://qiita-image-store.s3.amazonaws.com/0/23936/9517ed9b-3229-418f-7285-3ed78256d563.png)


#### Gitの操作


まずはCloud9の画面下部から以下のコマンドを実行してGitで変更をコミットしましょう。

(<YOUR_EMAIL_ADDRESS>と<YOUR_USER_NAME>は自分のものに書き換えてください)

```console
$ cd ~/environment/twilio-pay
$ echo 'node_modules/' > .gitignore
$ git config --global user.name <YOUR_USER_NAME>
git config --global user.email <YOUR_EMAIL_ADDRESS>
$ git add ~/environment/twilio-pay
$ git commit -m "translate japanese"
$ git push origin master
```

pushに成功していれば、CodeStarからビルドが開始していることが確認できます。

<img width="1283" alt="スクリーンショット 2019-02-02 22.51.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/e7bbc477-1214-817d-eb6f-48f84b867ed8.png">

### Alex開発コンソールで変更を確認する。
Alexa開発コンソール（https://developer.amazon.com/alexa/console/ask ）で以下のようにスキルが追加・更新されていればOKです。

<img width="1080" alt="スクリーンショット 2019-02-02 23.23.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/212c4079-77c4-6c6d-6ea2-dd072bcaee29.png">


## Twilio Payと連携する

ここからはいよいよTwilio Payと連携させてゆきます。

### Twilio SDKのインストール
まずはSDKをインストールしましょう。

下部にあるコンソールでコマンドを打っていきます。`twilio-pay`以外のプロジェクト名の場合は、適宜ディレクトリ名を読み替えて下さい。

```console
:~/environment $ cd twilio-pay/lambda/custom/
:~/environment/twilio-pay/lambda/custom (master) $ pwd
/home/ec2-user/environment/twilio-pay/lambda/custom
:~/environment/twilio-pay/lambda/custom (master) $ npm i -S twilio querystring
```

### TwilioのAuth tokenと電話番号を確認する

[Dashboard > 設定] （https://jp.twilio.com/console/project/settings ）から[API クレデンシャル]を取得します。かならず[ライブクレデンシャル]を利用しましょう。

<img width="769" alt="スクリーンショット 2019-02-02 23.17.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/ab6fecd3-cdaa-2813-e1ea-d441e44cc413.png">

続いて[Phone numbers] （https://jp.twilio.com/console/phone-numbers/incoming ）から取得済の電話番号を確認します。

<img width="699" alt="スクリーンショット 2019-02-02 23.19.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/e5c5f027-987c-32b3-2beb-d66870811ad9.png">

それぞれの値を、`twilio-pay/lambda/custom/index.js`に以下のような形で保存しましょう。

```js
const Alexa = require('ask-sdk-core');
const querystring = require('querystring');
const twilio = require('twilio');
const twilioConfig = {
  ACCOUNT_SID: '<ACCOUNT_SID>',
  AUTH_TOKEN: '<AUTH_TOKEN>',
  YOUR_PHONE_NUMBER: '+81<YOUR_PHONE_NUMBER>',
  YOUR_TWILIO_NUMBER: '+81<YOUR_TWILIO_NUMBER>'
}
const client = twilio(twilioConfig.ACCOUNT_SID, twilioConfig.AUTH_TOKEN);
```

`+81<YOUR_PHONE_NUMBER>`にはあなたの電話番号を入力してください（例：+0819099999999)

### Twilio Payを実行する

続いて電話をかける処理を追加します。
`twilio-pay/lambda/custom/index.js`の10行目以降（`const client = twilio(twilioConfig.ACCOUNT_SID, twilioConfig.AUTH_TOKEN);`）より下に以下のコードを追加しましょう。

```js
const CallPayIntent = {
  canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'IntentRequest'
        && handlerInput.requestEnvelope.request.intent.name === 'TwilioPayIntent';
  },
  async handle(handlerInput) {
    // 喋らせる内容
    const twiml = `<Response>
  <Say language="ja-JP" voice="Polly.Takumi">ただいまより、クレジットカードで決済を行います。お支払い金額は990円です。</Say>
  <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>
   <Say language="ja-JP" voice="Polly.Mizuki">990円の支払いが完了しました。ご利用ありがとうございました。</Say>
</Response>`;

    // 電話をかける処理
    try {
      const responseData = await client.calls.create({
        to: twilioConfig.YOUR_PHONE_NUMBER, //コール先の番号
        from: twilioConfig.YOUR_TWILIO_NUMBER, // 取得したtwilioの番号.
        url: 'http://twimlets.com/echo?Twiml=' + querystring.escape(twiml)
      })
      console.log(responseData.from)
      const { from } = responseData
      const messages = [
        from ? `${from}から` :'',
        'あなたの電話番号に決済の電話をコールします。',
        '電話の案内に従って決済をおこなってください。'
      ].join('')
      return handlerInput.responseBuilder
        .speak(messages)
        .getResponse();
    } catch (e) {
      console.log(e)
      const speechText = 'すみません。カードの処理に失敗しました。ログを確認して再度お試しください。';
      return handlerInput.responseBuilder
        .speak(speechText)
        .getResponse();
    }
  }
}
```

その後以下のように`addRequestHandlers`の引数に`CallPayIntent`を追加します。

```js
exports.handler = Alexa.SkillBuilders.custom()
  .addRequestHandlers(
    LaunchRequestHandler,
    CallPayIntent,
    HelloWorldIntentHandler,
```



#### フルコードのサンプル

```js
const Alexa = require('ask-sdk-core');
const querystring = require('querystring');
const twilio = require('twilio');
const twilioConfig = {
  ACCOUNT_SID: '<ACCOUNT_SID>',
  AUTH_TOKEN: '<AUTH_TOKEN>',
  YOUR_PHONE_NUMBER: '+81<YOUR_PHONE_NUMBER>',
  YOUR_TWILIO_NUMBER: '+81<YOUR_TWILIO_NUMBER>'
}
const client = twilio(twilioConfig.ACCOUNT_SID, twilioConfig.AUTH_TOKEN);

const CallPayIntent = {
  canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'IntentRequest'
        && handlerInput.requestEnvelope.request.intent.name === 'TwilioPayIntent';
  },
  async handle(handlerInput) {
    // 喋らせる内容
    const twiml = `<Response>
  <Say language="ja-JP" voice="Polly.Takumi">ただいまより、クレジットカードで決済を行います。お支払い金額は990円です。</Say>
  <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>
   <Say language="ja-JP" voice="Polly.Mizuki">990円の支払いが完了しました。ご利用ありがとうございました。</Say>
</Response>`;

    // 電話をかける処理
    try {
      const responseData = await client.calls.create({
        to: twilioConfig.YOUR_PHONE_NUMBER, //コール先の番号
        from: twilioConfig.YOUR_TWILIO_NUMBER, // 取得したtwilioの番号.
        url: 'http://twimlets.com/echo?Twiml=' + querystring.escape(twiml)
      })
      console.log(responseData.from)
      const { from } = responseData
      const messages = [
        from ? `${from}から` :'',
        'あなたの電話番号に決済の電話をコールします。',
        '電話の案内に従って決済をおこなってください。'
      ].join('')
      return handlerInput.responseBuilder
        .speak(messages)
        .getResponse();
    } catch (e) {
      console.log(e)
      const speechText = 'すみません。カードの処理に失敗しました。ログを確認して再度お試しください。';
      return handlerInput.responseBuilder
        .speak(speechText)
        .getResponse();
    }
  }
}


const LaunchRequestHandler = {
    canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'LaunchRequest';
    },
    handle(handlerInput) {
      const speechText = 'ワークショップサンプルスキルです。何を試しますか？';
      return handlerInput.responseBuilder
        .speak(speechText)
        .reprompt(speechText)
        .getResponse();
    }
};
const HelloWorldIntentHandler = {
    canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'IntentRequest'
        && handlerInput.requestEnvelope.request.intent.name === 'HelloWorldIntent';
    },
    handle(handlerInput) {
      const speechText = 'こんにちは。何を試しますか？';
      return handlerInput.responseBuilder
        .speak(speechText)
        .reprompt('何を試しますか？')
        .getResponse();
    }
};
const HelpIntentHandler = {
    canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'IntentRequest'
        && handlerInput.requestEnvelope.request.intent.name === 'AMAZON.HelpIntent';
    },
    handle(handlerInput) {
      const speechText = 'このスキルはAlexaワークショップのサンプルスキルです。何を試しますか？';
     
      return handlerInput.responseBuilder
        .speak(speechText)
        .reprompt(speechText)
        .getResponse();
    }
};
const CancelAndStopIntentHandler = {
    canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'IntentRequest'
        && (handlerInput.requestEnvelope.request.intent.name === 'AMAZON.CancelIntent'
          || handlerInput.requestEnvelope.request.intent.name === 'AMAZON.StopIntent');
    },
   handle(handlerInput) {
      const speechText = 'ごきげんよう';
      return handlerInput.responseBuilder
        .speak(speechText)
        .getResponse();
    }
};
const SessionEndedRequestHandler = {
    canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'SessionEndedRequest';
    },
    handle(handlerInput) {
      // Any cleanup logic goes here.
      return handlerInput.responseBuilder.getResponse();
    }
};

// The intent reflector is used for interaction model testing and debugging.
// It will simply repeat the intent the user said. You can create custom handlers
// for your intents by defining them above, then also adding them to the request
// handler chain below.
const IntentReflectorHandler = {
    canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'IntentRequest';
    },
    handle(handlerInput) {
      const intentName = handlerInput.requestEnvelope.request.intent.name;
      const speechText = `${intentName} インテントが呼び出されました。他のインテントを試しますか？`;
 
      return handlerInput.responseBuilder
        .speak(speechText)
        .reprompt('他のインテントを試しますか？')
        .getResponse();
   }
};

// Generic error handling to capture any syntax or routing errors. If you receive an error
// stating the request handler chain is not found, you have not implemented a handler for
// the intent being invoked or included it in the skill builder below.
const ErrorHandler = {
    canHandle() {
      return true;
    },
    handle(handlerInput, error) {
      console.log(`~~~~ Error handled: ${error.message}`);
      const speechText = `すみません。うまく聞き取れませんでした。もう一度いってもらえますか？`;

      return handlerInput.responseBuilder
        .speak(speechText)
        .reprompt(speechText)
        .getResponse();
    }
};

// This handler acts as the entry point for your skill, routing all request and response
// payloads to the handlers above. Make sure any new handlers or interceptors you've
// defined are included below. The order matters - they're processed top to bottom.
exports.handler = Alexa.SkillBuilders.custom()
  .addRequestHandlers(
    LaunchRequestHandler,
    CallPayIntent,
    HelloWorldIntentHandler,
    HelpIntentHandler,
    CancelAndStopIntentHandler,
    SessionEndedRequestHandler,
    IntentReflectorHandler) // make sure IntentReflectorHandler is last so it doesn't override your custom intent handlers
  .addErrorHandlers(
    ErrorHandler)
  .lambda();
```

### デプロイ・テスト

再びGitで変更を保存し、CodeStar(CodePipeline)でデプロイしましょう。

```console
$ git add ~/environment/twilio-pay
$ git commit -m "call pay"
$ git push origin master
```

Alexa開発コンソールやAlexa開発アカウントと連携しているAlexaで「アレクサ、電話決済で決済して」と話しかけ、電話がかかればOKです。

<img width="1366" alt="スクリーンショット 2019-02-03 0.42.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/5043e17e-3b3c-cb98-f784-f1b9196dd752.png">

#### Note: テストのカード番号
Stripeをテストモードで連携させていますので、テスト用のカード番号のみ利用できます。

- カード番号：4242 4242 4242 4242
- 有効期限： 10/20 (未来の年月ならOK)
- CVC: 123(3桁の数字ならなんでもOK)

カード番号については https://stripe.com/docs/testing#cards を参照。


## 電話の結果を処理する
参考：https://qiita.com/takeshifurusato/items/21e01852b634eb704102
### template.ymlでAPI追加

`twilio-pay/template.yml`にAWS Lambdaなどのリソースが定義されています。
そこでここにTwilio Payのcallbackを受け取るAPIを追加しましょう。

追加するコードはこちらです。

```yaml
Resources:
  # 追加ここから
  TwilioPayCallBackFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: 'lambda/custom'
      Handler: index.twilioHandler
      Runtime: nodejs8.10
      Role: !GetAtt LambdaExecutionRole.Arn
      Events:
        TwilioCallback:
          Type: Api
          Properties:
            Path: /pay-callback
            Method: post
  # 追加ここまで
  CustomDefaultFunction:
```

`twilio-pay/lambda/custom/index.js`の最下部に以下のコードを追加しましょう。

```js
exports.twilioHandler = (event, context,callback) => {
  console.log(JSON.stringify(event))
  const body = event.body.split('&')
  const results = body.filter(item => {
    const reg = new RegExp(/^Result/)
    return reg.test(item)
  })
  const t = results[0].split('=')
  const result = t[1]

  let twiml = new twilio.twiml.VoiceResponse();
  let text = ''
  switch (result) {
    case "success":
      text = "会費の決済が完了しました。ご利用ありがとうございました。";
      break;

    case "payment-connector-error":
      text = "エラーが発生しました。決済に失敗しました。";
      console.log(result);
      break;

    default: 
        text = "決済に失敗しました。";
    }
    twiml.say({ language: 'ja-JP' },text);
    const response = {
        statusCode: 200,
        headers: {
            "Content-Type" : "text/xml; charset=utf8"
        },
        body: twiml.toString()
    }
    console.log(JSON.stringify(response))
    callback(null, response);
};
```

この状態でデプロイします。

```console
$ git add ~/environment/twilio-pay
$ git commit -m "add callback api"
$ git push origin master
```

デプロイが完了したら、API GatewayのURLを確認しましょう。

<img width="737" alt="スクリーンショット 2019-02-03 1.25.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/fe987aa9-aac3-f2af-01b8-650c0710fcbe.png">

<img width="1164" alt="スクリーンショット 2019-02-03 1.26.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/93ccd8b3-c19b-88ce-19e8-7d1597a6a5dd.png">

### TwiMLを更新する
#### Notice:TwiML / twimletsの利用について
TwiMLをハードコードし、twimletsを経由して実行するやり方は**現在非推奨**です。
今回はワークショップ進行の関係上敢えてこの形式を採用していますが、非推奨とされている実装であることをご了承ください。
実際に利用される場合は、[TwiML Bin](https://twilioforkwc.zendesk.com/hc/ja/articles/115000039762-TwiML-Bin%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%AE%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95)を利用してください。
その他参考：https://qiita.com/mobilebiz/items/ca4a54e20dc1936378b0

#### TwiML更新部分

PAYタグのACTIONを追加したAPIに書き換えます。

```js
    const twiml = `<Response>
  <Say language="ja-JP" voice="Polly.Takumi">ただいまより、クレジットカードで決済を行います。お支払い金額は990円です。</Say>
  <Pay chargeAmount="990" currency="jpy" postalCode="false" action="https://YOUR_API_GW_ENDPOINT/Prod/pay-callback">
    <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>
   <Say language="ja-JP" voice="Polly.Mizuki">990円の支払いが完了しました。ご利用ありがとうございました。</Say>
</Response>`;
```

### 決済完了後の発話を確認する

再度スキルを実行して、電話の決済完了時にちゃんとメッセージが出てることを確認しましょう。


## Alexaの電話番号情報を取得する
#### skill.jsonいじる（コピペ）
まずはskillでカスタマープロファイルAPIにアクセスするための設定を追加します。
以下のサンプルのように、`permission`を追加します。

```json
{
  "manifest": {
    "publishingInformation": {
      "locales": {
        "ja-JP": {
          "summary": "Alexaワークショップで作成したスキルです。",
          "examplePhrases": [
            "アレクサ、電話決済を開いて",
            "アレクサ、電話決済を開いて決済して",
            "アレクサ、電話決済"
          ],
          "name": "Alexaワークショップ",
          "description": "Alexaワークショップで作成したスキルです。"
        }
      },
      "isAvailableWorldwide": true,
      "testingInstructions": "Sample Testing Instructions.",
      "category": "EDUCATION_AND_REFERENCE",
      "distributionCountries": []
    },
    "apis": {
      "custom": {
      }
    },
    "permissions": [{
        "name": "alexa::profile:mobile_number:read"
      }
    ],
    "manifestVersion": "1.0"
  }
}
```

#### Customer Profile APIを設定する

LambdaからAPIクライアントを利用できるようにしましょう。

`exports.handler = Alexa.SkillBuilders.custom()`以下に`.withApiClient(new Alexa.DefaultApiClient())`を追加します。

```js
exports.handler = Alexa.SkillBuilders.custom()
  .addRequestHandlers(
    ...
  )
  .addErrorHandlers(ErrorHandler)
  .withApiClient(new Alexa.DefaultApiClient())
  .lambda();
```

続いて`CallPayIntent`を以下の内容に変更します。

```js
const CallPayIntent = {
  canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'IntentRequest'
        && handlerInput.requestEnvelope.request.intent.name === 'TwilioPayIntent';
  },
  getPhoneNumber(phoneNumber) {
    const phone = String(phoneNumber)
    if (/^0/.test(phone)) {
      return phone.replace(/^0/, '+81')
    } else if (/^\+/.test(phone)) {
      return phone
    }
    return `+81${phone}`
  },
  async handle(handlerInput) {
    
    const {serviceClientFactory } = handlerInput
    let phoneNumber = twilioConfig.YOUR_PHONE_NUMBER
    try {
      const upsServiceClient = serviceClientFactory.getUpsServiceClient();  // Clientの作成
      const mobileNumber = await upsServiceClient.getProfileMobileNumber(); // 携帯電話番号の取得
      if (mobileNumber.phoneNumber) phoneNumber = this.getPhoneNumber(mobileNumber.phoneNumber)
    } catch (e) {
      return handlerInput.responseBuilder
        .speak('連絡先の利用が許可されていません。アレクサアプリの設定を変更して下さい。')
        .withAskForPermissionsConsentCard([
          'alexa::profile:mobile_number:read'
        ])
        .getResponse();
    }
    
    // 喋らせる内容
    const twiml = `<Response>
  <Say language="ja-JP" voice="Polly.Takumi">ただいまより、クレジットカードで決済を行います。お支払い金額は990円です。</Say>
  <Pay chargeAmount="990" currency="jpy" postalCode="false" action="https://89uqt9cm8e.execute-api.us-east-1.amazonaws.com/Prod/pay-callback">
    <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>
   <Say language="ja-JP" voice="Polly.Mizuki">990円の支払いが完了しました。ご利用ありがとうございました。</Say>
</Response>`;

    // 電話をかける処理
    try {
      const responseData = await client.calls.create({
        to: phoneNumber, //コール先の番号
        from: twilioConfig.YOUR_TWILIO_NUMBER, // 取得したtwilioの番号.
        url: 'http://twimlets.com/echo?Twiml=' + querystring.escape(twiml)
      })
      console.log(responseData.from)
      const { from } = responseData
      const messages = [
        from ? `${from}から` :'',
        'あなたの電話番号に決済の電話をコールします。',
        '電話の案内に従って決済をおこなってください。'
      ].join('')
      return handlerInput.responseBuilder
        .speak(messages)
        .getResponse();
    } catch (e) {
      console.log(e)
      const speechText = 'すみません。カードの処理に失敗しました。ログを確認して再度お試しください。';
      return handlerInput.responseBuilder
        .speak(speechText)
        .getResponse();
    }
  }
}
```

あとはgitで変更を保存することで、スキルがAlexaアカウントに紐付いた電話番号を利用するようになります。

### 電話番号の利用を許可する方法

テスト画面で「電話決済で決済して」のように実行すると、以下のように「連絡先の利用が許可されていません。アレクサアプリの設定を変更して下さい。」という返答が返ってきます。これはスキルが連絡先情報の利用許可を得ていないためです。

alexa.amazon.co.jpにスキルカードが表示されています。

<img width="1257" alt="スクリーンショット 2019-02-03 22.09.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/e60c5c8b-5c22-e84e-521a-b0c424e753b9.png">

[許可をアップデート]をクリックします。

<img width="1010" alt="スクリーンショット 2019-02-03 22.10.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/5747ca1b-d3f5-b37b-b6bc-7a095d53bb9b.png">

[設定]をクリックします。

<img width="1040" alt="スクリーンショット 2019-02-03 22.11.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/03cf6600-4f09-7319-390e-dcdc8763b6dd.png">

[アクセス権限を管理]をクリックします。

<img width="851" alt="スクリーンショット 2019-02-03 22.11.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/3cf6af46-4049-2a4d-e8ce-d11e7b6dcd15.png">

[携帯電話番号]をオンにして[アクセス権限を保存]をクリックします。

この状態で再度テスト画面で「電話決済で決済して」と試してみましょう。

無事電話がかかれば成功です。

## Advanced
最後まで完走して、時間が余っている方はぜひチャレンジしてください。

- 決済結果をDynamoDBに保存する
- 決済結果に応じて次回からのAlexaの発話を変更する
- Twilio Payの価格を動的に変更する
- 実際のスキルとしてどう利用するか考えてTwitterに投稿する
- Lambda Layerを使う

## 片付け
月額の課金が発生するサービスが含まれています。
必ず最後に使用したサービスを終了させてください。

### Stripeアカウント
Stripeは「本番環境にてクレジットカード決済が実行された場合」に課金されます。
テスト環境のみであれば課金されることはありませんが、今後も使う予定がない場合は、https://dashboard.stripe.com/account/data から解約が可能です。

### Twilio
Twilio Payは決済が成功した場合のみ課金される仕組みのため、使わない分には請求は発生しません。
ただし購入した電話番号については月額の料金が発生します。

左側のメニューから[Phone Numbers]をクリックします。
![スクリーンショット 2019-02-21 17.45.31.png](https://qiita-image-store.s3.amazonaws.com/0/23936/27a0ca75-4165-f49a-1a2c-a3bb9025f23e.png)

[アクティブな電話番号]に表示されている電話番号をクリックし、ページ下部にある[この電話番号をリリースする]をクリックしましょう。
![スクリーンショット 2019-02-21 17.58.31.png](https://qiita-image-store.s3.amazonaws.com/0/23936/44a29517-747b-e6c8-9bfe-38ef762aae64.png)

確認画面が表示されますので、[番号をリリースする]をクリックします。
![スクリーンショット 2019-02-21 17.59.36.png](https://qiita-image-store.s3.amazonaws.com/0/23936/c31c1fcb-9549-ebd2-74a8-e959beaefd97.png)

※なお、Twilioについては電話番号購入時に課金が発生します。
 無料のトライアル枠を超えて利用されている場合にはご注意ください。

### AWS / Alexa
CodeStarで管理していますので、CodeStarプロジェクトを削除するだけでOKです。

CodeStarプロジェクト詳細画面の左メニューから[プロジェクト]を選択します。
![スクリーンショット 2019-02-21 18.06.01.png](https://qiita-image-store.s3.amazonaws.com/0/23936/732568bb-9849-3a21-494e-3cd2c21b461c.png)

ページ下部に[プロジェクトを削除する]というボタンがありますので、クリック後に必要な情報を入力して削除しましょう。
CloudFormation経由で各種リソースを削除します。削除が完了するまで数十分程度かかる場合がありますのでご了承ください。

※DynamoDBなどを手動で作成された方は、そちらの削除もお忘れないようにお願いします。

## 困ったときは・・・
### CodeStarのプロジェクト作成が失敗する
ログインしているAWSアカウントの権限が不足している可能性があります。
Administrator Accessのポリシーが付与されたアカウントで再度トライしてください。

### Cloud9がIDEのリストにない
ap-northeast-1(東京)など、Cloud9がサポートされていない地域でプロジェクトを作成してる可能性があります。
us-east-1(バージニア北部)にて再度作成してください。

### Alexaスキルが自分のAlexaアプリに表示されない
Alexaスキル開発には、日本人限定のハマりスポットがあります。
[Alexa 開発者アカウント作成時のハマりどころ](https://developer.amazon.com/ja/blogs/alexa/post/9f852a38-3a44-48bd-b78f-22050269d7c7/hamaridokoro)を確認してください。

### Lambdaがうまく動いていないっぽい
CloudWatch Logsでデバッグしましょう。
ロググループは[/aws/lambda/awscodestar-XXX]という命名規則ですので、[/aws/lambda/awscodestar]をフィルタに入れることである程度絞り込めます。

![スクリーンショット 2019-02-21 18.16.03.png](https://qiita-image-store.s3.amazonaws.com/0/23936/4441bee7-e7af-b4aa-ad84-22c2df0aa5c5.png)

### Twilio Payの決済に失敗する
本物のカード番号を入れていませんか？
Stripeの仕組み上、テストアカウントでは本物のカード番号を入力できません。

使用できるカード番号は、https://stripe.com/docs/testing#cards を確認してください。

## Note

### CodeStarでAlexaスキルを開発・運用するメリット・デメリット

#### メリット
- AWS側で一元管理できる
- CI / CDパイプラインやコラボレーション環境がオールインワンで立ち上がる
- AlexaスキルとバックエンドをCloudFormation（SAM）でコード管理できる

#### デメリット
- 対話モデルなどもコード管理されるため、Alexa開発コンソールで変更できない（しても上書きされる）
- フォルダ構成が異なるため、ASK-CLIとの併用も簡単ではない
- 無料枠を超えると、Cloud9 / Code XXXシリーズなどの利用料金が発生する

#### CodeStarでのAlexaスキルを推奨するケース
- チームでのスキル開発・運用を考えている
- CloudFormation / SAMを扱いなれている
- リモートで作業することが多く、どこからでもスキルを更新したい
- テストとビルドを自動化したい

#### CodeStarでのAlexaスキルを推奨しないケース
- 個人でさっさと作りたい -> Hosted Skill
- 複数のスキルを量産したい(パイプラインが増えるので、課金されやすい) -> ASK CLIのcloneコマンドやServerless Framework
- 実機テスト以外特に予定していない -> 好みに応じて
- Alexa開発コンソール / ASK CLI / Serverless Frameworkを使いたい -> 好みに応じて