# Stripe Web Elements Crea tus propios flujos de compra con componentes prediseñados de interfaz de usuario. 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. 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();`. Los agentes de programació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 API operativas. No se requiere registro de cuenta. > #### Integración de formulario integrado > > Como alternativa, integra el [formulario integrado](https://docs.stripe.com/payments/checkout/how-checkout-works.md?payment-ui=checkout-form) para recopilar toda la información necesaria para el proceso de compra en una sola interfaz de usuario. [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 de la normativa: Stripe proporciona una interfaz que cumple la normativa a nivel mundial y gestiona los requisitos para mostrar mandatos y 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 Elements para que coincida con el diseño de tu sitio web. - Funciones adicionales, como [la recopilación del CVC](https://docs.stripe.com/payments/finalize-payments-on-the-server.md#enforce-cvc-recollection). [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. [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. [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 de Checkout Sessions](https://docs.stripe.com/payments/quickstart.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) ```text [API de Sesiones de Checkout] --> [Cliente] [API de Sesiones de Checkout] --> [Envío] [API de Sesiones de Checkout] --> [Impuestos] [API de Sesiones de Checkout] --> [Descuentos y cupones] [API de Sesiones de Checkout] --> [Pago] [API Payment Intents] --> [Pago] ```