Tutorial

📘

The Embedded Checkout sample project enables you to experiment with Embedded Checkout and produce a working prototype with minimal changes.

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:

<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: {
      EFTSECURE: 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.