次の方法で共有

デジタルグッズ API を使用してアプリ内購入を提供する

  • [アーティクル]

プログレッシブ Web アプリ (PWA) が Microsoft Store に表示されている場合は、Digital Goods API と Payment Request API を使用して、アプリ内製品とサブスクリプションを提供できます。

デジタルグッズ API

Digital Goods API は、PWA アプリと Microsoft Store の間のインターフェイスです。 Digital Goods API では、次のサポートがサポートされています。

  • アイテムの名前、説明、地域の価格など、Microsoft Store バックエンドからデジタル アイテムの詳細を照会する。
  • 購入の使用または確認。
  • ユーザーが現在所有しているデジタルアイテムを確認します。
  • ユーザーの購入履歴を確認します。

参照:

支払い要求 API

支払い要求 API は、ユーザーによる購入時の実際の支払トランザクションを処理します。 支払い要求 API は、Digital Goods API が提供するアイテムの詳細を使用して、ユーザーが Microsoft Store で設定した課金支払い方法を使用してアプリ内購入を行います。

参照:

デジタル商品 API を有効にする

デジタルグッズ API は現在、Microsoft Edge でのテストに使用できます。 API をテストするには、次のいずれかの方法を使用します。

詳細は以下のとおりです。

開発マシンで Microsoft Edge のサポートされているプレビュー チャネルを使用する

Digital Goods API をローカルでテストするには、アプリを運用環境にデプロイする前に、Edge Dev または Edge Canary を実行します。 これらのプレビュー バージョンの Edge では、実行中の実験の一環として API が有効になっています。

Microsoft Edge のプレビュー (Insider) チャネルをダウンロードするには、「 Microsoft Edge Insider になる」を参照してください。

配信元試用版に登録し、Web サイトでトークンを使用する

運用環境で Digital Goods API をユーザーと一緒にテストするには、配信元の試用版トークンを使用します。 この方法では、ユーザーが Microsoft Store から PWA をダウンロードすると、API が有効になります。

参照:

デジタル商品 API が使用可能かどうかを確認する

配信元の試用版トークンを使用して Web サイトで API が正しく有効になっているかどうかを検出するには、getDigitalGoodsService メソッドが window オブジェクトに存在するかどうかをチェックします。

if ('getDigitalGoodsService' in window) {
  // The Digital Goods API is supported.
} else {
  console.log('DigitalGoodsService is not available.');
  // Use another payment method.
}

関連項目:

Microsoft Store 課金サービスへの接続 (window.getDigitalGoodsService 方法)

window オブジェクトの getDigitalGoodsService メソッドを使用して、Microsoft Store 課金サービスに接続します。 DigitalGoodsService インターフェイスが返されます。

Digital Goods API は、支払い要求 API がブラウザーに依存せず、さまざまな支払いプロバイダーで使用できるのと同様に、さまざまなブラウザーやデジタル ストアと互換性を持つよう設計されています。 Microsoft Store Billing のサービスのインスタンスを取得するには、支払い方法として "https://store.microsoft.com/billing" 文字列を getDigitalGoodsService メソッドに渡します。

メソッドがエラーをスローした場合、Microsoft Store 課金支払い方法は使用できません (ユーザーがブラウザーを介して PWA にアクセスしている場合など)。 または、トランザクションに別の支払い方法を提供することを検討してください。

if (window.getDigitalGoodsService === undefined) {
  // The Digital Goods API isn't supported in this context.
  return;
}
try {
  const digitalGoodsService = await window.getDigitalGoodsService("https://store.microsoft.com/billing");
  // Use the service here.
  ...
} catch (error) {
  // The preferred service provider is not available.
  // Use a web-based payment flow instead.
  return;
}

この支払い方法 getDigitalGoodsService("https://store.microsoft.com/billing") は、Microsoft Store から Windows にインストールされている PWA に対してのみ使用できます。 他の設定は必要ありません。

関連項目:

項目の詳細の照会 (getDetails メソッド)

DigitalGoodsService インターフェイスの getDetails メソッドを使用して、アイテムの詳細を照会します。

デジタル商品サービスを Microsoft Store に接続した後、API を使用して製品と購入情報にアクセスできます。 getDetails メソッドを使用すると、パートナー センターで設定した項目に関する情報を取得できます。 製品のタイトル、説明、価格などの情報をアプリ UI に表示して、ユーザーが購入できる内容を把握できるようにします。

getDetails メソッドは、パートナー センターで作成したアプリ内製品とサブスクリプションの製品 ID に対応する項目 ID の一覧を取得します。

const itemDetails = await digitalGoodsService.getDetails(['shiny_sword', 'gem', 'monthly_subscription']);

for (item of itemDetails) {
  const priceStr = new Intl.NumberFormat(
      locale,
      {style: 'currency', currency: item.price.currency}
    ).format(item.price.value);

  // Do something with the item's data, such as displaying it in the PWA's UI.
  displayProductItem(item.itemId, item.title, priceStr, item.description);
}

