JavaScript is disabled. Some features may not work. You can also read the static version: View text version

Checkout flow

Building a custom payment page with Element to create NACH Debit eMandates requires these steps:

Step 1:

Create your payment page

NACH Debit Bank Element is available as part of LotusPay.js. To get started, include the script <script src="https://js.lotuspay.com/"></script> on your payment page — it should always be loaded directly from https://js.lotuspay.com.

To collect the NACH Debit bank details from your customers, Element creates a UI component for you that is hosted by LotusPay. It is then placed into your payment page, rather than you creating it directly. When the customer clicks on the myLpBtn button, Element loads as a lightbox on the page.

Here is a sample HTML payment page.

Step 2:

Create a source via the Source API

The customer enters their bank account details in Element and clicks on SUBMIT. In the token method, LotusPay.js sends the bank account details in Element directly to LotusPay for bank account token creation and then passes that token into source. In the storage method, Element gives you the unmasked bank account details.

The source details in the page and the bank account details collected in Element are then captured by your server.

Your server runs a script to call the LotusPay Source API for source creation, and then passes the whole response to Element. Element sends the customer to the redirect[url] and the customer begins the redirect flow to authorise the source.

Here is sample code in PHP.

When creating a source, its status is initially set to pending. Your customer must authorise the source for it to create a mandate.