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
Aquí tienes la guía de integración: https://stripe.com/docs/stripe-js/payment-element/accept-a-payment
Pagos de suscripciones con PaymentIntents
Aquí tienes la guía de integración: https://stripe.com/docs/billing/subscriptions/elements#collect-payment
Pagos de suscripciones con SetupIntents
Aquí tienes la guía de integración: https://stripe.com/docs/stripe-js/payment-element/set-up-payment
Con Payment Element, Stripe lanza una nueva generación de Elements (consulta: https://stripe.com/payments/elements). Antes de que existiera Payment Element, los comerciantes tenían que crear y mantener una nueva integración para cada método de pago. Debido a que esto ya no es necesario, si usas Payment Element ahorrarás mucho tiempo y recursos.
A continuación, indicamos algunas de las funciones 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 regional del navegador).
- Está localizado para 42 configuraciones regionales (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 crear el flujo del proceso 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 un solo Element.
A continuación indicamos las diferencias entre Stripe Elements y Payment Element:
Antes, al usar Elements, el comerciante tenía que generar 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 generar 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. La desventaja es que la capa de la 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 añadirse 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 actualmente 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 actualmente con Elements). No obstante, omitiremos esta regla para Cards.
- La mayoría de los métodos de pago aceptados mediante Payment Element exigen el redireccionamiento a una página de confirmación de pedidos, por lo que las aplicaciones web de una sola página deberán añadir otra página para confirmar el pedido. No obstante, la experiencia de compra seguirá totalmente integrada dentro del sitio del comerciante (a diferencia de Stripe Checkout).
Payment Element es un nuevo componente de interfaz de usuario que puede colocarse en el sitio web de un comerciante con el estilo y la marca correspondientes a la experiencia de dicho comerciante. Te permite ofrecer varios métodos de pago (más de 18, aunque esta cifra sigue creciendo) con mucho menos esfuerzo al recopilar automáticamente los datos necesarios de los clientes (excepto 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 quieres una integración completa de los pagos dentro de tu aplicación web (p. ej., con flujos de varios pasos, teniendo en cuenta la marca, con una gran necesidad de control o condiciones especiales en el proceso de finalización de compra), Payment Element es perfecto 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 gusto.
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 los flujos de un solo paso en los que la necesidad de control, personalización y adaptación a la marca es menor. 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 opción.
Payment Element no supone ningún coste adicional para los usuarios. Los únicos costes 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 en los métodos de pago que no requieren redireccionamientos, como Cards. El código necesario para hacerlo está 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 cuando crees un PaymentIntent. Sin embargo, ten en cuenta que no puedes especificar al mismo tiempo todos los métodos de pago admitidos, ya que algunos requieren una divisa diferente. Solo puedes crear un PaymentIntent con métodos de pago que acepten la misma divisa. Consulta la tabla de métodos de pago y soporte de productos aquí: https://stripe.com/docs/payments/payment-methods/integration-options.
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, monederos, adeudos bancarios, redireccionamientos bancarios, «compra ahora, paga después», etc.). Es similar a Payment Element en la Web, pero su uso está indicado para aplicaciones móviles. La interfaz de pago se muestra como una «hoja inferior» (similar a Apple/Google Pay) y está integrada en el SDK móvil de Stripe. Este producto ayudará a que los comerciantes de Stripe aumenten la conversión y reduzcan los costes de los pagos, y a 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.