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>
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"
}
});