kun432's blog

Alexaなどスマートスピーカーの話題中心に、Voiceflowの日本語情報を発信してます。たまにAWSやkubernetesなど。

〜スマートスピーカーやVoiceflowの記事は右メニューのカテゴリからどうぞ。〜

VoiceflowでAmazon Payをやってみる①

f:id:kun432:20210313005910p:plain

前回、Voiceflowで音声パーミッションを実装してみました。

実はこれ、元々はVoiceflowの公式チュートリアルにあるAmazon Payのデモをいじってて、Skill Connectionsの仕組みが使えるなら音声パーミッションもできるはず、ということで、Amazon Payよりもシンプルに説明しやすそうだったので、作ってみたのでした。

前回もお伝えしたとおり、音声パーミッションもAmazon Payも、Skill Connectionsと似た仕組みを使っており、VoiceflowではDirective/Event Stepを使うとこれを実現できます。ということで、数回に分けてVoiceflowでAmazon Payの実装について説明します。

Amazon Payについては、私もあまり詳しくないので、実際に実装される場合はドキュメント等をきちんと確認いただくことをおすすめします。

前回の音声パーミッションの仕組みを理解しておくと、Amazon Payもわかりやすいかと思いますので、あわせてご覧ください。

前提条件

  • Amazon Payの販売事業者アカウントを持っていること
    • Amazon Payの販売事業者アカウント開設は現在法人のみとなっています。予めご了承ください。
    • テストではsandboxを使います。
  • 音声パーミッション同様、VoiceflowでAmazon Payと連携させるには"Event Step"が必要です。
    • Event Stepは開発者向けベータとして提供されており、通常は表示されません。
    • 利用したい場合は、Voiceflowログイン後に出てくるIntercomサポート(右下の青いアイコン)に連絡して、Event Stepを有効にしてもらいたい旨を伝えれば良いと思います。

Amazon Payについて

まず、最初にAmazon Payについてです。Alexaでマネタイズする方法としては「スキル内課金」もあります。スキル内課金とAmazon Payの違いはなんでしょうか?ロボスタさんの以下の記事がとてもわかりやすいと思います。

ざっくりまとめると、こういう感じになると思います。

  • 購入する商品が違う
    • Amazon Payは「スキル外」で実際のモノやサービスを販売する
      • 例:ECサイト、出前、寄付
      • デジタルコンテンツも可能
      • スキルはあくまでも商品の購入・販売を行うインタフェースで、Amazon Payが支払いを仲介するインタフェース
    • スキル内課金は「スキル内」のデジタルなコンテンツを販売する
      • 例:スキルのプレミアム機能
        • 1回購入したら永遠に使える
        • もしくは、月額で継続する限り利用できる
      • ゲームなどのアイテム
        • 消費したら減る、購入すれば増やせる
      • スキル内の付加機能を販売、スキルを通じて利用するもの
        • すべてがスキル内で完結、スキルの外でやり取りは行わない

デジタルコンテンツについてはわかりにくいかもですね。個人的には「スキルと関係ないものをスキルを通じて売る=実際のモノやサービス、場合によってはデジタルもありうる」か「スキルに準じたものをスキル内で売る=デジタルコンテンツのみ」か、の違いだと考えています。

そして、もう一つ、手数料も異なります。

  • Amazon Pay
    • デジタル以外:4%
    • デジタル:4.5%
  • スキル内課金
    • 30%、つまり開発者に入るのは70%

スキル内課金の手数料は結構大きいですね・・・

このように商品により選択する手法が変わり、手数料等も変わります。Alexaスキルでのマネタイズを検討している方は、このあたりの違いについて注意する必要がありますね。詳細はドキュメントをご覧ください。

AlexaスキルにおけるAmazon Payの実装

AlexaスキルへのAmazon Payの実装は、上記の公式のドキュメントにまとまっており、以下の2つのAPIを使います。

  • Setup API
  • Charge API

これについてかんたんに説明します。

