Docs
/
Features
/
Widgets
/
Overview

Widgets

The checkout widget is an all-in-one solution to accept payments anywhere on the web! The html widget is the simplest way to start selling products as it works seamlessly on any website and takes only minutes to set up.

The widget is added to a page by adding a short code snippet anywhere to a page, and supports

  • Multiple currencies - if enabled the cart is automatically converted to the customer's local currency
  • Automatic Sales Tax and Invoicing through Quaderno
  • Multiple payment options

This feature is currently in beta and some advanced features like order bumps are still being added. Please reach out with any feedback or requests.

How does it work?

A widget is a standalone checkout form that can be embedded on any page and supports all of our features and supported payment processors. This means that you can set up a checkout form for any product and embed it anywhere on your website using a small code snippet.

The widget is configured in the CheckoutJoy Dashboard and added to a page by adding a unique code snippet to a page. Common configuration parameters include the product to sell, the form fields that the customer must complete, and the payment methods that are available to the customer.

When the page loads, the widget fetches its configuration and renders the checkout form on the page. The widget can either be rendered inline as part of the page, or as a popup linked to a button or link. When configured as a popup, the widget displays as a modal popup when a button or link is clicked.

accepting payments with the checkout widget

A Success Redirect URL can also be specified so that the customer is redirected to a thank-you page when the payment is completed.

Setting up a Widget

Create a widget by going to the Widgets page in the CheckoutJoy dashboard and completing the setup wizard.

The easiest way to complete the setup is to start at the left (General Settings), and working your way through each tab on the configuration screen. The last tab of the configuration is the Embed tab which has the unique code snippet to add to your website.

For Inline widgets, the code snippet is added to the actual place where the widget needs to display. For Popup widgets the code is added to the place where the CTA button needs to display.

Embedding the Widget on a Page

Each widget has a unique code snippet to add it to a webpage. The code snippet is added anywhere on a page where you want the widget to display.

The short code includes a script that fetches the configuration and renders the widget.

<div id="w_ko09nemij"></div>
<script src="https://api.checkoutjoy.com/v2/widgets/bW9sbGllOmtvMDluZW1pag==/bundle"></script>

A widget can be added multiple times to a website on different pages. You can even combine multiple widgets on the same page by adding each widget's unique embed code to the page. The only limitation is that a widget can only be added once to a specific page.

Adding the widget to a page doesn't affect the styling or functionality of that page, so there is no risk when adding the script code to a page.

Here's an example of adding a custom code section to a page in Kajabi:

CheckoutJoy widget to Kajabi

Updating the Widget Configuration

A widget can be updated at any point by changing the configuration on the Widgets page and saving the changes. Changes to a widget's configuration will take effect immediately after the new settings are saved.

Last updated on October 11, 2022