--- page_title: Checkout flow product: LotusPay platform: Web page_source: https://juspay.io/in/docs/lotuspay/web/lotuspayjs/checkout-flow llms_txt: https://juspay.io/in/docs/llms.txt product_llms_txt: https://juspay.io/in/docs/lotuspay/llms.txt --- # 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 `` on your payment page — it should always be loaded directly from [https://js.lotuspay.com](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. #### html Code Snippet: ```html Example

This is an example of a simple HTML page with one paragraph.

``` ### 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. #### Shell Code Snippet: ```shell ``` --- ## See Also - [NACH Debit Bank Element](https://juspay.io/in/docs/lotuspay/web/lotuspayjs/nach-debit-bank-element) - [Other Information](https://juspay.io/in/docs/lotuspay/web/lotuspayjs/other-information)