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

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://docs.dintero.com/feedback

```json
{
  "path": "/docs/checkout/display-checkout",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# Show the checkout to the customer

> Render the Dintero Checkout to your customer using the session URL, with options for redirect, embedded iframe, or pop-out display modes.

When the session is created, you will get a response looking like this:

```json theme={null}
{
  "id": "P12345678.55Q4CC1WuVJdgCssZfrf5a",
  "url": "https://checkout.dintero.com/v1/view/P12345678.55Q4CC1WuVJdgCssZfrf5a"
}
```

## Embedding

To embed this in your website, we will use the [Dintero Web SDK].

Using the SDK is quite straight forward. Include the SDK code in your site, and include this code in the website:

```html theme={null}
<div id="checkout-container"></div>
<script type="text/javascript">
    const container = document.getElementById("checkout-container");

    dintero.embed({
        container,
        sid: "P12345678.55Q4CC1WuVJdgCssZfrf5a",
    });
</script>
```

When embedded the payment will look like this:

<img src="https://mintcdn.com/dintero-c3a7bfec/TiCvqt4VXcXnNQNe/docs/assets/checkout/embedded.png?fit=max&auto=format&n=TiCvqt4VXcXnNQNe&q=85&s=08ef28b3654a32dbd70aeb452216fa56" alt="Embedded Checkout" width="1248" height="1312" data-path="docs/assets/checkout/embedded.png" />

## Redirecting

To redirect the user to the payment, point the browser to the url from the response.

Alternatively, you may use the [Dintero Web SDK].

```html theme={null}
<div id="checkout-container"></div>
<script type="text/javascript">
    dintero.redirect({
        sid: "P12345678.55Q4CC1WuVJdgCssZfrf5a",
    });
</script>
```

When viewing the payment, the customer will see something like this:

<img src="https://mintcdn.com/dintero-c3a7bfec/TiCvqt4VXcXnNQNe/docs/assets/checkout/express-redirect.png?fit=max&auto=format&n=TiCvqt4VXcXnNQNe&q=85&s=b5e0e43d8fee4056060ecb104d8cd723" alt="Express Checkout" width="2514" height="1522" data-path="docs/assets/checkout/express-redirect.png" />

## Completing the payment

To complete the payment, the user must input email and address (Use [test data] for testing purposes).

When the payment is completed, a transaction will be created, and you will be redirected to the `return_url` from the session.

The next step is to handle the redirect and callback to the website.

[test data]: /docs/checkout/checkout-testdata

[Dintero Web SDK]: https://github.com/Dintero/Dintero.Checkout.Web.SDK