Payment Element de Stripe

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

¿Te interesa utilizar Stripe Tax, descuentos, gastos de envío o conversión de divisas?

Estamos desarrollando una integración de Payment Element que gestiona los impuestos, los descuentos, los envíos y la conversión de divisas. Para más información, lee la guía para Crear una página de proceso de compra.

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.

Disponibilidad por países

En Brasil y Tailandia, Payment Elements no es compatible con Link.

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

Puedes integrar el Payment Element con:

La API Checkout Sessions para crear una página de proceso de compra.
La API Payment Intents para crear una integración avanzada.

Crea una página de proceso de compra con Payment Element

Crea una integración con el Payment Element mediante la API Checkout Sessions.

Vista previa pública

Crea una integración avanzada con Payment Element

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

Clona una aplicación de ejemplo en GitHub

HTML · React · Vue

Consulta la referencia de Stripe.js

Crea un Payment Element

Este código crea un Payment Element y lo inserta en el DOM:

index.js
Ver la muestra completa
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = { /* appearance */ };
const options = { layout: 'accordion', /* options */ };
const elements = stripe.elements({clientSecret
, appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');

Aceptar pagos con el Payment Element requiere un código de back-end adicional. Consulta el inicio rápido o la aplicación de muestra para saber cómo funciona.

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.

Nota

No puede eliminar el acuerdo legal de Link porque es necesario para garantizar el cumplimiento de la concienciación adecuada de los usuarios sobre las condiciones de los servicios y las políticas de privacidad. El objeto terms no se aplica al contrato legal de Link.

Un formulario con información de contacto, dirección de envío y 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, como Payment Element

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, consulta Métodos de pago externos.

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.

Ejemplos de los tres formularios del proceso de compra. La imagen muestra la opción de pestaña, donde los clientes eligen entre los métodos de pago que se muestran como pestañas o las dos opciones de acordeón, donde los métodos de pago se enumeran de forma vertical. Puedes elegir mostrar los botones de opción o no en la vista de acordeón.

Payment Element con diferentes diseños.

El diseño de las pestañas muestra los métodos de pago de forma horizontal usando 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
Ver la muestra completa
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.

Ejemplos de modos claros y oscuros para el formulario del proceso de compra del Payment Element.

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

index.js
Ver la muestra completa
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.

index.js
Ver la muestra completa
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

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

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

diseño	Diseño para Payment Element.
defaultValues	Información inicial del cliente para mostrar en el Payment Element.
empresa	Información sobre tu empresa para mostrarla en el Payment Element.
paymentMethodOrder	Pedido en el que se enumeran los métodos de pago.
campos	Si se desea mostrar ciertos campos.
readOnly	Si los datos de pago pueden modificarse.
condiciones	Si los mandatos u otros acuerdos legales se muestran en el Payment Element. El comportamiento predeterminado es mostrarlos solo cuando sea necesario.
monederos	Si se desea mostrar monederos como Apple Pay o Google Pay. El comportamiento predeterminado es mostrarlos 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 los códigos de error y la gestión de errores.