Embed checkout in your website

Tutorial

📘

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

Follow these instructions to embed checkout in your website:

  1. 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}"
    }'
    
  2. Create a checkout instance by executing a POST {checkout-endpoint}/v2/checkout request with the JWT retrieved from the above call.

    📘

    Embedded Checkout:

  3. 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>
    
  4. 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>
    
  5. 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),
      },
    });
    
  6. Theme Embedded Checkout.

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