Payment Element de Stripe

El Payment Element es un componente de interfaz de usuario para la web que acepta más de 40 métodos de pago, valida las entradas y maneja los errores. Úsalo solo o con otros elementos en el front end de tu aplicación web.

API compatibles

Stripe ofrece dos API de pago principales compatibles con Elements que te dan la flexibilidad de aceptar varios tipos de pagos de tus clientes. Puedes integrar estas API en las interfaces de pago prediseñadas de Stripe. Si bien recomendamos usar Checkout Sessions para la mayoría de los usuarios, las API ofrecen casos de uso ligeramente diferentes según cómo elijas estructurar tu flujo del proceso de compra y cuánto control necesites. Puedes crear una página de proceso de compra con la API Checkout Session o crear una integración avanzada con la API Payment Intents.

• La API Checkout Sessions te permite diseñar el flujo del proceso de compra del cliente. Esto incluye las partidas individuales incluidas en las direcciones de compra, facturación y envío, los tipos impositivos aplicables y los cupones o descuentos. La API Checkout Session te permite crear suscripciones, calcular tipos impositivos con Stripe Tax e iniciar pagos.
• La API Payment Intents te permite diseñar el paso de pagos. A diferencia de la API Checkout Sessions, que requiere datos de partidas individuales, solo transfieres el importe final que quieres cobrar. Esto es adecuado para flujos de pago, como los pagos fuera de la sesión. Si quieres usar Stripe para calcular los impuestos correspondientes o crear suscripciones, debes integrarte con la API Stripe Tax o la API Subscriptions, respectivamente.

Combina los elementos

El Payment Element interactúa con otros elementos. Por ejemplo, este formulario utiliza un elemento adicional para autocompletar los datos de pago y otro para recopilar la dirección de envío.

Para obtener el código completo de este ejemplo, consulta Añadir Link a una integración de Elements.

También puedes combinar el Payment Element con el Express Checkout Element. En este caso, los métodos de pago de monedero como Apple Pay y Google Pay solo se muestran en el Express Checkout Element para evitar la duplicación.

Métodos de pago

Stripe te habilita ciertos métodos de pago de forma predeterminada. También podríamos habilitar métodos de pago adicionales después de notificártelo. Utiliza el Dashboard para habilitar o deshabilitar los métodos de pago en cualquier momento. Con el Payment Element, puedes usar métodos de pago dinámicos para:

• Gestionar los métodos de pago en el Dashboard sin codificación
• Mostrar de forma dinámica las opciones de pago más relevantes en función de factores como la ubicación, la divisa y el importe de la transacción

Por ejemplo, si un cliente de Alemania paga en euros, verá todos los métodos de pago activos que aceptan euros, comenzando con los que se usan ampliamente en Alemania.

Muestra los métodos de pago en orden de relevancia para tu cliente

Para personalizar aún más cómo se muestran los métodos de pago, por ejemplo, filtrando las marcas de tarjetas que no quieres aceptar, consulta Personalizar métodos de pago. Para añadir métodos de pago integrados fuera de Stripe, puedes utilizar métodos de pago personalizados.

Si tu integración requiere que enumeres los métodos de pago de forma manual, consulta la sección Enumera los métodos de pago de forma manual.

Diseño

Puedes personalizar el diseño del Payment Element para que se ajuste a tu flujo del proceso de compra. La siguiente imagen es el mismo Payment Element renderizado usando diferentes configuraciones de diseño.

Payment Element con diferentes diseños.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
};

Aspecto

Usa la API Appearance para controlar el estilo de todos los elementos. Elige un tema o actualiza detalles específicos.

Por ejemplo, elige el tema «plano» y anula el color del texto principal.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {
  theme: 'flat',
  variables: { colorPrimaryText: '#262626' }
};

Consulta la documentación de la API de apariencia para obtener una lista completa de temas y variables.

Opciones

Los elementos Stripe aceptan más opciones que estos. Por ejemplo, muestra el nombre de tu empresa usando la opción de la empresa.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */};
const options = {
  business: { name: "RocketRides" }
};

El Payment Element acepta las siguientes opciones. Para obtener más información, consulta la entrada de referencia de cada opción.

Errores

Payment Element muestra automáticamente mensajes de error localizados para el cliente durante la confirmación del cliente para los siguientes códigos de error:

• generic_decline
• insufficient_funds
• incorrect_zip
• incorrect_cvc
• invalid_cvc
• invalid_expiry_month
• invalid_expiry_year
• expired_card
• fraudulent
• lost_card
• stolen_card
• card_velocity_exceeded

Para mostrar mensajes de otros tipos de errores, consulta los códigos de error y la gestión de errores.