Setup API

Setup APIは、「決済の準備」を行うためのAPIです。具体的には、

  • 販売事業者情報(出品者ID・マーチャントID、つまり提供者側)を送信する
  • 国・通貨情報(日本なら「円」)を送信する

などを送信して、実際の支払いの準備を行います。準備ができると、Billing Agreement IDを含めた「決済オブジェクト」が返されます。後述するCharge APIにはこのBilling Agreement IDなどの情報が必要になります。

また、このときに、

  • ユーザの配送先情報を要求する(モノを配送しないといけない場合に送料を計算したりするのに使う)
  • テストモードとして処理を行う

などを指定することもできます。

Charge API

Charge APIは、「実際の決済」を行うためのAPIです。Setup APIで取得したBilling Agreement IDなどの情報を使って、実際の決済処理をAmazon Payに依頼します。具体的には、

  • 決済の金額
  • 販売事業者側で管理する注文番号
  • 販売店名(Alexaアプリのアクティビティやメール等で使用されるようです)

などを送信して、実際の請求処理を行います。利用者側の支払に関する情報(クレジットカード番号など)は取得できませんし、そもそも必要ありません。

まずは、APIを2つ使わないといけないということを頭に入れておけばよいかと思います。

手順

Amazon Payの設定

まず、Amazon Pay側の設定です。Amazon Payのセラーセントラルにアクセスしてログインします。

f:id:kun432:20210625011514p:plain

ログインしたら、画面上部のドロップダウンから「テスト環境」(Sandboxとも言います)を選択します。

f:id:kun432:20210625012158p:plain

テスト環境に切り替わったら、テスト用アカウントをクリックします。

f:id:kun432:20210625012519p:plain

テスト用アカウントがなければ作成します。

f:id:kun432:20210625012436p:plain

テストアカウントの作成画面では、左のフォームに名前、メールアドレス、パスワードを入力します。メールアドレスは決済時にメールが送信されるため、ダミーではなくきちんと存在するものにしましょう。おすすめはgmailで+エイリアスを使うのが良いと思います。下のほうにあるお届先住所は予めダミーのものが用意されています。後ほど変更もできますし追加もできますので、一つだけチェックボックスをつけておけば良いと思います。入力したら、「アカウント作成」をクリックします。

f:id:kun432:20210625014230p:plain

あと余談ですが、真ん中にクレジットカード情報が表示されていますが、これはテスト用のクレジットカード情報です。実際に決済されることはありません。

テストアカウントが作成されました。

f:id:kun432:20210625015022p:plain

わかりやすいようにお届け先住所を変更しておきましょう。下の方に表示されている住所の「編集」をクリックします。

f:id:kun432:20210625032339p:plain

適当な住所に設定して「Save」で保存します。

f:id:kun432:20210625032509p:plain

Voiceflowでデモプロジェクトのインポート

今回はチュートリアル形式ではなく、デモスキルでポイントを絞って解説しようと思います。デモはこちらからダウンロードできます(右クリックでダウンロード。)

https://raw.githubusercontent.com/kun432/voiceflow-samples/main/amazon-pay/amazon-pay-demo-jp.vf

ダウンロードした.vfファイルをVoiceflowでインポートします。右上のimportアイコンをクリックして、さきほどダウンロードした.vfファイルを選択します。

f:id:kun432:20210625015420p:plain

インポートが成功したらプロジェクトを開きます。

f:id:kun432:20210625015646p:plain

以下のようなプロジェクトが表示されればOKです。

f:id:kun432:20210625015923p:plain

VoiceflowプロジェクトのAmazon Pay設定

Voiceflowプロジェクト側でいくつかAmazon Payの設定を行う必要があります。「Step1 スキルの設定」の下にあるブロックの3つ目、「出品者ID・テスト用メールアドレスの設定 」をクリックします。

f:id:kun432:20210625020433p:plain

