Handle Connection Errors
Overview
If you want to catch and handle any errors encountered during the iFrame mounting process use the mountAsync method.
Use case
-
Create a form with id="payment-form":
<form type="post" id="payment-form"> <div class="form-group"> <label for="name" class="label control-label">Name</label> <input type="text" id="name" class="field form-control"> </div> <button class="btn btn-primary" type="submit">Generate token</button> </form> -
Inside the form add an element with id="card-element". The form should now look like this:
<form type="post" id="payment-form"> <div class="form-group"> <label for="name" class="label control-label">Name</label> <input type="text" id="name" class="field form-control"> </div> <div id="card-element"> <!-- A TCO IFRAME will be inserted here. --> </div> <button class="btn btn-primary" type="submit">Generate token</button> </form> -
Include the 2Pay.js drop-in payment client JavaScript.
<script type="text/javascript" src="https://2pay-js.2checkout.com/v1/2pay.js"></script> -
Add the following configuration JavaScript to load the client and create the component.
window.addEventListener('load', function() { // Initialize the JS Payments SDK client. let jsPaymentClient = new TwoPayClient('YOUR_MERCHANT_CODE'); // Create the component that will hold the card fields. let component = jsPaymentClient.components.create('card'); -
Use the mountAsync method to catch any mounting errors and retry if needed.
// Use mountAsync() to catch errors and retry if needed component.mountAsync('#card-element') .then(() => { console.log('Card component mounted successfully'); }) .catch((error) => { console.error('Mount failed, retrying after cleanup:', error); // Clean up the failed mount component.unmount(); // Retry mounting component.mountAsync('#card-element') .then(() => { console.log('Card component mounted successfully on retry'); }) .catch((retryError) => { console.error('Retry failed:', retryError); }); });
