Capture Bank Information

In this guide, we will guide you on how to Capture bank information using ApteanPay js SDK.

To Capture bank information, perform the following steps.

  1. Create a html file.

    <html>
  <head></head>
  <body>
  </body>
</html>

  2. Add following code to html body.

    <div id="bankIframe"></div>

  3. Add following code to html body.

    <button id="submitButton"> submit </button>

  4. Add following code to html body and replace Aptean js SDK url here with JS SDK url

    <script src="<<<Aptean js SDK url here>>>">  </script>

  5. Add following code to html body.

    <script>
  // initialize Aptean Pay
  const apteanPay = ApteanPay(
    '<<<apim key here>>>', // api key
    '<<<product id here>>>', // erp product id
    '<<<tenant id here>>>' // tenant id
  );

  // style an iframe
  // please see the "iFrame Styling" document for more information on styling
  var customStyle = {
    styles: {
      base: {
        'border-radius': '4px',
        height: '56px',
        'font-size': '16px',
      }
    }
  };

  var bankComponentOptions = {
    customStyle,
    showPlaceholders: true,
    showErrorMessages: true
  }; 

  // create builder objects
  const components = apteanPay.components({});
  const bankComponent = components.createBank({}, bankComponentOptions);

  // mount the form to the DOM
  bankComponent.mount(
    'bankIframe', // div Id
    '#submitButton' // button Id
  );

  // this method returns a callback function.
  apteanPay.createTokenCallback(
    bankComponent,
    {
    name: '<<<customer name here>>>',  //mandatory to pass
    addressLine1: '<<<customer addressLine1 here>>>',
    addressLine2: '<<<customer addressLine2 here>>>',
    addressCity: '<<<customer addressCity here>>>',
    addressState: '<<<customer addressState here>>>',
    addressZip: '<<<customer addressZip here>>>', //mandatory to pass
    addressCountry: '<<<customer addressCountry here>>>',  //mandatory to pass
    emailAddress: '<<<customer emailAddress here>>>', //mandatory to pass
    phoneCountryCode: '<<<customer phoneCountryCode here>>>', 
    phoneNumber: '<<<customer phoneNumber here>>>',
    },
    function(token, error) {
      // error object
      if (error) {
        console.log(error);
      }

      // token object
      if (token) {
        console.log(token);
      }
    }
  );
</script>
  6. Fill your respective values appropriately.
  7. Save the file and open the html file in browser. You will get to see html page as below.
    bank_capture
  8. Provide Valid bank information and click the button.

  9. You can get the token id from the console as id field in json.

    Success Token Response:

    {id :"183075a2-41f1-4ba1-895f-e320336c3f59","created":1746614580,"livemode":false,"type":"payment-bank-us,"used":false,..}

    Failure Token Response:

    1.[{…}]
  
    1.0: {type: "validation_error", message: "Parameter failed UI validation.", param: "routing-number"}
    2.length: 1
    3.__proto__: Array(0)
    NOTE: In case you didn't get id in console, you will get to see error response in console. Refer the following possible error scenarios.
    Error Type Error Message Error Reason
    validation_error Parameter failed UI validation : routing-number Provided routing number is not valid
    validation_error Parameter failed UI validation : account-number Provided account number is not valid
    validation_error Expected value in [PR, PS, PT, PW, PY, QA, AD, AE,… NU, NZ, OM, PA, PE, PF, PG, PH, PK, PL, PM, PN]. Provided addressCountry is not valid
    validation_error Invalid postal code for the country '{addressCountry}'. Provided addressZip is not valid

  10. Once you have a valid token it can be saved as a long term token to be used for future payments if that is the desired use case. Call the following method - please refer the GraphQL Playground https://stg.api.apteanpay.com/ for full documentation:

    mutation { createPaymentMethod(input: {attachToResourceId:"<<<tenant ID>>>",
  isDefault:false,
  token:"<<<token ID>>>"})
  {
    code
    error
    message
    paymentMethod {id}
  }
}