Render the iframe

<script
	data-brand-color="#008B8B"
	data-container-id="checkout-container"
	data-no-padding="false"
	data-session-id="se_1u71i6dgrlHmfnFwbtqDvl8Mbhs"
	src="https://checkout.sandbox.ledyer.com/bootstrap.js"
></script>

// Include in onMount or similar hook
const s = document.createElement('script');

s.setAttribute('data-brand-color', '#008B8B');
s.setAttribute('data-container-id', 'checkout-container');
s.setAttribute('data-no-padding', 'true');
s.setAttribute('data-session-id', 'se_2A123Kfl8maqB4sJOG0pKi06aFk');
s.setAttribute('src', 'https://checkout.sandbox.ledyer.com/bootstrap.js');

document.body.appendChild(s);

Options

src string Optional

This script decides which environment to use. Production: `https://checkout.live.ledyer.com/bootstrap.js`. Sandbox: `https://checkout.sandbox.ledyer.com/bootstrap.js`.

data-brand-color string Optional

Enter a color hex value to change the background color for the CTA elements in the Ledyer checkout, depending on the color provided the button text will be set to black or white. Default background color is black (#000000).

data-container-id string Optional

Enter the id of the element where you want the iframe to be placed. If not specified the iframe will be placed next to the script tag.

data-no-padding boolean Optional

Ledyer checkout comes with a wrapping padding of 12px by default. Set to `true` if you want to handle all padding on your own.

data-session-id string

Enter the value of the `sessionId` string that was obtained from the response of the [Create order session](/docs/payment-products/checkout/create-order-session#handling-sessions) request.

Handling Sessions and secrets

The sessionId string should be stored and re-used until the purchase has been completed or the expiresAt time has been reached.