Cómo configurar una forma de pago

Una transacción de pago a través de pagos web comienza cuando se descubre tu app de pagos. Aprende a configurar una forma de pago y obtener tu app de pagos listas para que los comercios y clientes realicen pagos.

Para que se use con la API de Payment Request, una aplicación de pagos debe estar asociada con una identificador de la forma de pago. Comercios que desean realizar la integración con una aplicación de pagos utilizará el identificador de la forma de pago para indicarlo al navegador. Esta se explica cómo funciona el descubrimiento de aplicaciones de pago y cómo configurar tu a la app de pago para que un navegador lo descubra e invoque.

Si no conoces el concepto de pagos web o cómo funciona una transacción de pago mediante las apps de pago, lee primero los siguientes artículos:

Navegadores compatibles

Los pagos web constan de diferentes tecnologías y la asistencia depende del navegador.

Chromium Safari Firefox
Computadora de escritorio Android Computadora de escritorio Dispositivos móviles Computadoras de escritorio o dispositivos móviles
API de Payment Request
API de Payment Handler
App de pagos para iOS y Android ✔* ✔*

Cómo detecta un navegador una app de pagos

Todas las apps de pago deben proporcionar lo siguiente:

  • Identificador de la forma de pago basado en URLs
  • Manifiesto de la forma de pago (excepto cuando el identificador de la forma de pago es proporcionados por un tercero)
  • Manifiesto de la app web
Diagrama: Cómo un navegador descubre la app de pagos a partir de un identificador de forma de pago basado en URL

El proceso de descubrimiento comienza cuando un comercio inicia una transacción:

  1. El navegador envía una solicitud a la forma de pago identificador y las recuperaciones la forma de pago de Terraform.
  2. El navegador determina la aplicación web del manifiesto de la de la forma de pago y obtiene el manifiesto de la app web.
  3. El navegador determina si se inicia la aplicación de pagos del SO o app de pagos basada en la Web desde el manifiesto de la app web.

Las siguientes secciones explican en detalle cómo configurar tu propio método de pago, para que los navegadores puedan descubrirla.

Paso 1: Proporciona el identificador de la forma de pago

Una forma de pago identificador es una cadena basada en URL. Por ejemplo, el identificador de Google Pay es https://google.com/pay Los desarrolladores de apps de pagos pueden elegir cualquier URL como forma de pago identificador de método, siempre y cuando estos controlen y puedan entregar datos arbitrarios contenido. En este artículo, usaremos https://bobbucks.dev/pay como forma de pago identificador.

Cómo usan los comercios el identificador de forma de pago

Se construye un objeto PaymentRequest con una lista de formas de pago identificadores que identifican los pagos y las apps que un comercio decide aceptar. Los identificadores de las formas de pago se establecen como un valor de la propiedad supportedMethods. Por ejemplo:

[comercio] solicita el pago:

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

Paso 2: Publica el manifiesto de la forma de pago

Un manifiesto de formas de pago es Archivo JSON que define qué app de pagos puede usar esta forma de pago.

Proporciona el manifiesto de la forma de pago

Cuando un comerciante inicia una transacción de pago, el navegador envía una solicitud HTTP Solicitud GET a la URL del identificador de la forma de pago. El servidor responde con la forma de pago. .

Un manifiesto de forma de pago tiene dos campos: default_applications y supported_origins

Nombre de la propiedad Descripción
default_applications (obligatorio) Un array de URLs que dirige a los manifiestos de apps web donde se realiza el pago aplicaciones. (La URL puede ser relativa). Este array es el esperado para hacer referencia al manifiesto de desarrollo, al manifiesto de producción, etcétera.
supported_origins Un array de URLs que dirigen a orígenes que pueden alojar URLs de pago que implementen la misma forma de pago. Ten en cuenta que un pago se puede implementar con varias apps de pago.
Campos del manifiesto de la forma de pago