ここで、Amazon Payの出品者ID(マーチャントIDとも言います)とテスト用メールアドレスを、それぞれ変数sellerIdsandboxCustomerとして設定しています。これをAmazon Payのセラーセントラルから持ってきましょう。

f:id:kun432:20210625020739p:plain

出品者IDは左上のハンバーガーメニューのアイコンをクリックします。

f:id:kun432:20210625021313p:plain

インテグレーション → MWS Access Key をクリックします。

f:id:kun432:20210625021406p:plain

ここで出品者IDが表示されます。これをコピーして、VoiceflowのsellerIdのところにペーストします。

f:id:kun432:20210625022200p:plain

テスト用メールアドレスは、こちらも左上のハンバーガーメニューから、インテグレーション → テストアカウント をクリック。

f:id:kun432:20210625021907p:plain

先ほど作成したテスト用アカウントのメールアドレスが表示されていると思いますのでコピーして、VoiceflowのsandboxCustomerのところにペーストします。

f:id:kun432:20210625022117p:plain

以下のようになればOKですね。

f:id:kun432:20210625022345p:plain

ではAlexa開発者コンソールにアップロードしましょう。右上のアップロードアイコンをクリックします。

f:id:kun432:20210625022638p:plain

アップロードが完了すると、Alexa開発者コンソールからスキルIDが発行されます。このスキルIDが今度はAmazon Pay側に必要となります。スキルIDはAlexa開発者コンソールで確認ができますが、VoiceflowでもLaunchタブからスキルIDを確認することができます。

f:id:kun432:20210625022839p:plain

青い部分の"More Info"をクリック。

f:id:kun432:20210625023120p:plain

"amzn1.ask.skill.〜"で始まる文字列がスキルIDです。これをコピーしておきます。

f:id:kun432:20210625023129p:plain

Amazon PayとAlexaスキルの紐付け

次に、Amazon Pay側でAlexaスキルのスキルIDを登録します。これにより、AlexaスキルからAmazon Payが利用可能になります。

Amazon Payのセラーセントラルで、ハンバーガーメニューから、インテグレーション→インテグレーションセントラルをクリックします。

f:id:kun432:20210625023515p:plain

インテグレーションチャネルのところで「Alexa」をクリックします。

f:id:kun432:20210625023612p:plain

設定項目がAlexaスキル向けに変わりました。「Amazon Payを既存のスキルに接続する」を選択して、下の「スキル設定へ移動」をクリックします。

f:id:kun432:20210625023844p:plain

Alexaスキル向けAmazon Pay、という画面が表示されます。下の方にある「Alexaスキルに接続」をクリックします。

f:id:kun432:20210625023945p:plain

ここでスキルIDをペーストして、Amazon PayおよびAlexaの利用規約に同意のチェックを入れて、「接続」をクリックします。

f:id:kun432:20210625024214p:plain

スキルが表示されれば、Amazon Payとの接続が完了し、スキルからAmazon Payが利用できるようになっています。これで設定は終了です。

f:id:kun432:20210625024345p:plain

テスト

まずはどのような感じで動くかを見てみましょう。Alexa開発者コンソールでデモスキルのテストを行ってみます。「ブックストアのデモ」という呼び出し名にしてあります。

f:id:kun432:20210625205422p:plain

はい、購入が完了しました。テスト用メールアドレスのメールボックスを見ると以下のようなメールが届いていると思います。

f:id:kun432:20210625211133p:plain

そしてAlexaアプリのアクティビティも見てみてください。注文結果が届いていると思います。

f:id:kun432:20210625211354p:plain

次に、Amazon Pay側で確認してみましょう。セラーセントラルの左上ハンバーガーメニューから、注文→取引管理をクリックします。

f:id:kun432:20210625205830p:plain

はい、ちゃんと請求が処理されていますね。

f:id:kun432:20210625210100p:plain

まとめ

VoiceflowでAmazon Payが実際に動作するところを体験いただけたかと思います。次回は実装について解説したいと思います。