> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Stripe Checkout: acepta pagos en tus landing pages

> Añade un Stripe Checkout a cualquier landing page de LanderLab. Vende productos de pago único o recurrentes, aplica cupones, recoge datos de envío y redirige a los compradores tras el pago.

El elemento Stripe Checkout añade un formulario de pago seguro directamente a tu landing page. Los visitantes introducen los datos de su tarjeta y pagan sin salir de la página, así que el comprador se mantiene dentro de tu embudo desde el primer clic hasta la compra.

Los pagos los procesa Stripe. Los datos de la tarjeta van directamente a Stripe y nunca pasan por LanderLab.

## Antes de empezar

Conecta tu cuenta de Stripe en **Integrations**. El checkout usa esa conexión para procesar los pagos y para cargar tus productos y cupones de Stripe.

## Añade el elemento Stripe Checkout

1. Abre tu página en el editor.
2. En la barra lateral izquierda, abre **Elements** y busca la categoría **Conversion**.
3. Arrastra **Stripe Checkout** al lienzo.
4. Haz clic en el elemento para abrir sus ajustes en el panel derecho.

El lienzo muestra el checkout en **modo de vista previa**. Se actualiza en tiempo real a medida que cambias los ajustes, así que ves exactamente lo mismo que verán tus visitantes.

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/HSpSy6DDgRjR3IGt/images/stripe-element.png?fit=max&auto=format&n=HSpSy6DDgRjR3IGt&q=85&s=e608f71f343f72eb13bc0db3b4ff4d90" alt="Stripe Element" width="1568" height="781" data-path="images/stripe-element.png" />
</Frame>

## Producto

Elige de dónde salen los datos del producto con el ajuste **Source**.

| Source             | Cuándo usarlo                                                                                            |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| **Manual**         | Escribes el nombre, el precio y la moneda directamente en LanderLab. No necesitas un producto en Stripe. |
| **Stripe product** | Eliges un producto que ya creaste en Stripe. Su precio y su facturación vienen de Stripe.                |

**Manual** te ofrece estos campos:

* **Name:** el nombre del producto que aparece en la parte superior del checkout
* **Description:** una línea breve bajo el nombre, por ejemplo `Envío gratis`
* **Image:** una miniatura opcional del producto

Con **Stripe product**, abre el desplegable **Product** y busca en tu catálogo de Stripe. Los productos se agrupan en **One-time** (pago único) y **Recurring** (recurrente). Si acabas de añadir un producto en Stripe y no aparece, haz clic en **Refresh products**. También puedes añadir una **Image** para mostrarla junto al nombre del producto.

<Warning>
  Si pones **Source** en **Stripe product**, tienes que seleccionar un producto. Sin él, el checkout no funcionará en la página publicada.
</Warning>

## Facturación

Para los productos manuales, elige **One-time** para un pago único o **Recurring** para una suscripción, y después define el **Price** y la moneda. En los productos de Stripe, estos ajustes están ocultos porque el precio y el tipo de facturación vienen de Stripe.

### Adaptive Pricing

Activa **Adaptive Pricing** para mostrar el precio en la moneda local del visitante. Stripe se encarga de la conversión y el checkout muestra un selector de moneda para que el comprador elija entre tu moneda y la suya. El importe final puede variar ligeramente según el tipo de cambio.

### Cantidad

Define la **Quantity** predeterminada del pedido. Activa **Let customers change quantity** para mostrar un selector de cantidad y después define el **Min** y el **Max** que puede elegir el comprador. El checkout muestra un subtotal y un total que se actualizan al cambiar la cantidad.

### Descuento

| Opción         | Lo que ve el comprador                                                 |
| -------------- | ---------------------------------------------------------------------- |
| **None**       | Sin descuento                                                          |
| **Coupon**     | El cupón que elijas se aplica automáticamente en el checkout           |
| **Promo code** | Un campo **Add promotion code** donde el comprador introduce un código |

Los cupones y los códigos promocionales vienen de tu cuenta de Stripe. Créalos primero en Stripe y después haz clic en **Refresh coupons** si no aparecen en la lista.

<Warning>
  Si pones **Discount** en **Coupon**, tienes que seleccionar un cupón. Sin él, el checkout no funcionará en la página publicada.
</Warning>

## Envío

Activa **Collect shipping address** para pedir una dirección de entrega en el checkout. El formulario añade una sección **Shipping information** con los campos de nombre completo, país y dirección. La casilla **Billing info is same as shipping** evita que el comprador tenga que escribir su dirección dos veces.

* **Countries:** mantén **All countries** o selecciona solo los países a los que envías
* **Shipping Options:** haz clic en **Add shipping option** para crear una tarifa de envío

Cada opción de envío tiene:

* **Name**, por ejemplo `Envío estándar` o `Exprés`
* **Price**, con `0` para envío gratuito
* **Delivery estimate**, un rango mínimo y máximo de días de entrega

Añade varias opciones para que el comprador pueda elegir. La tarifa seleccionada se suma al total del pedido.

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OOJD61koRNSO9OFT/shipping-checkout-images/d54e4bbb-3f9a-4d83-bb76-27e49777bff8.png?fit=max&auto=format&n=OOJD61koRNSO9OFT&q=85&s=1631193cdb586fdd3e94d36cb58d47b8" alt="D54e4bbb 3f9a 4d83 Bb76 27e49777bff8" width="1083" height="958" data-path="shipping-checkout-images/d54e4bbb-3f9a-4d83-bb76-27e49777bff8.png" />
</Frame>

## Checkout

* **Button Text:** texto personalizado para el botón de pago. Déjalo vacío para usar el predeterminado de Stripe, que muestra el importe, como `Pay $88.20`
* **Language:** el idioma del formulario de pago. **Auto** usa el idioma del navegador del visitante
* **Theme:** el estilo visual del formulario. **Match Page** lo integra con el diseño de tu página
* **Billing Address:** recoge la dirección de facturación completa del comprador
* **Stripe Link:** permite que el comprador guarde sus datos de pago con Stripe Link para comprar más rápido la próxima vez
* **One purchase per visitor:** impide que un mismo visitante pague dos veces, útil en ofertas de pago único

## Pago completado

Elige qué ocurre después de un pago correcto con el ajuste **Action**.

| Action              | Qué ocurre                                                                          |
| ------------------- | ----------------------------------------------------------------------------------- |
| **Stay on page**    | Un mensaje de confirmación sustituye al formulario de pago                          |
| **Redirect to URL** | El comprador va a otra página, por ejemplo un upsell o una página de agradecimiento |
| **Go to element**   | La página se desplaza hasta otra sección                                            |
| **Open a popup**    | Se abre uno de los popups de esta página                                            |

Con **Stay on page**, escribe tu propio **Confirmation Message**. Si lo dejas vacío, el comprador verá `Payment received, thank you!`

## Diseño

Como en otros elementos, puedes ajustar la **Position** (alineación a la izquierda, al centro o a la derecha), las **Dimensions** (el ancho predeterminado es `360px`) y el **Spacing** (margin y padding).

## Antes de publicar

1. Haz clic en **Preview** y revisa el checkout tal y como lo vería un visitante.
2. Comprueba el precio, la moneda, el descuento y los totales de envío.
3. Asegúrate de que no aparezca ningún aviso bajo el checkout en el lienzo. Un aviso significa que falta un producto o un cupón obligatorio.
4. Publica la página.

## Preguntas frecuentes

<AccordionGroup>
  <Accordion title="¿Necesito un producto de Stripe para usar el checkout?">
    No. Pon **Source** en **Manual** e introduce el nombre, el precio y la moneda en LanderLab. Usa **Stripe product** solo si quieres gestionar el precio y la facturación en Stripe. En cualquier caso, tu cuenta de Stripe debe estar conectada en **Integrations**.
  </Accordion>

  <Accordion title="¿Puedo vender suscripciones?">
    Sí. Elige **Recurring** en **Billing**, o selecciona un producto recurrente de tu catálogo de Stripe.
  </Accordion>

  <Accordion title="¿Qué diferencia hay entre un cupón y un código promocional?">
    El cupón se aplica automáticamente a todos los compradores. El código promocional muestra un campo en el que el comprador escribe el código.
  </Accordion>

  <Accordion title="¿Por qué no aparece mi nuevo producto o cupón de Stripe?">
    Haz clic en **Refresh products** o **Refresh coupons** en el desplegable para cargar los datos más recientes de Stripe.
  </Accordion>

  <Accordion title="¿Dónde veo mis pagos?">
    Todos los pagos, reembolsos y datos de clientes están en tu panel de Stripe.
  </Accordion>
</AccordionGroup>
