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

# Handle checkout success

Redirect to a success page or create custom logic that runs when checkout completes. Then, provision your app.

---

Paddle Checkout includes a final screen that lets customers know their purchase was successful. You can redirect to your own page or build a more advanced success workflow using [Paddle.js](https://developer.paddle.com/paddlejs/overview.md).

## How it works

When a customer successfully pays for items on a checkout, Paddle Checkout lets them know that their purchase was successful and sends an email with details of the order.

If you like, you can redirect to your own success page when checkout completes successfully. You might like to include tips and tricks for getting started, or point customers towards a complementary addon like training or implementation.

For more advanced success workflows, you can pass an `eventCallback` for [`checkout.completed`](https://developer.paddle.com/paddlejs/general/checkout-completed.md) to [`Paddle.Initialize()`](https://developer.paddle.com/paddlejs/methods/paddle-initialize.md). This lets you run your own JavaScript function when checkout completes. You might use this as part of [an inline checkout](https://developer.paddle.com/build/checkout/build-branded-inline-checkout.md) workflow to redirect to a new page or change elements on the checkout page to show order information.

If a checkout is for recurring products, Paddle automatically creates a new [subscription](https://developer.paddle.com/api-reference/subscriptions/overview.md) for the customer for the items that they purchased. You should [provision your app](https://developer.paddle.com/build/subscriptions/provision-access-webhooks.md) at this point to make sure the customer can access the products they paid for.

## Before you begin

You'll need to [include Paddle.js on your page](https://developer.paddle.com/paddlejs/include-paddlejs.md) and pass a [client-side token](https://developer.paddle.com/paddlejs/client-side-tokens.md).

To open a checkout, you'll need to [create products and prices](https://developer.paddle.com/build/products/create-products-prices.md) and [pass them to a checkout](https://developer.paddle.com/build/checkout/pass-update-checkout-items.md).

{% callout type="note" %}
To get a step-by-step overview of how to build a complete checkout, including passing checkout settings and prefilling properties, see [Build an overlay checkout](https://developer.paddle.com/build/checkout/build-overlay-checkout.md) or [build an inline checkout](https://developer.paddle.com/build/checkout/build-branded-inline-checkout.md)
{% /callout %}

## Write an event callback {% badge="Recommended" %}

[Paddle.js emits events](https://developer.paddle.com/paddlejs/events/overview.md) for key actions as a customer moves through checkout. It emits [a `checkout.completed` event](https://developer.paddle.com/paddlejs/general/checkout-completed.md) when a customer successfully pays for items on a checkout.

You can pass an `eventCallback` to `Paddle.Initialize()` to call a function when `checkout.completed` is emitted.

This example logs the `checkout.completed` event emitted by Paddle.js to console.

```javascript highlightLines="3-7"
Paddle.Initialize({
  token: 'live_7d279f61a3499fed520f7cd8c08', // replace with a client-side token
  eventCallback: function(data) {
    if (data.name == "checkout.completed") {
      console.log(data);
    }
  }
});
```

## Redirect to a success page

You can redirect customers to your own success page by passing a property to a checkout when opening it.

Use the `data-success-url` [HTML data attribute](https://developer.paddle.com/paddlejs/html-data-attributes.md) on your checkout launcher element, or pass `settings.successUrl` to the [`Paddle.Checkout.open()`](https://developer.paddle.com/paddlejs/methods/paddle-checkout-open.md) or [`Paddle.Initialize()`](https://developer.paddle.com/paddlejs/methods/paddle-initialize.md) methods do this.

{% tabs sync="js-html-implementation" %}
{% tab-item title="JavaScript properties" %}

This example sets the redirect page to `https://paddle.com/thankyou` using `Paddle.Checkout.open()`.

Use `Paddle.Initialize()` to [set a default](https://developer.paddle.com/build/checkout/set-up-checkout-default-settings.md) thank you page for all checkouts opened on a page.

```javascript highlightLines="6"
Paddle.Checkout.open({
  settings: {
    displayMode: "overlay",
    theme: "light",
    locale: "en",
    successUrl: "https://paddle.com/thankyou"
  },
  items: [
    {
      priceId: 'pri_01gs59hve0hrz6nyybj56z04eq',
      quantity: 1
    },
    {
      priceId: 'pri_01gs59p7rcxmzab2dm3gfqq00a',
      quantity: 1
    }
  ]
});
```

To learn more, see [`Paddle.Checkout.open()`](https://developer.paddle.com/paddlejs/methods/paddle-checkout-open.md)

{% /tab-item %}
{% tab-item title="HTML data attributes" %}

This example sets the redirect page to `https://paddle.com/thankyou` using `data-success-url`.

```html highlightLines="7"
<a 
  href='#' 
  class='paddle_button'
  data-display-mode='overlay'
  data-theme='light'
  data-locale='en'
  data-success-url='https://paddle.com/thankyou'
  data-items='[
    {
      "priceId": "pri_01gs59hve0hrz6nyybj56z04eq",
      "quantity": 1
    },
    {
      "priceId": "pri_01gs59p7rcxmzab2dm3gfqq00a",
      "quantity": 1
    }
  ]'
>
  Buy Now
</a>
```

To learn more, see [HTML data attribute](https://developer.paddle.com/paddlejs/html-data-attributes.md)

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

## Provision your app

When a customer completes checkout for recurring items, Paddle automatically creates [a related subscription](https://developer.paddle.com/api-reference/subscriptions/overview.md).

At this point, you should provision your app. Provisioning is how you grant customers access to your app, as well as determining which features they should have access to.

To learn more, see [Handle provisioning and fulfillment](https://developer.paddle.com/build/subscriptions/provision-access-webhooks.md)