Tutorial

📘

The Embedded Checkout sample projects for Node and Python enable you to experiment with Embedded Checkout and produce a working prototype with minimal changes.

To support Apple Pay on Embedded Checkout, follow these instructions.

The authentication service URL and other service URLs are available in the API endpoints section.

Follow these instructions to embed checkout in your website:

Generate an access token by executing a POST {peach-auth-service}/api/oauth/token request with your client ID, client secret, and merchant ID.

curl --location --request POST '{peach-auth-service}/api/oauth/token' 
--header 'content-type: application/json' 
--data-raw 
'{
    "clientId": "{clientId}",
    "clientSecret": "{clientSecret}",
    "merchantId": "{merchantId}"
}'

Create a checkout instance by executing a POST {checkout-endpoint}/v2/checkout request with the JWT retrieved from the above call.
📘
Embedded Checkout:
- Requires a unique nonce for each request made to the /v2/checkout URL in the same way that Hosted Checkout does for its requests.
- Requires that you allowlist URL domains that execute the API POST request to Checkout for added security.
- Can tokenise cards.
Create the payment form by including the script tag on your HTML page.
🚧
You must set a height for the element with the checkout-root ID:
- Minimum: 360 pixels
- Fill the container: 100%
- Only element on the page: 100vh to fill the screen height
```
<html>
<head>
</head>
<body>
<div id="payment-form"></div>
<script src="https://sandbox-checkout.peachpayments.com/js/checkout.js"></script>
</body>
```

Instantiate Embedded Checkout using your entity ID and the checkout ID:

<script>
  const checkout = Checkout.initiate({
    key: <entity id>,
    checkoutId: <Checkout Id>,
 });

  checkout.render("#payment-form");
</script>

Get the status of the checkout from Embedded Checkout events.

const checkout = Checkout.initiate({
  key: <entity id>,
  checkoutId: <Checkout Id>,
  events: {
    onCompleted: (event) => console.log(event),
    onCancelled: (event) => console.log(event),
    onExpired: (event) => console.log(event),
  },
});

Theme Embedded Checkout.

const checkout = Checkout.initiate({
  key: "<entity id>",
  checkoutId: "<Checkout Id>",
  options: {
    theme: {
      brand: {
        primary: "#ff0000",
      },
      cards: {
        background: "#00ff00",
        backgroundHover: "#F3F3F4",
      }
    },
  },
});

Customise the order of payment methods.

const checkout = Checkout.initiate({
  key: "<entity id>",
  checkoutId: "<Checkout Id>",
  options: {
    ordering: {
      PAYFLEX: 1,
      CARD: 2,
    },
  },
});

Consolidated example snippet

The following snippet provides an example of the complete HTML page:

<html>
  <head> </head>
  <body>
    <div id="payment-form"></div>
    <script src="https://sandbox-checkout.peachpayments.com/js/checkout.js"></script>

    <script>
      const checkout = Checkout.initiate({
        key: "{entityId}",
        checkoutId: "{checkoutId}",
        options: {
          theme: {
            brand: {
              primary: "#ff0000",
            },
            cards: {
              background: "#00ff00",
              backgroundHover: "#F3F3F4",
            },
          },
        },
      });

      checkout.render("#payment-form");
    </script>
  </body>
</html>

🚧
Running the local HTML page in your browser only renders the Checkout instance; you can view the payment methods but cannot attempt a payment. To attempt a payment, you must host the HTML page.
One way to do this locally is by using Python's http.server functionality, for example, by executing python -m http.server 8000 from the HTML file's directory, and then opening http://localhost:8000/file.html in your browser.