返される itemDetails シーケンスは任意の順序で指定できます。また、アイテムがサーバー上に存在しない場合 (つまり、入力リストと出力リストの間に 1 対 1 の対応がない場合) には項目が含まれない場合があります。

項目 ID は、項目の主キーを表す文字列です。 Microsoft Store では、アイテム ID が InAppOfferToken。 項目 ID の一覧を取得する関数はありません。アイテム ID は、クライアント コードでハードコーディングするか、独自のサーバー (開発者のサーバー) からフェッチする必要があります。

アイテムの price は、ユーザーの現在の地域と通貨のアイテムの現在の価格を含む PaymentCurrencyAmount です。 priceは、上に示すように、Intl.NumberFormatを使用してユーザーの現在のロケール用に書式設定されるように設計されています。

関連項目

デジタルグッズ API の仕様

Windows App開発:

W3C:

MDN:

アイテムの購入 (コンストラクターとメソッドPaymentRequestshow)

製品と詳細がユーザーに表示されたら、支払い要求 API を使用して購入フローを実装します。 アイテムを購入するには、まず、PaymentRequest コンストラクターを使用してアイテムの詳細を含む要求を作成してから、PaymentRequest オブジェクトの show メソッドを使用して支払フローを開始します。

Digital Goods API と組み合わせると、 PaymentRequest コンストラクターに必要な入力パラメーターは methodDataのみです。 コンストラクターのパラメーターで、次の手順を実行します。

  • supportedMethods メンバーで、支払い方法として Microsoft Store Billing を指定し、文字列として'https://store.microsoft.com/billing'。
  • data メンバーで、itemIdをskuとして渡します。
const details = await digitalGoodsService.getDetails(['monthly_subscription']);
const item = details[0];

const request = new PaymentRequest([
  {
    supportedMethods: 'https://store.microsoft.com/billing',
    data: { sku: item.itemId }
  }
]);

次に、PaymentRequest オブジェクトの show メソッドを呼び出して、支払フローを開始します。

const response = await request.show();

これにより、ストア購入 UI がユーザーに表示されます。ここで、ユーザーは購入しようとしている製品に関する詳細を表示できます。 このプロセス中、現在のブラウザー セッションは、購入フローが完了するまで一時的に無効になります。 ユーザーは、トランザクションを取り消すか、支払いを続行できます。

  • ユーザーが支払いを取り消した場合、 show メソッドによって返された Promise はエラーで拒否されます。

  • ユーザーが正常に支払いを行い、購入を完了した場合、Promise は PaymentResponseで解決されます。 支払い応答の details プロパティで、購入トークンが返されます。

関連項目:

購入の使用 (consume 方法)

購入を使用するには、DigitalGoodsService インターフェイスの consume メソッドを使用します。

消耗品購入とは、複数回購入するように設計された購入です。 コンシューマブル購入は、通常、ユーザーが購入を再度購入する前に、"消費済み" としてマークする必要があります。 消耗品購入の例としては、ゲーム内でのパワーアップがあり、プレイヤーは短期間強くなります。

購入を "消費済み" としてマークするには、 consume メソッドを使用します。

digitalGoodsService.consume(purchaseToken);

関連項目:

既存の購入の確認 (listPurchases 方法)

既存の購入をチェックするには、DigitalGoodsService インターフェイスの listPurchases メソッドを使用します。 このメソッドは、ユーザーの既存の購入に関する情報を返します。 このメソッドを使用すると、クライアントはユーザーが現在所有または購入しているアイテムの一覧を取得できます。 これは、次のいずれかの操作を行うために必要な場合があります。

  • サブスクリプション、プロモーション コード、永続的なアップグレードがアクティブかどうかなど、エンタイトルメントを確認します。

  • アイテムを購入してもまだ確認されていない場合など、購入中のネットワークの中断から復旧します。

listPurchases メソッドは、アイテム ID と購入トークンを返します。 権利を付与する前に、次に示すように、開発者からプロバイダーへの直接 API を使用して、返されたアイテム ID または返された購入トークンを確認する必要があります。

const purchaseList = await digitalGoodsService.listPurchases();

for (const purchase of purchaseList) {
  // Handle the purchase data in your PWA.
  verifyAndGrantEntitlement(purchase.itemId, purchase.purchaseToken);
}

listPurchases メソッドは、使用済み製品や期限切れのサブスクリプションを返しません。

関連項目:

購入履歴の取得 (listPurchaseHistory 方法)

購入履歴を取得するには、DigitalGoodsService インターフェイスの listPurchaseHistory メソッドを使用します。

このメソッドは、購入ごとにitemIdとpurchaseTokenを含むPurchaseDetailsの一覧を返します。 この一覧には、購入の有効期限が切れているか、取り消されたか、消費されているかに関係なく、ユーザーがアイテムごとに行った最新の購入が含まれます。

const purchaseList = await digitalGoodsService.listPurchaseHistory();

for (const purchase of purchaseList) {
  // Handle the expired purchase data in your PWA.
  verifyAndCheckExpiredEntitlement(purchase.itemId, purchase.purchaseToken);
}

関連項目:

関連項目

配信元の試用版:

GitHub:

MDN:

W3C:

Windows App開発: