How does it work?
When you use a custom checkout page, you essentially bypass your platform's default checkout pages and replace them with
CheckoutJoy's checkouts. The checkout pages are hosted by us, and you also have the option to connect a custom domain
so that your pages are on your domain - e.g. https://checkout.yourdomain.com.
If you're using funnels or landing pages on other platforms, then your CTA buttons (e.g. your Buy now buttons)
needs to be updated to point to your new CheckoutJoy checkout pages.
Once checkout is complete, the customer is taken to a thank-you page that you configure, so they are back on your website.
Adding custom scripts and pixel code
If you need to add any custom code to a checkout page - example Google Analytics, Facebook pixels or the Facebook Domain Verification tag,
you can do so at Settings > Scripts & Pixels in the Page Builder.
Success Redirect URL
You have the option to take a customer back to your website when a checkout has successfully completed. This is usually referred to as a Thank-you page, but it can be any webpage where you want the customer to go after buying a product.
The Success Redirect URL can be set either on Product level, or on Checkout Page level, with the latter
being used first if it's been set up. CheckoutJoy also appends the transaction details to the URL as query parameters
so that you can use analytics on your thank-you page.
The following parameters are appended to the URL:
| Parameter | Description |
|---|---|
| purchaseId | The CheckoutJoy Purchase ID. This is the same an Order ID in other systems |
| productId | The unique CheckoutJoy product ID |
| productName | Human readable Product Name |
| customerEmail | Customer Email |
| customerName | Full name of the customer |
| currency | Transaction currency |
| total | Transaction total |
You can get the values from the URL using the URLSearchParams class like:
<script>
const urlParams = new URLSearchParams(window.location.search);
const total = urlParams.get('total');
</script>