Start a new topic

IFrame embedded update payment method page not calling onLoad or onSuccess callbacks

Hi,


I have successfully embedded a payment page and wish to do the same with an update payment method page (a page where a user can update their card details or switch to direct debits).


I am using the same code on the ChargeBee js object but the onLoad and OnSuccess methods are not getting called.  I cannot find any examples for this scenario so am I doing anything wrong or is there a bug with the ChargeBee JS file?


Here is my code.  It is pretty much the same as the example here to embed a payment page (https://github.com/chargebee/chargebee-samples/blob/master/php/checkout_iframe/signup.html#L95)


Chargebee.embed(paymentRequest.paymentPageUrl, paymentRequest.siteName)

          .load({

            addIframe: (iframe: HTMLElement): void => {

              paymentContainerElement.append(iframe);

            },

            onCancel: (iframe: HTMLElement): void => {

              this.paymentStatus = PaymentStatus.Cancelled;

            },

            onLoad: (iframe: HTMLElement, width: number, height: number): void => {

              debugger;

     // this method is not called when embedding a update payment page

            },

            onSuccess: (iframe: HTMLElement): void => {

              debugger;

     // this method is not called when embedding a update payment page

            }

          });


Thanks,


Jon


1 person has this problem

Hi Jon


Sorry about the trouble. We're also received your email with your code and we're reviewing this with our team. We'll give you an update shortly.

Hi Jon


In the screenshot which you shared(email), kindly make the below change and it should work.


request = request.Embed(true);


I've also emailed you on this.

Hi Benny,


Thanks for this.  Changing that line to the one you suggested above it works and all the callbacks are invoked as expected.  However, when I do this the page no longer has the options to set up a direct debit and only shows the options to update card details?


The primary reason we are doing this is so our customers can set up a direct debit.


Any ideas on how to get both card and direct debit option to show up?????


Thanks for you help so far!


Jon

Hi Jon


Direct Debit/PayPal Express Checkout requires users to be redirected to the Direct Debit provider/PayPal's page to complete their payment setup and are not thus supported inside an iframe. You'll need to use GoCardless button directly in your website and use their redirect flow to create customer's payment information and create this customer in Chargebee. 


Here's how this GoCardless flow works like:


For new signups


1. Create a GoCardess Customer by passing the bank details you receive from your customers. You would need to implement the GoCardless Redirect Flow to create mandates. Here's more on GoCardless Direct Debit mandate payment pages


2.When the customer verifies the mandate, his/her details are tagged with a mandate ID in your GoCardless account. 

 

3. Get the GoCardless Mandate ID and create a new Customer/Subscription in Chargebee, pushing the customer's personal details and mandate ID to Chargebee via API


4. Chargebee will take over sending payment instructions to GoCardless.


Moving existing GoCardless customers to Chargebee:


1. Create a customer in Chargebee (if not present already) and get the GoCardless Mandate id for the same customer.


2. Use the Update Payment Method API in Chargebee and pass the Mandate id.


3. This will map the GoCardless customer with the corresponding Customer in Chargebee.


4. Chargebee will take over sending payment instructions to GoCardless.


5. Based on the response from GoCardless, we will update the invoice status in Chargebee.


Note: If you're collecting the bank account details through your server or by phone, email etc, you'll need to get the custom payment pages (GoCardless Pro) enabled and approved. There is most likely a different pricing for GoCardless Pro.


Here's more on using GoCardless with Chargebee.

Hi Lakshmi,


Can't ChargeBee do any of this?  We signed up with you guys so we didn't have to do all of this.  Is there any way to do this without using an iframe and without having to interact with GoCardless apis?


Thanks,


Jon

Hi Jon


If you'd like to display both Card and Direct Debit option in your Checkout or Update Payment Method page, the customer has to be redirected to Chargebee checkout page, as GoCardless does not support iframe embedded checkout. You can directly integrate with the hosted pages to avoid the API method. 


Note: We also support custom domain where you can change the URL for your Chargebee's checkout and customer portal pages to a subdomain of your own, effectively white labeling them. This feature is available from Pro Plan ($199/mo) onwards.

Hi, I am having the same issue. I see the solution above is request = request.Embed(true); However it is referring to an email screenshot. It would be helpful to have the context to which the solution applies.

Hopefully it can help me solve my issue as well.

Thank you.

Hi Nathan,


It referred to the screenshot we shared to the customer. I am attaching it here. 


image


It will be great if you could share the issue that you are facing, we will be able to take it up and get back to you with a solution. 

Will wait to hear from you. 



Login or Signup to post a comment