Un archivo de manifiesto de la forma de pago debería verse de la siguiente manera:

[controlador de pagos] /payment-manifest.json:

{
  "default_applications": ["https://bobbucks.dev/manifest.json"],
  "supported_origins": [
    "https://alicepay.friendsofalice.example"
  ]
}

Cuando el navegador lee el campo default_applications, encuentra una lista de vínculos a los manifiestos de aplicaciones web de y apps de pago.

De manera opcional, enruta el navegador para que busque el manifiesto de la forma de pago en otra ubicación.

De manera opcional, la URL del identificador de la forma de pago puede responder con un encabezado Link. que dirija a otra URL en la que el navegador pueda recuperar la forma de pago . Esto resulta útil cuando el manifiesto de una forma de pago se aloja en un o cuando un tercero entrega la app de pago.

Cómo un navegador descubre la app de pagos a partir de un identificador de forma de pago basado en URL con redireccionamientos

Configura el servidor de la forma de pago para que responda con un encabezado HTTP Link con El atributo rel="payment-method-manifest" y la forma de pago manifiesto.

Por ejemplo, si el manifiesto está en https://bobbucks.dev/payment-manifest.json, el encabezado de respuesta incluiría lo siguiente:

Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"

La URL puede ser un nombre de dominio completo o una ruta de acceso relativa. Inspeccionar https://bobbucks.dev/pay/ para el tráfico de red para ver un ejemplo. Puedes usar un curl también:

curl --include https://bobbucks.dev/pay

Paso 3: Entrega un manifiesto de app web

El manifiesto de aplicación web es se usa para definir una aplicación web, como sugiere su nombre. Es un archivo de manifiesto que se usa mucho para definir una app web progresiva (AWP).

El manifiesto típico de las aplicaciones web se vería de la siguiente manera:

[controlador de pagos] /manifest.json:

{
  "name": "Pay with Bobpay",
  "short_name": "Bobpay",
  "description": "This is an example of the Payment Handler API.",
  "icons": [
    {
      "src": "images/manifest/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/manifest/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "serviceworker": {
    "src": "service-worker.js",
    "scope": "/",
    "use_cache": false
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.android.samplepay",
      "min_version": "1",
      "fingerprints": [
        {
          "type": "sha256_cert",
          "value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
        }
      ]
    }
  ]
}

La información que se describe en el manifiesto de una app web también se usa para definir cómo se app de pagos en la IU de Payment Request.

Nombre de la propiedad Descripción
name (obligatorio) Se usa como nombre de la app de pagos.
icons (obligatorio) Se usa como el ícono de la app de pagos. Solo Chrome usa estos íconos: otro los navegadores pueden usarlos como íconos de resguardo si no los especificas como del instrumento de pago.
serviceworker Se usa para detectar el service worker que se ejecuta como pago basado en la Web .
serviceworker.src La URL desde la que se descargará la secuencia de comandos del service worker.
serviceworker.scope Una cadena que representa una URL que define la dirección el alcance del registro.
serviceworker.use_cache La URL desde la que se descargará la secuencia de comandos del service worker.
related_applications Se usa para detectar la app que actúa como la app de pagos que proporciona el SO. Encuentra más detalles en Android guía para desarrolladores sobre apps de pago.
prefer_related_applications Se usa para determinar qué app de pagos iniciar cuando estén disponibles una app de pagos proporcionada por el SO y una app de pagos basada en la Web.
Campos importantes del manifiesto de apps web
App de pagos con un ícono
Ícono y etiqueta de la app de pagos.

La propiedad name del manifiesto de la app web se usa como nombre de la app de pagos, icons. se usa como el ícono de la app de pagos.

Cómo determina Chrome qué app de pagos se debe iniciar

Inicia la app de pagos específica de la plataforma

Para iniciar la app de pagos específica de la plataforma, se deben cumplir las siguientes condiciones:

  • El campo related_applications se especifica en el manifiesto de la app web y tiene las siguientes características:
    • El ID del paquete y la firma de la app instalada coinciden, mientras que el mínimo versión (min_version) del manifiesto de la aplicación web es inferior o igual a la versión de la aplicación instalada.
  • El campo prefer_related_applications es true.
  • La app de pagos específica de la plataforma está instalada y tiene lo siguiente:
    • Un filtro de intents de org.chromium.action.PAY
    • Es un identificador de forma de pago que se especifica como el valor de la propiedad org.chromium.default_payment_method_name.

Consulta la Guía para desarrolladores sobre las apps de pago para Android. para obtener más detalles sobre cómo configurarlos.

[controlador de pagos] /manifest.json

"prefer_related_applications": true,
"related_applications": [{
  "platform": "play",
  "id": "xyz.bobpay.app",
  "min_version": "1",
  "fingerprints": [{
    "type": "sha256_cert",
    "value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
  }]
}]

Si el navegador determina que la aplicación de pago específica para la plataforma está disponible, el el flujo de descubrimiento finaliza aquí. De lo contrario, continúa con el paso siguiente: lanzar la aplicación de pagos basada en la Web.

Inicia la app de pagos basada en la Web

La app de pagos basada en la Web debe especificarse en el campo serviceworker del manifiesto de la app web.

[controlador de pagos] /manifest.json:

"serviceworker": {
  "src": "payment-handler.js"
}

El navegador inicia la app de pagos basada en la Web mediante el envío de un paymentrequest. al service worker. No es necesario que el service worker esté registrado en antes. Se puede registrar justo a tiempo.

Información sobre las optimizaciones especiales

Cómo los navegadores pueden omitir la IU de Payment Request e iniciar una app de pagos directamente

En Chrome, cuando se llama al método show() de PaymentRequest, se inicia el método de La API de Request muestra una IU proporcionada por el navegador llamada “IU de Payment Request”. Esta La IU permite que los usuarios elijan una app de pagos. Después de presionar el botón Continuar En la IU de Payment Request, se inicia la app de pagos seleccionada.

. La IU de Payment Request interviene antes de iniciar la app de pagos.
.

Mostrar la IU de Payment Request antes de lanzar una app de pagos aumenta el Es la cantidad de pasos necesarios para que un usuario complete un pago. Para optimizar el proceso, el navegador puede delegar la entrega de esa información a las aplicaciones de pago y iniciar una aplicación de pagos directamente sin mostrar la IU de Payment Request cuando Se llama a show().

. Omite la IU de Payment Request y, luego, inicia la app de pagos directamente.

Para iniciar una app de pagos directamente, se deben cumplir las siguientes condiciones:

  • show() se activa con un gesto del usuario (por ejemplo, un clic del mouse).
  • Solo hay una app de pagos que cumple con las siguientes características:
    • Admite el identificador de forma de pago solicitado.

¿Cuándo se registra una app de pagos basada en la Web justo a tiempo (JIT)?

Las aplicaciones de pago basadas en la Web se pueden iniciar sin la visita previa explícita del usuario. ir al sitio web de la app de pago y registrar el service worker. El servicio trabajador se puede registrar justo a tiempo cuando el usuario elige pagar con el con una app de pagos basada en la Web. Existen dos variaciones para el horario de registro:

  • Si se muestra la IU de Payment Request al usuario, la app está registrada. justo a tiempo y se inician cuando el usuario hace clic en Continuar.
  • Si se omite la IU de Payment Request, se registra la app de pagos. justo a tiempo y se lanzaron directamente. Cómo omitir la IU de Payment Request para iniciar una app registrada justo a tiempo requiere un gesto del usuario, lo que evita registro inesperado de service workers de origen cruzado.

Próximos pasos

Ahora que ya puedes ver tu app de pagos, aprende a desarrollar una plataforma y una app de pagos basada en la Web.