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.
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
El proceso de descubrimiento comienza cuando un comercio inicia una transacción:
- El navegador envía una solicitud a la forma de pago identificador y las recuperaciones la forma de pago de Terraform.
- El navegador determina la aplicación web del manifiesto de la de la forma de pago y obtiene el manifiesto de la app web.
- 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. |
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.
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. |
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_applicationsse 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 ID del paquete y la firma de la app instalada coinciden, mientras que el mínimo
versión (
- El campo
prefer_related_applicationsestrue. - 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.
- Un filtro de intents de
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.
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().
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.