Visa Checkout Button on SPA

[tbernardes]

Hi Guys,

I'm facing an issue with regards to the Visa Checkout button on SPA environments.

I found that the VCO SDK only binds elements thas is already loaded on the page searching by the v-button class. I'm using SPA on my application, and because of that the button don't have the event to trigger.

Have you guys faced this issue? Have an idea how to solve it?

Kind Regards,

[LakshanFernando]

Hi,

Thanks for your question.

One solution I have tried is runtime loading of the visa checkout sdk script.

After you load (display) the visa checkout button, you can then proceed with loading the following sdk.

https://sandbox-assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js

 Sample code to load a js file at runtime.

var script = document.createElement("script");
		script.setAttribute("type", "text/javascript");
		script.setAttribute("src", "https://sandbox-assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js");

		document.getElementsByTagName("header")[0].appendChild(script);

Please advise whether I have understood your question correctly and answered properly.

Thanks

Lakshan

[tbernardes · Accepted solution]

Hi Lakshan,

That would be a partial solution.

Once you load it in runtime, it would work for those components that is already on the DOM.

However, if you add any button after that in run time, it wouldn’t have the event on this new button.

I’m using angular 2, and I’m avoiding to inject the script every page that has the button. Otherwise I would need to inject on the load and remove when the page changes, to be able to inject again after the other page loads.

It would be great if the SDK would have a method that, when runs, it would map every v-button again.

How can you suggest that to the SDK people?