Refresh Copy and Pay Widget without refreshing HTML page

Follow

If you need to change your transaction type (i.e. Payment Type) for Copy and Pay - typical case would be allowing a user to store a credit card, then you would need to generate a new token for a transaction from Peach Payments.

You can easily generate a new token using a server to server call without impacting UX.

Now once you have generated new token you would need some javascript code in order to remove the old COPYandPAY widget an replace it by the new one.

Simple reloading of the widget is not possible.

You can implement the following suggested flow:

  1. Merchants calls a function which generate a new token 
  2. COPYandPAY Widget needs to be removed using JavaScript: $("div.cardPayment").remove(); 
  3. A new COPYandPAY form needs to be appeneded somewhere, in this case to a container "payment": $("#payment").append('<form action="...." id="{new token}">visa master.....</form>'); 
  4. COPYandPAY JavaScript needs to embedded again: $.getScript('https://test.ctpe.net/frontend/widget/v3/widget.js?language=en&style=card');

You must complete all of these steps using JavaScript.

 

A working example is attached below in the HTML file.

Have more questions? Submit a request

Comments

Powered by Zendesk