Payment Element es un componente de interfaz de usuario integrable y seguro que te permite aceptar métodos de pago locales desde cualquier parte del mundo.
Para ayudar a que tanto los usuarios de pagos únicos como los de pagos recurrentes puedan aceptar varios métodos de pago, Payment Element admite tres formas principales de integración:
Pagos únicos con PaymentIntents
La guía de integración está disponible aquí: https://stripe.com/docs/stripe-js/payment-element/accept-a-payment
Pagos de suscripción con PaymentIntents
La guía de integración está disponible aquí: https://stripe.com/docs/billing/subscriptions/elements#collect-payment
Pagos de suscripción con SetupIntents
La guía de integración está disponible aquí: https://stripe.com/docs/stripe-js/payment-element/set-up-payment
Con Payment Element, Stripe lanza una nueva generación de elementos (consulta: https://stripe.com/payments/elements). Antes de Payment Element, los comerciantes tenían que crear y mantener una nueva integración para cada método de pago por separado. Debido a que esto ya no es necesario, si usas Payment Element ahorrarás muchísimo tiempo y recursos.
Estas son algunas de las funcionalidades principales de Payment Element:
- Admite varios métodos de pago con una sola integración de Elements
- Muestra opciones de pago relevantes para cada comprador mediante una lógica de clasificación basada en el país en el que se encuentra el cliente (derivado de una dirección IP) y el idioma de preferencia (derivado de la configuración local del navegador)
- Está localizado para 42 regiones: https://stripe.com/docs/js/appendix/supported_locales
- Se puede personalizar según la marca del comerciante (fuente, colores, espaciado, entre otros))
- Es compatible con dispositivos móviles
- Tiene validaciones integradas de datos
- Cumple con la normativa PCI DSS
- Es compatible con PaymentIntents y SetupIntents
Stripe Elements es un conjunto de componentes de interfaz de usuario prediseñados, como datos de entrada y botones, para construir el flujo de finalización de compra. Cada método de pago (tarjetas de crédito, tarjetas de débito, etc.) tiene asociado un Element. Payment Element es un componente nuevo que combina los Elements individuales de los métodos de pago en uno solo.
Estas son las diferencias entre Stripe Elements y Payment Element:
Antes, al usar Elements, el comerciante tenía que diseñar y mantener un mapeo con asignaciones de monedas, países y métodos de pago, además de la lógica asociada, para saber cuándo llamar a la API de Stripe en el back-end y mostrar u ocultar los Elements en la interfaz de usuario. Esto implicaba la integración de cada Element por separado.
Con Payment Element, el comerciante ya no necesita diseñar y mantener estos aspectos. La experiencia de integración comienza a verse como una integración de un solo Element, y las asignaciones, la lógica, la presentación y el comportamiento están prediseñados por Stripe. El intercambio es que la capa de interfaz de usuario es un poco menos personalizable en comparación con lo que se puede hacer hoy en día con Stripe Elements, pero tienes más control que el que ofrece Stripe Checkout.
Para ser más específicos, las principales diferencias son las siguientes:
- La integración de Payment Element necesita casi el mismo esfuerzo que la de cualquier otro Element (p. ej., Card Element), pero su mantenimiento supone mucho menos trabajo, ya que los métodos de pago pueden agregarse sin tener que integrar otro Element para cada uno.
- La capacidad de personalizar el estilo es más limitada en comparación con lo que se puede hacer hoy en día con Elements, ya que solo se aceptan las API de estilo de JavaScript (y no de CSS). Sin embargo, se siguen aceptando la mayoría de las funcionalidades de estilo.
- Debido a que no se admite la confirmación del lado del servidor, las tarjetas de crédito tendrán que usar webhooks (esto no sucede con Elements hoy en día). No obstante, omitiremos esta regla para Cards.
- La mayoría de los métodos de pago que acepta Payment Element exigen que se redirija a una página de confirmación de pedido, por lo que las aplicaciones web de una sola página deberán agregar otra página para confirmar el pedido. De todas formas, la experiencia de finalización de compra seguirá integrada por completo dentro del sitio del comerciante (a diferencia de Stripe Checkout).
Payment Element es un componente nuevo de interfaz de usuario que puede exhibirse en el sitio web de un comerciante, con el estilo y la marca correspondientes a la experiencia de ese comerciante. Te permite ofrecer varios métodos de pago (más de 18 y en aumento) con muchísimo menos esfuerzo al recopilar automáticamente los datos necesarios de los clientes (a excepción de la dirección de envío). Payment Element funciona con las API de pago de Stripe (PaymentIntents/SetupIntents) y su diseño se basa en nuestro SDK, Stripe.js. El producto está diseñado para comerciantes que quieren controlar la experiencia de pago ofrecida. En particular, si buscas integrar por completo los pagos dentro de tu aplicación web (p. ej., con flujos de varios pasos, con conciencia de marca, con una gran necesidad de control y condiciones especiales de finalización de compras), Payment Element es el producto para ti. Payment Element te permite recopilar cualquier dato que necesites durante el proceso de finalización de compra y diseñar la experiencia a tu medida.
Por otro lado, Stripe Checkout es nuestra página de pago completamente alojada que también hace que sea más fácil ofrecer métodos de pago locales (más de 25) a los que tu sitio redireccionaría, pero ofrece opciones de estilo limitadas (solo puedes personalizar el color y el logotipo). Stripe Checkout funciona con Checkout Sessions y no usa Payment Intent ni Setup Intent. Está diseñado para casos de uso más simples, como un flujo de un solo paso con menos necesidad de control, personalización y adaptación a la marca. A diferencia de Payment Element, Stripe Checkout ofrece y recopila más datos, incluida la dirección de envío, y muestra una lista de productos, el total del pedido y un botón “Enviar”.
La integración de Payment Element necesita casi el mismo esfuerzo que la de cualquier Element individual (p. ej., Card Element), pero su mantenimiento supone menos trabajo. Cuando quieras ofrecer más métodos de pago, no tendrás que integrar un Element para cada uno.
Payment Element no supone ningún costo adicional para los usuarios. Los únicos costos asociados son aquellos de cada método de pago que se acepta (consulta https://stripe.com/pricing/local-payment-methods).
Payment Element admite PaymentIntents y SetupIntents. No se admiten otras API heredadas, como Charges y Sources.
Sí, con Payment Element necesitas usar webhooks porque no se admite la confirmación del lado del servidor.
No obstante, omitiremos esta regla para los métodos de pago que no requieren redirecciones, como Cards. El código necesario para conocer cómo hacerlo está disponible aquí: https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect
Para usar Payment Element para ofrecer todos los métodos de pago que acepta Stripe, puedes especificar una matriz de métodos de pago en payment_method_types al crear un PaymentIntent. Ten en cuenta que no puedes especificar todos los métodos de pago al mismo tiempo, ya que algunos requieren una moneda diferente. Solo puedes crear un PaymentIntent con métodos de pago que acepten la misma moneda. Consulta aquí la tabla de métodos de pago y soporte de producto: https://stripe.com/docs/payments/payment-methods/integration-options
El Payment Element móvil, o la clase de Payment Sheet en el código, es un componente de interfaz de usuario prediseñado y seguro que muestra varios métodos de pago de todo el mundo (tarjetas, billeteras, débitos bancarios, redireccionamientos bancarios, “compre ahora, pague después”, etc.). Es similar a la versión web de Payment Element, pero se usa en aplicaciones móviles. La interfaz de pago se muestra como una “hoja inferior” (similar a Apple/Google Pay) y está integrada a la SDK móvil de Stripe. Este producto ayudará a los comerciantes de Stripe a aumentar la conversión y reducir los costos de los pagos, y hacer que los objetivos de Stripe se centren en aceptar métodos de pago sin tarjeta. Para obtener más información, consulta https://stripe.com/docs/payments/accept-a-payment?platform=ios