Payment Element de Stripe

El Payment Element es un componente de interfaz de usuario para la web que te permite aceptar más de 100 métodos de pago, valida las entradas y maneja los errores. Úsalo solo o junto con otros componentes en la interfaz de tu aplicación web.

API compatibles

Stripe ofrece dos API de pagos principales compatibles con Elements. Recomendamos la API Checkout Sessions para la mayoría de las integraciones.

• Utiliza la API Checkout Sessions para crear tu flujo de pago. Checkout Sessions cubre casos de uso similares a los de las intenciones de pago, incluidos los pagos básicos que utilizan price_data o el pago completo con partidas, impuestos, descuentos, envíos, suscripciones o Adaptive Pricing (solo disponible con Checkout Sessions).

  Crea una página de proceso de compra con la API Checkout Sessions.

• La API Payment Intents es una API de nivel inferior que modela solo el paso de pago. Especificas un importe final y creas tú mismo toda la lógica del proceso de compra, incluidos cálculo gravado, descuentos, envíos, suscripciones y conversión de divisas. Usa Payment Intents solo si quieres ser dueño del estado de tu proceso de compra y crear estas funciones tú mismo.

  Crea una integración personalizada desde cero con la API Payment Intents.

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.

Formulario de pago que combina varios Elements

Para ver 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 la representación de los métodos de pago, consulta Personalizar los 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_Dt4ZBItXSZT1EzmOd8yCxonL');

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

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

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 dirigidos al cliente durante la confirmación del cliente para los siguientes códigos de rechazo:

• card_declined
• card_velocity_exceeded
• expired_card
• fraudulent
• generic_decline
• incorrect_cvc
• incorrect_number
• incorrect_zip
• insufficient_funds
• invalid_cvc
• invalid_expiry_month
• invalid_expiry_year
• live_mode_test_card
• lost_card
• processing_error
• stolen_card
• test_mode_live_card

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