Microsoft Bot Framework の支払い機能を試す

Microsoft Bot Framework の Payments 機能を試してみました。この機能は、Build 2017 で発表されたものです。概要と手順の補足を記載します。

ドキュメント

Request payment - Bot Framework | Microsoft Docs
- Starting Guide。この情報を参考に本エントリーを書いています。
BotBuilder-Samples/CSharp/sample-payments at master · Microsoft/BotBuilder-Samples
- C# のサンプル

概要

試してみて、以下のことが分かりました。

Bot Framework の支払い機能では、「Stripe」決済サービスと、Microsoft Seller Center のサービスを使っている。
- Microsoft Seller Center による決済 API は、Edge や UWP、Bot、Web 等で使える。Microsoft による Request Payment API の実装によるもの。
ユーザーは、Microsoft アカウントに紐づくクレジットカード情報を入力することになる（その場で登録することも可能）。
Stripe の UI が使えるわけではない（これは私が勝手に、Stripe のリッチな UI でカード情報が入力できたり、ApplePay が使えるのかと勘違いしていた、実際は使えない）。
Microsoft Seller Center と Bot Framework により、支払いフロー上の少なくとも3つのタイミング―「住所更新」「配送オプションの更新」「カード選択完了」をフックでき、そのタイミングに開発者はロジックを挿入できる。
- このタイミングでは、クレジットカード入力画面から、Bot Framework のバックエンドに HTTP Callback が行われる。
Microsoft Seller Center と、Stripe にはテストモードが用意されている。

手順

Request payment - Bot Framework | Microsoft Docs このドキュメントの手順によりサンプルを試すことができます。ここでは、補足事項を記載します。

1. Stripe アカウントを用意する

即時サインアップすることができました。

2. Microsoft Seller Center と Stripe アカウントを紐づける

Microsoft Seller Center にサインインし、先ほど用意した Stripe アカウントを紐づけます。私の場合は、紐づけようとしても「既に紐づけられてる」という旨のエラーメッセージが表示されその先に進めませんでした。が、1日経った後にもう一度試してみると無事接続できました。また、先の手順が記載されているドキュメントにて「US-base なアカウントのみ有効」というコメントがありますが、私の日本のアカウントでも大丈夫な模様でした。

3. Bot Framework のプロジェクトと、Bot Framework の登録を行う

基本的なことは、こちらのハンズオンの資料（satonaoki/help-desk-bot-lab-ja: ヘルプデスクボットのハンズオンラボ (Help Desk Bot Hands-on Lab)）で参照できます。 Visual Studio で C# なプロジェクトを用意し、Bot Framework のサイトに Bot を登録します。

プロジェクトは、BotBuilder-Samples/CSharp/sample-payments at master · Microsoft/BotBuilder-Samples　こちらのサンプルから DL してもよいですし、Bot Framework のプロジェクトテンプレートから作成してコードをコピペしてもよいです。GitHub のサンプルの方は、必要最低限の依存になっていますので、Web.config の編集だけで済むと思います。

Web.config は、次のように値を設定します。

<configuration>
  <appSettings>
    <add key="BotId" value="Bot" />
    <add key="MicrosoftAppId" value="***" />
    <add key="MicrosoftAppPassword" value="***" />

    <!--This flag indicates if pay method is in test mode or not.-->
    <add key="LiveMode" value="false" /> <!-- true/false -->
    <!-- mswallet merchantId-->
    <add key="MerchantId" value="***" /> 
    <add key="StripeApiKey" value="***" />

    <add key="InvalidShippingCountry" value="ZW" />
  </appSettings>

MicrosoftAppId、MicrosoftAppPassword
- Bot Framework のサイトから参照
LiveMode
- false にすると、Bot の支払いがテストモードであることを示します。
MerchantId
- Microsoft Seller Center の Dashboard から取得できる「MerchantId」を入力します
StripeApiKey
- Stripe のサイトから取得できる「API Key」を取得します。テストモードとそうでないときで Key が違うことに注意してください。テストモードにする場合は、Stripe の Dashboard の左下あたり「View test data」を有効にします。Key は、「API」メニューの「Secret key」の値です。

4. 金額を変えたい場合

金額を変更したい場合は、C# プロジェクトの方の「Services/CatalogService.cs」で「CatalogItem.Price」を、「Services/ShippingService.cs」で「PaymentShippingOption.Amount」の値を変更します。

5. その他コードについて

サンプルで表示される「Buy」ボタンのあるカードは、Hero タイプの Rich Card と、Payment タイプの CardAction のボタンで構成されています。ボタンには、商品情報（PaymentRequest）が JSON 形式で格納されています（下の図）。 f:id:miso_soup3:20170809213048p:plain

この「Buy」ボタンを押すと、「wallet.microsoft.com」にブラウザで遷移し、支払情報を入力する画面が表示されます。このとき、「住所更新」「配送オプションの更新」「カード選択完了」のタイミングで、wallet.microsoft.com から Bot Framework のバックエンドに対して HTTP Callback が実行されます。Callback 先は、C# プロジェクトのMessagesController.csのOnInvokeメソッドです。引数のinvokeでどのタイミングかを識別できます。Bot Emulator で試すと、Fiddler 等で HTTP Callback の中身を確認できます。次のコードはその中身の Body の例です。

POST http://localhost:3979/api/messages HTTP/1.1
Authorization: Bearer **
(略)

{"type":"invoke","name":"payments/update/shippingAddress","from":{"id":"ek5d48fcgd78"},"conversation":{"id":"a4941g4ldad8"},"relatesTo":{"bot":{"id":"mmmanb059a0di6ef"},"channelId":"emulator","conversation":{"id":"8m2id4fd6meg"},"serviceUrl":"http://localhost:1308","user":{"id":"default-user","name":"User"}},"value":{"id":"bc861179-46a5-4645-a249-7eba2a4d9846","shippingAddress":{"addressLine":
（略）