Embed checkout in your website
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.
- Requires a unique nonce for each request made to the
-
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>
-
Ensure that the checkout script from step 3 is fully loaded and then instantiate Embedded Checkout using your entity ID and the checkout ID.
If the script is not fully loaded, your customers might receive
Checkout not found
errors and be unable to pay.<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), }, });
-
const checkout = Checkout.initiate({ key: "<entity id>", checkoutId: "<Checkout Id>", options: { theme: { brand: { primary: "#ff0000", }, cards: { background: "#00ff00", backgroundHover: "#F3F3F4", } }, }, });
-
Customise the availability and 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 executingpython -m http.server 8000
from the HTML file's directory, and then openinghttp://localhost:8000/file.html
in your browser.
Updated about 17 hours ago