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

1. 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>

2. 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>

3. Include the 2Pay.js drop-in payment client JavaScript.

   <script type="text/javascript" src="https://2pay-js.2checkout.com/v1/2pay.js"></script>

4. 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');

5. 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);
               });
       });

Demo