Ciclo de una transacción de pago

Obtén información sobre cómo los comercios integran las apps de pago y cómo funcionan las transacciones de pago con la API Payment Request.

Eiji Kitamura

Milica Mihajlija

Las APIs de Web Payments son funciones de pago dedicadas integradas en el navegador por primera vez. Con los pagos web, la integración de los comerciantes con las aplicaciones de pagos se simplifica y mejora la seguridad de la experiencia del cliente.

Para obtener más información sobre los beneficios de utilizar Pagos web, consulta Empoderamiento aplicaciones de pago con Pagos web.

En este artículo, se explica cómo realizar una transacción de pago en el sitio web de un comercio y te ayuda a comprender cómo funciona la integración de apps de pago.

El proceso consta de 6 pasos:

1. El comercio inicia una transacción de pago.
2. El comercio muestra un botón de pago.

3. El cliente presiona el botón de pago.

   

4. El navegador inicia la app de pagos.

   

5. Si el cliente cambia algún detalle (como las opciones de envío o sus dirección), el comerciante actualiza los detalles de la transacción que reflejan el cambio.

   

6. Una vez que el cliente confirma la compra, el comercio valida el pago y completa la transacción.

   

Paso 1: El comercio inicia una transacción de pago

Cuando un cliente decide realizar una compra, el comercio inicia el pago. transacción construyendo un PaymentRequest . Este objeto incluye información importante sobre la transacción:

• Formas de pago aceptables y sus datos para procesar la transacción
• Son los detalles, como el precio total (obligatorio) y la información sobre los artículos.
• Opciones en las que los comercios pueden solicitar información de envío, como un dirección IP y una opción de envío.
• Los comercios también pueden solicitar la dirección de facturación, el nombre del pagador, el correo electrónico y número de teléfono.
• Los comercios también pueden incluir envíos opcionales tipo (shipping, delivery o pickup) en PaymentRequest. La app de pagos puedes usarlo como sugerencia para mostrar las etiquetas correctas en su IU.

const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay',
  data: {
    transactionId: '****'
  }
}], {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
}, {
  requestShipping: true,
  requestBillingAddress: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestPayerName: true,
  shippingType: 'delivery'
});

Cómo incluir un ID de transacción

Es posible que algunos controladores de pago requieran que el comercio proporcione el ID de transacción. que haya emitido con anticipación como parte de la información de la transacción. R La integración típica incluye la comunicación entre el comercio el servidor del controlador de pagos para reservar el precio total. Esto evita que los recursos maliciosos que los clientes manipulen el precio y engañen al comercio con un la validación al final de la transacción.

El comercio puede pasar un ID de transacción como parte del PaymentMethodData propiedad data del objeto.

Con la información de la transacción, el navegador pasa por un descubrimiento Proceso de las aplicaciones de pago especificado en el PaymentRequest basado en el pago identificadores de métodos de pago. De esta manera, el navegador puede determinar la app de pago para se lanza en cuanto el comercio está listo para continuar con la transacción.

Para obtener más información sobre cómo funciona el proceso de descubrimiento, consulta Configura una pago método.

Paso 2: El comercio muestra un botón de pago

Los comercios admiten muchas formas de pago, pero solo deben presentar el pago. para aquellos que el cliente realmente puede usar. Cómo mostrar un botón de pago que no se pueda usar es una mala experiencia del usuario. Si un comercio puede predecir que un La forma de pago especificada en el objeto PaymentRequest no funcionará para puede proporcionar una solución de resguardo o no mostrar ese botón en absoluto.

Con una instancia PaymentRequest, un comercio puede consultar si un cliente la aplicación de pago disponible.

¿El cliente tiene disponible la app de pagos?

El canMakePayment() La forma de pago de PaymentRequest devuelve true si hay una app de pagos disponible en el el dispositivo del cliente. “Disponible” significa que una aplicación de pago que admita se descubre la forma de pago y se instaló la aplicación de pago específica de la plataforma. la aplicación de pagos basada en la web está lista para ser registrada.

const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
  // Fallback to other means of payment or hide the button.
}

Paso 3: El cliente presiona el botón de pago

Cuando el cliente presiona el botón de pago, el comercio llama al show() de la instancia de PaymentRequest, que activa de inmediato el inicio de la IU de pago.

En caso de que el precio total final se establezca de forma dinámica (por ejemplo, si se recupera de un de pago), el comerciante puede diferir el lanzamiento de la IU de pago hasta que el total sea conocidos.

Aplaza el lanzamiento de la IU de pago

Consulta una demostración sobre cómo diferir el pago de usuario final hasta que el precio total final sea determinado.

Para diferir la IU de pago, el comercio pasa una promesa al método show(). El navegador mostrará un indicador de carga hasta que se resuelva la promesa y de que la transacción esté lista para comenzar.

const getTotalAmount = async () => {
  // Fetch the total amount from the server, etc.
};

try {
  const result = await request.show(getTotalAmount());
  // Process the result…
} catch(e) {
  handleError(e);
}

Si no hay ninguna promesa especificada como argumento para show(), el navegador iniciar la IU de pago de inmediato.

Nota: Si el controlador de pago está diseñado para mostrar un ID de transacción cuando se configura el precio total, el ID se puede pasar como parte del resultado de la promesa.

Paso 4: El navegador inicia la app de pagos

El navegador puede iniciar una aplicación de pago específica de la plataforma o basada en la Web. (Puedes obtener más información sobre cómo Chrome determina qué aplicación de pagos lanzamiento).

