javascripthtmljquerychargebee

Chargebee: Uncaught TypeError: this.page.urlFetcher(...).then is not a function


I am currently trying to include the chargebee drop in script into a website, but when I call it with the hosted page object, I get the error

Uncaught TypeError: this.page.urlFetcher(...).then is not a function

I wrote a small script to replicate the error:

<!DOCTYPE html>
<html>
        <head>
                <script src="https://js.chargebee.com/v2/chargebee.js"></script>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                <script>
                        $( document ).ready(function() {
                                /* Initialize a Chargebee instance after mounting the root component. */
                                var chargebeeInstance = Chargebee.init({
                                        site: "..."
                                });
                                // You can access the above created instance anywhere using the following code
                                var chargebeeInstance = Chargebee.getInstance();
                        });
$( document ).ready(function() {
        $("button").click(function() {
                var chargebeeInstance = Chargebee.getInstance();
                chargebeeInstance.openCheckout({
                        hostedPage: function() {
                                return {"expires_at":...,"updated_at":...,"created_at":..,"id":"...","state":"created","embed":true,"type":"checkout_new","resource_version":...,"url":"...","object":"hosted_page"};
                        },
                        success: function(hostedPageId) {
                                // success callback
                        }
                });

        });
});
                </script>
        </head>
        <body>
                <button> click me </button>
        </body>
</html>

Solution

  • After checking back with the support, it turned out that the hosted page function should return an ajax call (promise). Here is an example from the docs:

    return $.ajax({
                      method: "post",
                      url: "http://localhost:8000/api/generate_checkout_new_url",
                      data: {
                        plan_id: "cbdemo_scale"
                      }
                    });