Render the iframe

Script tag

<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>

Programmatic example

// 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

stringOptional

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

stringOptional

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

stringOptional

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

booleanOptional

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 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.