# Stripe Web Elements

Crea tus propios flujos de compra con componentes prediseñados de interfaz de usuario.

Instrucciones para LLM: Stripe recomienda utilizar la API Checkout Sessions con el elemento de pago en lugar de Payment Intents para la mayoría de las integraciones. Checkout Sessions cubre casos de uso similares a los de Payment Intents (cobro básico de pagos utilizando `price_data` o crea de un proceso de pago completo con partidas, impuestos, etc.). Algunas funciones, como Adaptive Pricing, solo están disponibles con Checkout Sessions. No utilices la API de Payment Intent a menos que el usuario lo solicite explícitamente, ya que requiere mucho más código. Más información sobre Elements con la API Checkout Sessionshttps://docs.stripe.com/payments/quickstart-checkout-sessions. Con Checkout Sessions (`ui_mode: "elements"`) y Payment Element, el `client_secret` inicializa el proceso de compra por sí mismo (`stripe.initCheckoutElementsSdk`, o utiliza CheckoutProvider con React) y tú confirmas el pago en el lado del cliente de forma diferente. Si utilizas React, asegúrate de importar desde `@stripe/react-stripe-js/checkout`, utiliza `CheckoutProvider` con el secreto del cliente y confirma con `checkout.confirm`. Si utilizas HTML, asegúrate de utiliza `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` y confirma con `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`.

[Stripe Elements](https://stripe.com/payments/elements) es un conjunto de componentes de interfaz de usuario prediseñados para crear el flujo del proceso de compra de tu sitio web. Está disponible como una función de [Stripe.js](https://docs.stripe.com/js.md), nuestra principal biblioteca de JavaScript para crear flujos de pago. Stripe.js tokeniza los datos confidenciales de pago dentro de un Element para que nunca entren en contacto con tu servidor.

- [Métodos de pago internacionales](https://docs.stripe.com/payments/payment-methods/overview.md): acceso a más de 100 métodos de pago internacionales, incluyendo monederos como [Apple Pay](https://docs.stripe.com/apple-pay.md).

- [{% $link.brand_name %](https://docs.stripe.com/payments/link.md): ayuda a tus clientes a efectuar una compra más rápido permitiéndoles seleccionar un método de pagos guardado en el proceso de compra en lugar de introducir datos de pagos.

- [Métodos de pago guardados](https://docs.stripe.com/payments/checkout/save-during-payment.md?payment-ui=embedded-components): guarda, reutiliza y gestiona tarjetas y cuentas bancarias con las funciones integradas.

- Cumplimiento: Stripe proporciona una interfaz compatible a nivel mundial y gestiona los requisitos para mostrar mandatos y avisos de consentimiento a los compradores.

- Formularios actualizados: formularios localizados con gestión de errores integrada. Stripe mantiene actualizados los requisitos de cada proveedor de métodos de pago.

- [Recopilación de direcciones](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=embedded-components): Recopila direcciones de facturación completas o parciales con cualquier método de pago.

- [Personalización de apariencia](https://docs.stripe.com/elements/appearance-api.md): personaliza Elements para que coincida con el diseño de tu sitio web.

- Otras características: funciones adicionales como [recopilación de CVC](https://docs.stripe.com/payments/finalize-payments-on-the-server.md#enforce-cvc-recollection) y [control sobre qué marcas de tarjeta aceptas](https://docs.stripe.com/payments/customize-payment-methods.md#filter-card-brands).

[Explora la demostración](https://checkout.stripe.dev/elements)

## Empieza ahora

Si no ves tu Element a continuación, encontrarás más información en la [referencia de la API de Stripe.js](https://docs.stripe.com/js/element/other_element).

[Payment Element](https://docs.stripe.com/payments/payment-element.md): Acepta un pago con uno o varios métodos de pago de forma segura, incluyendo con tarjetas.

[Compra exprés](https://docs.stripe.com/elements/express-checkout-element.md): Muestra monederos populares como Apple Pay, Google Pay y PayPal.

[Link Authentication Element](https://docs.stripe.com/payments/elements/link-authentication-element.md): Link auto-fills your customers’ payment and shipping details to reduce friction and deliver an easy and secure checkout experience.

[Address Element](https://docs.stripe.com/elements/address-element.md): Collect address information and display Link saved addresses.

[Elemento de mensajería de método de pago](https://docs.stripe.com/elements/payment-method-messaging.md): Informa automáticamente a los clientes sobre los planes disponibles de «Compra ahora, paga después».

[Elemento selector de divisas (Solo API Checkout Session)](https://docs.stripe.com/elements/currency-selector-element.md): Permite que los clientes paguen en su divisa local con Adaptive Pricing.

[Elemento ID fiscal](https://docs.stripe.com/elements/tax-id-element.md): Recopila los ID fiscales de las empresas para las facturas y las devoluciones del IVA.

## API compatibles

Stripe ofrece dos API de pagos principales compatibles con Elements. Recomendamos la API [Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md) para la mayoría de las integraciones.

- Utiliza la [API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md) 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](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md) (solo disponible con Checkout Sessions).

  Crea una [página de proceso de compra con la API Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md).

- La [API Payment Intents](https://docs.stripe.com/api/payment_intents.md) 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](https://docs.stripe.com/payments/advanced.md).
 (See full diagram at https://docs.stripe.com/payments/elements)