En gran parte, la forma de crear una aplicación de pago depende del desarrollador, emitidos desde y hacia el comercio, así como la estructura de los datos que se transmiten con esos eventos, se estandarizan.

Cuando se inicia la aplicación de pago, recibe la transacción. información el objeto PaymentRequest en el paso 1, que incluye lo siguiente:

• Datos de la forma de pago
• Precio total
• Opciones de pago

La app de pagos usa la información de la transacción para etiquetar su IU.

Paso 5: Cómo puede un comercio actualizar los detalles de la transacción según las acciones del cliente

Los clientes tienen la opción de cambiar los detalles de la transacción, como el pago. forma de pago y la opción de envío en la app de pago. Mientras el cliente hace cambios, el comercio recibe los eventos de cambio y actualiza los detalles de la transacción.

Hay cuatro tipos de eventos que puede recibir un comercio:

• Evento de cambio de forma de pago
• Evento de cambio de dirección de envío
• Evento de cambio de opción de envío
• Evento de validación del comercio

Evento de cambio de forma de pago

Una app de pagos admite varias formas de pago, y un comercio puede ofrecer descuento especial según la selección del cliente. Para abordar este caso de uso, el evento de cambio de la forma de pago puede informar al comercio sobre el nuevo pago de modo que puedan actualizar el precio total con el descuento y devolverlo volver a la aplicación de pago.

request.addEventListener('paymentmethodchange', e => {
  e.updateWith({
    // Add discount etc.
  });
});

Evento de cambio de dirección de envío

De manera opcional, una app de pago puede proporcionar la dirección de envío del cliente. Este es es conveniente para los clientes porque no tienen que ingresar manualmente ningún detalle en un formulario y pueden almacenar su dirección de envío en el en lugar de hacerlo en varios sitios web de comercios diferentes.

Si un cliente actualiza su dirección de envío en una app de pagos después del se inició la transacción, se enviará un evento 'shippingaddresschange' al comercio. Este evento ayuda al comercio a determinar el costo de envío en la nueva dirección, actualiza el precio total y devuélvelo a la app de pagos.

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

Si el comercio no puede realizar envíos a la dirección actualizada, puede mostrar un mensaje de error agregando un parámetro de error a los detalles de la transacción que se muestran al de pagos de Google.

Nota: Los comercios no reciben datos de los clientes dirección de envío completa hasta que autoricen el pago.

Evento de cambio de opción de envío

Un comercio puede ofrecer varias opciones de envío al cliente y delegar esa opción a la app de pago. Las opciones de envío se muestran como una lista de precios y nombres de servicios que el cliente puede seleccionar. Por ejemplo:

• Envío estándar gratis
• Envío exprés: USD 5

Cuando un cliente actualiza la opción de envío en una app de pagos, se genera una Se enviará el evento 'shippingoptionchange' al comercio. El comercio puede determinar el costo de envío, actualizar el precio total y devolverlo al de pagos de Google.

request.addEventListener('shippingoptionchange', e => {
  e.updateWith({
    // Update the details
  });
});

El comercio puede modificar dinámicamente las opciones de envío en función de la dirección de envío. Esto es útil cuando un comercio quiere ofrecer conjuntos diferentes de opciones de envío para clientes nacionales e internacionales.

Evento de validación del comercio

Para mayor seguridad, una app de pagos puede realizar una validación de comerciante antes y avanzar al flujo de pago. El diseño del mecanismo de validación depende la aplicación de pagos, pero el evento de validación del comercio informa al comercio de la URL que pueden usar para validarse a sí mismos.

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

Nota: La compatibilidad con el evento de validación del comercio se limita a Apple Safari. Los navegadores basados en Chromium no implementaron este evento desde mayo de 2020.

Paso 6: El comercio valida el pago y completa la transacción

Cuando el cliente autoriza correctamente el pago, se usa el método show() devuelve una promesa que resuelve un PaymentResponse El objeto PaymentResponse incluye la siguiente información:

• Detalles del resultado del pago
• Dirección de envío
• Opción de envío
• Información de contacto

En este punto, es posible que la IU del navegador aún muestre un indicador de carga, lo que significa que aún no se completa la transacción.

Si la aplicación de pago se cancela debido a un error o error en el pago, la se rechaza la promesa que devuelve show() y el navegador cancela el pago transacción.

Procesamiento y validación del pago

El details en PaymentResponse es el objeto de credencial de pago que se muestra. desde la app de pagos. El comercio puede usar la credencial para procesar o validar el pago. El funcionamiento de este proceso crítico depende del controlador de pago.

Completa la transacción o vuelve a intentarlo

Cuando el comercio determina si la transacción se realizó correctamente o no, pueden hacer lo siguiente:

• Llama al método .complete() para completar la transacción y descartar el indicador de carga de trabajo.
• Permite que el cliente vuelva a intentarlo llamando al método retry().

async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}

async function validateResponse(response) {
  try {
    const errors = await checkAllValuesAreGood(response);
    if (errors.length) {
      await response.retry(errors);
      return validateResponse(response);
    }
    await response.complete("success");
  } catch (err) {
    // Something went wrong…
    await response.complete("fail");
  }
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();

Próximos pasos

• Obtenga información sobre cómo declarar un identificador de forma de pago en detalle en Cómo configurar un forma de pago.
• Aprende a compilar una app de pagos específica para plataformas en Guía para desarrolladores sobre apps de pago para Android
• Aprende a compilar una app de pagos basada en la Web en la página para desarrolladores de apps de pago basadas en la Web. de la guía de YouTube.