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.

Para probar el Payment Element por ti mismo, comienza con uno de estos ejemplos:

Crea un Payment Element

Este código crea un Payment Element y lo inserta 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');

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.

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.

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: "RocketRides"
};

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