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.

Compatible APIs

Stripe offers two core payments APIs compatible with Elements that give you the flexibility to accept various types of payments from your customers. You can integrate these APIs into Stripe’s prebuilt payment interfaces. While we recommend using Checkout Sessions for most users, the APIs serve slightly different use cases depending on how you choose to structure your checkout flow and how much control you require. You can build a checkout page with the Checkout Session API or build an advanced integration with the Payment Intents API.

The Checkout Sessions API allows you to model your customer’s checkout flow. This includes the line items included in their purchase, billing and shipping addresses, applicable tax rates, and coupons or discounts. The Checkout Session allows you to create subscriptions, calculate tax rates with Stripe Tax, and initiate payments.
The Payment Intents API allows you to model the payments step. Unlike the Checkout Sessions API, which requires line item details, you only pass in the final amount you want to charge. This is suitable for payment flows, such as off-session payments. If you want to use Stripe to calculate applicable taxes or create subscriptions, you must integrate with the Stripe Tax API or Subscriptions API, respectively.

Checkout Sessions include customer information, shipping, tax, discounts, coupons, and payments integrations, while Payment Intents only handle payments integration.

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.