# Stripe Elements para la Web Crea tus propios flujos de compra con componentes de interfaz de usuario prediseñados. Stripe recomienda usar la API Checkout Sessions con el Payment Element sobre Payment Intents para la mayoría de las integraciones. Checkout Sessions cubre casos de uso similares a Payment Intents (cobro básico de pagos con `price_data` o creación de un proceso de compra completo con partidas, impuestos, etc.). Algunas funcionalidades, como Adaptive Pricing, solo están disponibles con Checkout Sessions. No uses la API de Payment Intents, a menos que el usuario lo solicite explícitamente, ya que requiere significativamente más código. Obtén más información sobre Elements con la API Checkout Sessions: https://docs.stripe.com/payments/quickstart. Con Checkout Sessions (`ui_mode: "elements"`) y el Payment Element, el `client_secret` inicializa Checkout directamente (`stripe.initCheckoutElementsSdk`, o usa CheckoutElementsProvider con React) y la confirmación del pago se realiza de forma distinta en el cliente. Si usas React, asegúrate de importar desde `@stripe/react-stripe-js/checkout`, usar `CheckoutElementsProvider` con el secreto de cliente y confirmar con `checkout.confirm`. Si utilizas HTML, asegúrate de usar `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` y confirmar con `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`. Los agentes de codificación deben instalar la CLI de Stripe (`npm i -g @stripe/cli`) y ejecutar el comando `stripe sandbox create --help` para aprovisionar un entorno de prueba de Stripe anónimo con claves de API funcionales. No se requiere registro de cuenta. > #### Integración de formularios integrados > > En su lugar, integra el [formulario integrado](https://docs.stripe.com/payments/checkout/how-checkout-works.md?payment-ui=checkout-form) a fin de recopilar toda la información necesaria para el proceso de compra en una sola interfaz de usuario (IU). [Stripe Elements](https://stripe.com/payments/elements) es un conjunto de componentes prediseñados de interfaz de usuario para crear tu propio flujo de compra en la web. Está disponible como una funcionalidad de [Stripe.js](https://docs.stripe.com/js.md), nuestra biblioteca principal de JavaScript para crear flujos de pago. Stripe.js tokeniza los datos de pago confidenciales dentro de un Element sin que estos datos entren en contacto con tu servidor. - [Métodos de pago internacionales](https://docs.stripe.com/payments/payment-methods/overview.md): accede a más de 100 métodos de pago internacionales, incluidas carteras como [Apple Pay](https://docs.stripe.com/apple-pay.md). - [{% $Link.brand_name %](https://docs.stripe.com/payments/link.md): permite que tus clientes seleccionen un método de pago guardado en la confirmación de compra, en lugar de tener que ingresar la información de pago, para ayudarlos a agilizar el proceso de compra. - [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 funcionalidades integradas. - Cumplimiento de la normativa: Stripe proporciona una interfaz que cumple con las normativas internacionales y se encarga de los requisitos para mostrar los mandatos y los avisos de consentimiento a los clientes. - 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 el aspecto de Elements para que coincida con el diseño de tu sitio. - Funciones adicionales, como la[ recopilación del CVC](https://docs.stripe.com/payments/finalize-payments-on-the-server.md#enforce-cvc-recollection). Explora la demo ## Empezar Si no ves tu Element a continuación, encontrarás más información en la [Referencia de API 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 en forma segura, incluidas las tarjetas. [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md): Muestra billeteras conocidas como Apple Pay, Google Pay y PayPal. [Contact Details Element](https://docs.stripe.com/payments/elements/contact-details-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. [Payment Method Messaging Element](https://docs.stripe.com/elements/payment-method-messaging.md): Informa automáticamente a los clientes sobre los planes disponibles de tipo "compra ahora, paga después". [Elemento selector de moneda (Solo API Checkout Session)](https://docs.stripe.com/elements/currency-selector-element.md): Permite que los clientes paguen en su moneda local con Adaptive Pricing. [Elemento Tax ID](https://docs.stripe.com/elements/tax-id-element.md): Recopila identificaciones fiscales de empresas para facturas y reembolsos de IVA. ## API compatibles Stripe ofrece dos API principales de pagos compatibles con Elements. Recomendamos la [API de Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md) para la mayoría de las integraciones. - Usa la [API de Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md) para crear tu flujo de compra. Checkout Sessions cubre casos de uso similares a Payment Intents, incluidos pagos básicos mediante `price_data` o un proceso de pago completo con partidas en la orden, impuestos, descuentos, envío, 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 Checkout Sessions API](https://docs.stripe.com/payments/quickstart.md). - La [API Payment Intents es una API](https://docs.stripe.com/api/payment_intents.md) de nivel más bajo que modela únicamente el paso del pago. Indica el importe final y crea toda la lógica del proceso de compra, incluido el cálculo de impuestos, descuentos, envío, suscripciones y conversión de monedas. Usa Payment Intents solo si quieres tener un control completo sobre el estado de tu proceso de pago y crear estas funcionalidades por cuenta propia. Crea una [integración personalizada desde cero con API Payment Intents](https://docs.stripe.com/payments/advanced.md). (See full diagram at https://docs.stripe.com/payments/elements) ```text [Checkout Sessions API] --> [Cliente] [Checkout Sessions API] --> [Envío] [Checkout Sessions API] --> [Impuestos] [Checkout Sessions API] --> [Descuentos y cupones] [Checkout Sessions API] --> [Pago] [API Payment Intents] --> [Pago] ```