Adding your payment options to Kajabi

Adding your configured payment buttons to the Kajabi checkout page

Setup Checklist

This guide assumes that you have already completed the following tasks

The Code Snippet

The following code snippet is all it takes to add your payment button Kajabi. You need to copy this code snippet and paste it in your Kajabi Checkout Settings section.

<script src="https://cdn.checkoutjoy.com/cj-kajabi.js"></script>
<script>
   CheckoutJoy.render({
       key: 'YOUR_KEY_HERE',
   });
</script>

Additional Options

The following settings can be added to the code snippet as required:

customCss

Add custom CSS to style the payment buttons.

Apply all custom styles to the "cj-button" class

The option value must contain valid CSS.

Use the backtick (grave accent) character for multiline strings.

ValueEffect
Valid CSS StringThe CSS
<default>No styles are applied

Example:

The following example creates a yellow button with black text, which changes to brighter yellow on hover:

<script src="https://cdn.checkoutjoy.com/cj-kajabi.js"></script>
<script>
   CheckoutJoy.render({
       key: 'YOUR_KEY_HERE',
        customCss: `
           .cj-button {
              color: black;
              border-color: #fbbc12;
              border-radius: 0;
              background-color: #fbbc12 !important;
              font-weight: 700;
           }
           .cj-button:hover {
                 -webkit-filter: brightness(120%);
                 filter: brightness(120%);
           }
      `,
   });
</script>

decimal

Specify the decimal separator to use when parsing pricing information with decimal values. This value will depend on the currency of your Offer.

ValueEffect
,The decimal value is separated by a comma e.g. €10.00,00 EUR
<default>The decimal value is separated by a dot e.g. $10,000.00 USD

Example:

For a €1000 Offer that is displayed as €1.000,00 EUR by default on Kajabi's checkout page, the decimal option must be specified as ",".

<script src="https://cdn.checkoutjoy.com/cj-kajabi.js"></script>
<script>
   CheckoutJoy.render({
       key: 'YOUR_KEY_HERE',
       decimal: ','
   });
</script>

displayAfter

Specify where the button is rendered in the checkout page sidebar

ValuePosition
checkout_offer_opt_inThe button displays below the email opt-in checkbox
checkout_offer_service_agreementThe button displays below the terms of service checkbox box
service-agreement-textThe button displays below the service agreement/terms of service text box
<default>If no option is specified, the button is displayed below the email address input field, or below the custom fields if it exist

Example:

<script src="https://cdn.checkoutjoy.com/cj-kajabi.js"></script>
<script>
   CheckoutJoy.render({
       key: 'YOUR_KEY_HERE',
       displayAfter: 'checkout_offer_opt_in'
   });
</script>

isFreeOffer

Hide the "Sign up for Free" button and display the CheckoutJoy payment button in its place. Use this option if you don't have a PayPal or Stripe payment method set up in Kajabi.

Note 1 - CheckoutJoy will not render any buttons if this option is not enabled for free options, with the price displaying as "Free".

Note 2 - you can't use Coupons for free Offers.

ValuePosition
trueThe CheckoutJoy button(s) display instead of the "Sign up for free" button
<default>If no option is specified, the button is displayed below the email address input field

Example:

<script src="https://cdn.checkoutjoy.com/cj-kajabi.js"></script>
<script>
   CheckoutJoy.render({
       key: 'YOUR_KEY_HERE',
       isFreeOffer: true,
   });
</script>

1Checkout Tracking Code

The Checkout Tracking Code section is the easiest way to add your payment buttons to Kajabi. If you add your code there, Kajabi will include your payment buttons into all your Offer checkout pages.


kajabi payment methods

Simply copy your code, replace YOUR_KEY_HERE with your API key,

  • Copy the code snippet above
  • In Kajabi, navigate to Kajabi > Settings > Checkout Settings
  • Scroll down to Checkout Tracking Code
  • Paste the code snippet in the Footer Tracking Code block
  • Replace [[YOUR_KEY_HERE]] with your API key
  • Click the Save button

And that's it! You should now see your payment buttons display in the Checkout box area of any checkout page of your offers. Remember to refresh the checkout page in order to load your button!


Note Your payment buttons will only display if you have added your Kajabi Offer to Checkoutjoy.