Breaking

Post Top Ad

Your Ad Spot

viernes, 10 de mayo de 2019

Introducción rápida a la API de solicitud de pago

La API de solicitud de pago es una nueva API de JavaScript que facilita la recopilación de información de pago que luego puede enviarse a un procesador de pagos como Stripe. El objetivo es mejorar el UX de pago facilitando que los usuarios guarden la información de su tarjeta con el navegador. La API en sí se desarrolla abiertamente a través del W3C y con la participación de Google y Microsoft principalmente.
La API aún es bastante nueva y el soporte está limitado a Chrome y Edge 15+ en este momento. El soporte para el escritorio de Chrome se agregó con Chrome 60 , pero es posible que aún tenga que habilitar el indicador de pagos web . Lo bueno es que puede usarse fácilmente como una mejora progresiva. También tenga en cuenta que la API solo funciona para los sitios que se sirven a través de https .

Prueba de características

Usted querrá tener detección de características para la disponibilidad de la API:
if (window.PaymentRequest) {
  // Yep, we can go ahead! Our code goes here.
} else {
  // No support. Proceed the old school way
}

Solicitud de pago objeto

Primero, creará un objeto paymentRequest y pasará una matriz para los métodos de pago aceptados, un objeto con los detalles de pago y un tercer objeto opcional para las opciones:
const paymentMethods = [
  {
    supportedMethods: ['basic-card']
  }
];

const paymentDetails = {
  total: {
    label: 'What you pay',
    amount: {
      currency: 'USD',
      value: 80
    }
  }
};

const paymentRequest = new PaymentRequest(
  paymentMethods,
  paymentDetails
);

// ...
Fíjese en la forma de pagoMétodos y pagoDetalles . Se admitirán Métodos soportados configurados a un valor de tarjeta básica , se aceptarán tarjetas de crédito y débito. También puede limitar las redes de pago soportadas. Por ejemplo, con las siguientes solo se aceptarán Visa y MasterCard:
const paymentMethods = [
  {
    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: ['visa', 'mastercard']
    }
  }
];

Detalles del pago

Los siguientes campos son obligatorios para el objeto de detalles de pago: total , etiqueta , monto , moneda y valor .
También puede agregar elementos de visualización adicionales para la interfaz de usuario de pago del navegador:
const paymentDetails = {
  total: {
    label: 'What you pay',
    amount: {
      currency: 'USD',
      value: 80
    }
  },
  displayItems: [
    {
      label: 'Promo code',
      amount: {
        currency: 'USD',
        value: -10
      }
    },
    {
      label: 'Taxes',
      amount: {
        currency: 'USD',
        value: 12
      }
    }
  ]
};
El espacio a menudo es limitado para la interfaz de usuario de pago del navegador, por lo que probablemente desee enumerar solo los campos de nivel superior, como el precio total, los impuestos y el costo de envío. También tenga en cuenta que la API no realiza ningún cálculo, por lo que su aplicación es responsable de proporcionar los montos precalculados.

Con el tercer argumento opcional, puede solicitar información adicional del usuario, como su nombre, correo electrónico y número de teléfono:
// ...

const options = {
  requestPayerName: true,
  requestPayerEmail: true
};

const paymentRequest = new PaymentRequest(
  paymentMethods,
  paymentDetails,
  options
);

Iniciar la interfaz de usuario y completar

Ya casi estamos listos, esperamos que no suceda nada hasta que llamemos al método show en el objeto de solicitud de pago. show () devuelve una promesa, por lo que es entonces factible:
// ...

const paymentRequest = new PaymentRequest(
  paymentMethods,
  paymentDetails,
  options
);

paymentRequest
  .show()
  .then(paymentResponse => {
    return paymentResponse.complete().then(() => {
      // call backend API to process payment with data from `paymentResponse`
    });
  })
  .catch(err => {
    // API error or user cancelled the payment
    console.log('Error:', err);
  });
¡Suficientemente simple! Con esto, al usuario se le presentará la interfaz de usuario desde el navegador. Al llamar a complete () en la respuesta de pagoque se devuelve, se cerrará la interfaz de usuario de pago del navegador y se devolverá otra promesa para que podamos llamar a nuestro backend para enviar la información recopilada y procesar el pago.
La UI de pago en Chrome 60
Los pagos en línea pueden ser difíciles. Sin embargo, como puede ver, es muy fácil trabajar con la API de solicitud de pago y hace que la recopilación de información del usuario sea muy sencilla.
Con el código anterior, la interfaz de usuario del navegador se cerrará inmediatamente cuando el usuario confirme el pago, y luego nuestra aplicación puede tomar el control y mostrar un indicador de carga mientras el backend procesa el pago. Alternativamente, podemos mantener la interfaz de usuario del navegador y su indicador de carga nativo con algo como esto en su lugar:
// ...

const paymentRequest = new PaymentRequest(
  paymentMethods,
  paymentDetails,
  options
);

paymentRequest
  .show()
  .then(paymentResponse => {
    return verifyPaymentWithBackend(paymentResponse).then(success => {
      if (success) {
        console.log('💵 Payment is complete!');
        return paymentResponse.complete('success');
      } else {
        return paymentResponse.complete('failure');
      }
    });
  })
  .catch(err => {
    // API error or user cancelled the payment
    console.log('Error:', err);
  });
Con esto, la IU de pago del navegador mostrará una pantalla de procesamientohasta que la promesa se resuelva o rechace. Aquí VerifyPaymentWithBackendsería una función que llama a su API de back-end para el procesamiento de pagos con el contenido de paymentResponse .
Para ayudar a probarlo, aquí hay un simulacro que devuelve una promesa que se vuelve verdadera después de 2.5 segundos:
function verifyPaymentWithBackend(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(true);
    }, 2500);
  });
}

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas