Stripe Payment Element

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.

Para probar el Payment Element tú mismo, comienza con uno de estos ejemplos:

Crea un Payment Element

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

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');

Para aceptar pagos con el Payment Element, se requiere un código de back-end adicional. Consulta la guía de inicio rápido o la aplicación de ejemplo para saber cómo funciona.

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.

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

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.

Payment Element con diferentes diseños.

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.

Por ejemplo, elige el tema «plano» y sustituye 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 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.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

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