Stripe Payment Element

Acepta métodos de pago de todo el mundo con un componente de interfaz de usuario seguro e integrable.

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 de datos y maneja los errores. Úsalo solo o con otros elementos en el front-end de tu aplicación web.

En esta demostración, solo se muestra Google Pay o Apple Pay si tienes una tarjeta activa con cualquiera de las billeteras.

API compatibles

Stripe ofrece dos API de infraestructura central de pagos compatibles con Elements que te brindan 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 de compra y cuánto control necesites. Puedes crear una página de confirmación de compra con la API Checkout Session o crear una integración avanzada con la API Payment Intents.

La API Checkout Sessions te permite modelar el flujo de compra del cliente. Esto incluye las partidas incluidas en sus direcciones de compra, gestión de cobros y envío, las tasas impositivas aplicables y los cupones o descuentos. La Checkout Session te permite crear suscripciones, calcular tasas impositivas con Stripe Tax e iniciar pagos.
La API Payment Intents te permite modelar el paso de pago. A diferencia de la API Checkout Sessions, que requiere detalles de partidas individuales, solo especificas el importe final que deseas cobrar. Esto es adecuado para flujos de pago, como los pagos fuera de la sesión. Si quieres usar Stripe para calcular los impuestos aplicables o crear suscripciones, debes integrarte con la API de Stripe Tax o la API de suscripciones, respectivamente.

Las Checkout Sessions incluyen información del cliente, envíos, impuestos, descuentos, cupones e integraciones de pagos, mientras que Payment Intents solo gestiona la integración de pagos.

Crea una página de confirmación de compra con Payment Element

Crea una integración con Payment Element mediante la API de sesiones de Checkout.

Crea una integración avanzada con Payment Element

Crea una integración con Payment Element mediante la API Payment Intents.

Clonación de una aplicación de ejemplo en GitHub

HTML · React · Vue

Ver la referencia sobre Stripe.js

Combina elementos

El Payment Element interopera con otros elementos. Por ejemplo, este formulario usa un elemento adicional para autocompletar los datos de la confirmación de compra y otro para recopilar la dirección de envío.

Nota

No puedes eliminar el acuerdo legal de Link porque es obligatorio para garantizar el cumplimiento de los conocimientos adecuados de los usuarios sobre las condiciones de servicio y las políticas de privacidad. El objeto de condiciones no se aplica al acuerdo legal de Link.

Un formulario con la información de contacto, la dirección de envío y los campos de pago. La información de contacto está etiquetada como Link Authentication Element, la dirección de envío como Address Element y los campos de pago están etiquetados como Payment Element

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

También puedes combinar Payment Element con Express Checkout Element. En este caso, los pagos con carteras digitales, como Apple Pay y Google Pay, solo se muestran en Express Checkout Element para evitar duplicaciones.

Métodos de pago

Stripe habilita ciertos métodos de pago para ti de forma predeterminada. También podríamos habilitar métodos de pago adicionales después de notificarte. Usa el Dashboard para activar o desactivar 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 que más corresponden en función de factores como la ubicación, la moneda y el importe de la transacción.

Por ejemplo, si un cliente en Alemania paga en euros, ve todos los métodos de pago activos que aceptan esta moneda, y los primeros que se muestran son 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 procesan los métodos de pago, por ejemplo, filtrando las marcas de tarjetas que no quieras admitir, consulta Personaliza los métodos de pago. Para agregar métodos de pago integrados fuera de Stripe, usa métodos de pago personalizados.

Si tu integración requiere que indiques los métodos de pago manualmente, consulta la sección Lista manual de métodos de pago.

Diseño

Puedes personalizar el diseño del Payment Element para que se ajuste a tu flujo de compra. En la siguiente imagen, se representa el mismo Payment Element con diferentes configuraciones de diseño.

Ejemplos de los tres formularios de finalización de compra. En la imagen, se muestra la opción donde los clientes eligen los métodos de pago que aparecen en pestañas, o las dos opciones de acordeón, donde los métodos de pago aparecen verticalmente. En la vista de acordeón, puedes elegir mostrar los botones de opción o no.

Payment Element con diferentes diseños.

El diseño de pestañas muestra los métodos de pago horizontalmente mediante pestañas. Para usar este diseño, establece el valor de layout.type en tabs. También puedes especificar otras propiedades, como layout.defaultCollapsed.

index.js
Visualizar el ejemplo completo
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

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

Appearance

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

Ejemplos de modos claros y oscuros para el formulario de finalización de compra del elemento de pago.

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

index.js
Visualizar el ejemplo completo
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

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

Consulta la documentación de la API Appearance para ver una lista completa de temas y variables.

Opciones

Los elementos de Stripe admiten más opciones que estas. Por ejemplo, puedes mostrar el nombre de tu empresa con la opción business.

index.js
Visualizar el ejemplo completo
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

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

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

layout	Diseño para el Payment Element.
defaultValues	Información inicial del cliente para mostrar en el Payment Element.
business	Información sobre tu empresa para mostrarla en el Payment Element.
paymentMethodOrder	Orden en el que deben aparecer los métodos de pago.
fields	Si ciertos campos se mostrarán.
readOnly	Si los datos de pago pueden modificarse.
condiciones	Si los mandatos u otros contratos legales se muestran en el Payment Element. Según el comportamiento predeterminado, se muestran solo cuando sea necesario.
carteras	Si se mostrarán o no billeteras como Apple Pay o Google Pay. Según el valor predeterminado, se muestran cuando sea posible.

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 Códigos de error y gestión de errores.