Compartir vía

Proporcionar compras desde la aplicación con Digital Goods API

  • Artículo

Si la aplicación web progresiva (PWA) aparece en Microsoft Store, puede proporcionar productos y suscripciones desde la aplicación mediante digital goods API y la API de solicitud de pago.

Digital Goods API

Digital Goods API es una interfaz entre la aplicación PWA y Microsoft Store. Digital Goods API admite:

  • Consultar los detalles de un elemento digital desde el back-end de Microsoft Store, como el nombre, la descripción y el precio regional del elemento.
  • Consumo o confirmación de compras.
  • Comprobar los elementos digitales que actualmente son propiedad del usuario.
  • Comprobar el historial de compras del usuario.

Vea:

API de solicitud de pago

La API de solicitud de pago controla la transacción de pago real cuando un usuario realiza una compra. La API de solicitud de pago usa los detalles del artículo que proporciona Digital Goods API para realizar la compra desde la aplicación mediante el método de pago de facturación que el usuario haya configurado en Microsoft Store.

Vea:

Habilitación de Digital Goods API

Digital Goods API está disponible actualmente para realizar pruebas en Microsoft Edge. Para probar la API, use cualquiera de las siguientes maneras:

A continuación se detallan los detalles.

Uso de un canal de versión preliminar compatible de Microsoft Edge en la máquina de desarrollo

Para probar Digital Goods API localmente, antes de implementar la aplicación en producción, ejecute Edge Dev o Edge Canary. Estas versiones preliminares de Edge tienen habilitada la API, como parte de un experimento en ejecución.

Para descargar un canal de vista previa (insider) de Microsoft Edge, consulte Convertirse en microsoft edge insider.

Regístrese para la prueba de origen y, a continuación, use el token en el sitio web.

Para probar Digital Goods API en producción, con los usuarios, use un token de prueba de origen. Con este enfoque, cuando los usuarios descarguen su PWA desde Microsoft Store, tendrán habilitada la API.

Vea:

Comprobación de si Digital Goods API está disponible

Para detectar si ha habilitado correctamente la API en el sitio web mediante el token de prueba de origen, compruebe si el getDigitalGoodsService método existe en el window objeto :

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

Vea también:

Conexión al servicio de facturación de Microsoft Store (window.getDigitalGoodsService método)

Use el getDigitalGoodsService método del window objeto para conectarse al servicio de facturación de Microsoft Store. Se devuelve una interfaz DigitalGoodsService .

Digital Goods API se diseñó para ser compatible con varios exploradores y tiendas digitales, de forma similar a como la API de solicitud de pago es independiente del explorador y se puede usar con diferentes proveedores de pago. Para recuperar una instancia del servicio para la facturación de Microsoft Store, pase la cadena "https://store.microsoft.com/billing" como método de pago al getDigitalGoodsService método .

Si el método produce un error, el método de pago facturación de Microsoft Store no está disponible (por ejemplo, cuando el usuario accede a su PWA a través del explorador). Como alternativa, considere la posibilidad de proporcionar un método de pago diferente para las transacciones.

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;
}

Este método de getDigitalGoodsService("https://store.microsoft.com/billing") pago solo está disponible para una PWA instalada desde Microsoft Store, en Windows. No se necesita ninguna otra configuración.

Vea también:

Consulta de detalles del elemento (getDetails método)

Use el getDetails método de la DigitalGoodsService interfaz para consultar los detalles del elemento.

Después de conectar el servicio De bienes digitales a Microsoft Store, puede usar la API para acceder a la información de productos y compras. El getDetails método le permite obtener información sobre los elementos que ha configurado en el Centro de partners. Muestra información como el título, la descripción y el precio del producto en la interfaz de usuario de la aplicación, para que el usuario sepa lo que está disponible para la compra.

El getDetails método toma una lista de identificadores de elemento, que corresponden a los identificadores de producto de los productos y suscripciones desde la aplicación que creó en el Centro de partners.

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);
}

La secuencia devuelta itemDetails puede estar en cualquier orden y es posible que no incluya un elemento si el elemento no existe en el servidor (es decir, si no hay una correspondencia 1:1 entre la lista de entrada y la lista de salida).

