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 売りあがってる~)

Roslyn Script によるコード生成「Scripty」を試用

T4 以外でのコード生成を調べていた時に、「Scripty」という Roslyn で動くコード生成のライブラリがあったので、メモ。

基本的な使い方は、以下のドキュメントから分かります。

daveaglick/Scripty: Tools to let you use Roslyn-powered C# scripts for code generation

Dave Glick - Announcing Scripty

記述されているように、特定の NuGet パッケージを取得し、Visual Studio Extension をインストールします。 Roslyn Syntax API でプロジェクトファイルにアクセスできるようになっています。

Sample

今回お試しとして、ASP.NET MVC 5 のプロジェクト内にある「**Controller.cs」クラス名と、そのコンストラクタの引数の型名を列挙するスクリプトを書いてみました。

これで実行すると、次のような .cs ファイルが生成されます(コメントだけ書いてありますが)。

//Controller Class Name: HomeController 
//Parameter Type Name: IUserService
//Controller Class Name: PersonController 
//Parameter Type Name: IUserService

参照: