> For the complete documentation index, see [llms.txt](https://developer.paddle.com/llms.txt).

# Overlay checkout

Overlay checkout is the quickest way to integrate Paddle with your website or app. Turn any element into a checkout link, letting Paddle handle the entire checkout process.

---

Integrate Paddle with a few lines of code using overlay checkout. Customers sign up and pay for subscriptions using an overlay.

Using overlay checkout, you can:

- Integrate Paddle quickly with a few lines of code.
- Choose whether to present a one-page or a multi-page checkout experience.
- Present an optimized checkout experience, where customers can sign up and pay without leaving your site.
- Create checkout links using [HTML data attributes](https://developer.paddle.com/paddlejs/html-data-attributes.md) — perfect for CMS-based sites.
- Use [Paddle.js events](https://developer.paddle.com/paddlejs/events/overview.md) to build advanced checkout experiences.

## How it works

Overlay checkout works by showing an overlay with all the checkout details. You can turn any element on your page into a button that opens a checkout.

The overlay includes all checkout functionality including the items list, totals, and options for changing what's on the checkout.

Paddle automatically creates a subscription when a checkout completes, [ready for you to provision](https://developer.paddle.com/build/subscriptions/provision-access-webhooks.md).

## Customer journey

{% tabs sync="checkout-variant" %}
{% tab-item title="One-page checkout" %}

{% journey %}
{% journey-step title="Customer launches overlay checkout" id="journey-eap-step-1" %}

You can turn any element on your page into a Paddle Checkout button, [passing items](https://developer.paddle.com/build/checkout/pass-update-checkout-items.md) or an existing transaction to [Paddle.js](https://developer.paddle.com/paddlejs/overview.md) to say what the checkout is for.

{% /journey-step %}

{% journey-step title="Customer enters their details on one screen" id="journey-eap-step-2" %}

Overlay checkout asks customers for their email, [country](https://developer.paddle.com/concepts/sell/supported-countries-locales.md), and (in some regions) ZIP or postal code. On the same screen, customers are presented with the card payment form, as well as options to pay with PayPal, Apple Pay, Google Pay, or [other local payment method](https://developer.paddle.com/concepts/payment-methods/overview.md).

{% /journey-step %}

{% journey-step title="Checkout completed" id="journey-eap-step-3" %}

Paddle routes every payment to the best acquirer for that sale to get the best possible chance of success. Customers land on [a success page that you can choose](https://developer.paddle.com/build/checkout/handle-success-post-checkout.md).

{% /journey-step %}

{% journey-step title="Paddle creates a subscription" id="journey-step-4" %}

Paddle automatically creates a subscription for the customer, [ready for you to provision](https://developer.paddle.com/build/subscriptions/provision-access-webhooks.md). The payment method the customer used is held on file for renewals or subscription changes.

{% /journey-step %}
{% /journey %}

{% /tab-item %}
{% tab-item title="Multi-page checkout" %}

{% journey %}
{% journey-step title="Customer launches overlay checkout" %}

You can turn any element on your page into a Paddle Checkout button, [passing items](https://developer.paddle.com/build/checkout/pass-update-checkout-items.md) or an existing transaction to [Paddle.js](https://developer.paddle.com/paddlejs/overview.md) to say what the checkout is for.

{% /journey-step %}

{% journey-step title="Customer enters their details" %}

The first screen asks customers for their email, [country](https://developer.paddle.com/concepts/sell/supported-countries-locales.md), and (in some regions) ZIP or postal code. You can [prefill this information](https://developer.paddle.com/build/checkout/prefill-checkout-properties.md) to skip this step entirely.

{% /journey-step %}

{% journey-step title="Customer chooses a payment method" %}

Customers land on a card payment form, or they can choose to pay with PayPal, Apple Pay, Google Pay, or [other local payment method](https://developer.paddle.com/concepts/payment-methods/overview.md).

{% /journey-step %}

{% journey-step title="Checkout completed" %}

Paddle routes every payment to the best acquirer for that sale to get the best possible chance of success. Customers land on [a success page that you can choose](https://developer.paddle.com/build/checkout/handle-success-post-checkout.md).

{% /journey-step %}

{% journey-step title="Paddle creates a subscription" %}

Paddle automatically creates a subscription for the customer, [ready for you to provision](https://developer.paddle.com/build/subscriptions/provision-access-webhooks.md). The payment method the customer used is held on file for renewals or subscription changes.

{% /journey-step %}
{% /journey %}

{% /tab-item %}
{% /tabs %}