El identificador de elemento es una cadena que representa la clave principal de los elementos. En Microsoft Store, el identificador de elemento es InAppOfferToken. No hay ninguna función para obtener una lista de identificadores de elemento; los identificadores de elemento deben codificarse de forma rígida en el código de cliente o capturarse desde su propio servidor (el servidor del desarrollador).

El elemento es price un PaymentCurrencyAmount objeto que contiene el precio actual del elemento en la región y la moneda actuales del usuario. price está diseñado para dar formato a la configuración regional actual del usuario mediante Intl.NumberFormat, como se muestra anteriormente.

Recursos adicionales

Especificación de Digital Goods API

desarrollo de Windows App:

W3C:

MDN:

Compra de un artículo (PaymentRequest constructor y show método)

Una vez que los productos y los detalles se muestren al usuario, implemente el flujo de compra mediante la API de solicitud de pago. Para comprar un elemento, primero construya una solicitud que contenga los detalles del artículo mediante el PaymentRequest constructor y, a continuación, use el show método del PaymentRequest objeto para iniciar el flujo de pago.

Cuando se combina con Digital Goods API, el único parámetro de entrada necesario para el PaymentRequest constructor es methodData. En el parámetro del constructor:

  • En el supportedMethods miembro, especifique Facturación de Microsoft Store como método de pago, como la cadena 'https://store.microsoft.com/billing'.
  • En el data miembro , pase como itemIdsku.
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 }
  }
]);

A continuación, llame al show método del PaymentRequest objeto para iniciar el flujo de pago:

const response = await request.show();

Esto muestra la interfaz de usuario de compra de la Tienda al usuario, donde el usuario puede ver detalles sobre el producto que está intentando comprar. Durante este proceso, la sesión actual del explorador se deshabilita temporalmente hasta que se complete el flujo de compra. El usuario puede cancelar la transacción o continuar con el pago:

  • Si el usuario cancela el pago, la promesa devuelta por el show método se rechazará con un error.

  • Si el usuario paga y completa correctamente la compra, la promesa se resolverá con .PaymentResponse En la details propiedad de la respuesta de pago, se devuelve un token de compra.

Vea también:

Consumo de una compra (consume método)

Use el consume método de la DigitalGoodsService interfaz para consumir una compra.

Una compra consumible es una compra diseñada para ser comprada varias veces. Una compra consumible normalmente debe marcarse como "consumida" antes de que el usuario pueda volver a comprarla. Un ejemplo de compra consumible es un powerup en el juego que hace que el jugador sea más fuerte durante un breve período de tiempo.

Para marcar una compra como "consumida", use el consume método :

digitalGoodsService.consume(purchaseToken);

Vea también:

Comprobación de compras existentes (listPurchases método)

Use el listPurchases método de la DigitalGoodsService interfaz para comprobar las compras existentes. Este método devuelve información sobre las compras existentes del usuario. Este método permite a un cliente obtener una lista de elementos que el usuario posee o compra actualmente. Esto puede ser necesario para hacer una de las siguientes acciones:

  • Compruebe si hay derechos, como si una suscripción, un código promocional o una actualización permanente están activos.

  • Recuperarse de interrupciones de red durante una compra, como cuando el artículo se compra pero aún no se ha confirmado.

El listPurchases método devuelve identificadores de elemento y tokens de compra. Antes de conceder un derecho, debe comprobar el identificador de elemento devuelto o el token de compra devuelto mediante una API directa de desarrollador a proveedor, como se muestra a continuación:

const purchaseList = await digitalGoodsService.listPurchases();

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

El listPurchases método no devuelve productos consumidos ni suscripciones expiradas.

Vea también:

Obtención del historial de compras (listPurchaseHistory método)

Use el listPurchaseHistory método de la DigitalGoodsService interfaz para obtener el historial de compras.

Este método devuelve una lista de PurchaseDetails que contiene y purchaseTokenitemId para cada compra. La lista incluye la compra más reciente realizada por el usuario para cada artículo, independientemente de si la compra ha expirado, cancelada o consumida.

const purchaseList = await digitalGoodsService.listPurchaseHistory();

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

Vea también:

Recursos adicionales

Pruebas de origen:

GitHub:

MDN:

W3C:

desarrollo de Windows App: