Happy Business Starts Here

Re: Open Payment Page in a new tab

Highlighted
Honor Student

Open Payment Page in a new tab

Hello, I'm implementing payment form using HPM 2.0 and would like to not use an iframe. Instead, I want the billing form to be opened in a new browser tab but still on the zuora.com domain name. I've tried to generate a URL similar to what HPM JS Library generates, and when I open it - it shows me a billing form. But if I click submit - I'm only getting some JS errors. It looks that it tries to execute some JS magic but I want it to redirect me to a callback URL/path specified on the HPM configuration page (similar to what advanced form implementation does).

 

Could you advise on how to achieve my goal?

2 REPLIES 2
Highlighted
Support SME

Re: Open Payment Page in a new tab

Hi @VasiliySablin could you let us know what kind of JS errors are you getting exactly? Thanks!



If you found my answer helpful, please give me a kudo ↑
Help others find answers faster by accepting my post as a solution √

Highlighted
Honor Student

Re: Open Payment Page in a new tab

Hello @Viktor, the error I'm getting is:

HPM2Preload-min.js:8 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://vasiliy.ngrok.io') does not match the recipient window's origin ('https://apisandbox.zuora.com').

 

 

At the same time, in the Network tab I see that request was sent and I got a response: 

{"redirectUrl":"https://vasiliy.ngrok.io/v1/callback/billing_form_result","signature":"...","success":"true","respon...":"..."}

 

What I need - is to redirect customer onto redirectUrl in case of successfully created payment method and show errors right on the form in case of errors.