How do I integrate Chargebee's modal checkout with my website on WIX?

Modified on: Tue, 4 Jan, 2022 at 2:34 PM

Scope

Is the drop-in script supported in Wix?

Using a Chargebee’s Modal Checkout with Wix.

This article applies when you are using Chargebee's V3 checkout pages (in-app/modal)


Summary

Due to certain restrictions on WIX (Wix doesn’t allow you to load external scripts on your webpage), Chargebee’s drop-in script (modal/ pop-up) based checkout is not supported. However, you can integrate your Wix website and Chargebee's hosted pages by using the plan URL method.


On your website’s pricing (Wix) page merchants will need to showcase each product with the purchase/subscribe (button) on your Wix (pricing) page embedded with the Plan URL specific to each plan created in Chargebee.

Every Plan in Chargebee will have a static URL that you can use to load the Chargebee checkout.


When you select one of your products in the Wix site and click on "Subscribe", it will take you to our hosted checkout page to complete the sign-up.


Here's how you do it,

1. Create your plans in ChargeBee.

2. Next, create a plan specific URL in the format given below:

If you are using PC 2.0, then please refer to this article on how to create a plan specific URL. 


For PC 1.0, here's a sample URL:

https://.chargebee.com/hosted_pages/plans/

Or

https://anuja-test.chargebee.com/hosted_pages/plans/cbdemo_scale


You can also pass addons and coupons along with the corresponding quantity as parameters along with this url. Below is an example:
https://.chargebee.com/hosted_pages/plans/?subscription[plan_quantity]=&addons[id][0]=&addons[quantity][0]=&subscription[coupon]=

Or

https://allan-dd-test.devcb.in/hosted_pages/plans/sample?subscription[plan_quantity]=2&addons[id][0]=cbdemo_additionaluser&addons[quantity][0]=2&subscription[coupon]=cbdemo_holidays

3. You can then add buttons or images to your Wix site and link them to the hosted page URL (see insert above).


Note

  • On your Wix configuration page make sure to embed the link and select the option to open in a new window.

  • On successful checkout, the redirection will happen to the URL configured on the plan level, Click Here.


If you want to use API-based integration with Wix, you can use our API library and Click Here to access our API documentation.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.
×