miso_soup3 Blog

主に ASP.NET 関連について書いています。

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

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

ドキュメント

概要

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

  • 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.csOnInvokeメソッドです。引数の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":
(略)
6. デプロイ

Bot Emulator 上でもある程度試すことができますが、実際に支払いを試したい場合は、Azure App Service 等にアップロードします。Web.config の LiveMode, StripeApiKey は状況に合わせて変更します。

最後に、支払いを試したときのスクショを貼って、終わりとします。

f:id:miso_soup3:20170809211920p:plain

f:id:miso_soup3:20170809211931p:plain

f:id:miso_soup3:20170809211952p:plain

f:id:miso_soup3:20170809212006p:plain

f:id:miso_soup3:20170809212023p:plain

f:id:miso_soup3:20170809212031p:plain (Stripe の Dashboard にて。\76 売りあがってる~)