---
page_source: https://docs.juspay.io/clicktopay/docs/how-to-integrate/get-started
page_title: Get Started
---


# Integration Steps Summary



This document provides a step-by-step guide to integrate the ClickToPayWidget into a website

using plain JavaScript. It also includes instructions for handling a "Pay Now" button click event

to send a post message.


## **Pre-Requisite** 



**Merchant is required to be integrated on the Pay-V3 Integration as per the** **[documentation](https://juspay.io/in/docs/payv3/web/overview/introduction)** **.** 


## **Parameter Description** 



Here is a brief description of each parameter used in**ClickToPayWidget.init:email: The user's email address** . This should be dynamically set based on your application's logic.


| Parameter | Description | Where will you get it? |
|---|---|---|
| email | Consumer-provider email address | Customer email will be collected by Merchant |
| transactionAmount | t The amount of the transaction. | Transaction amount at the Checkout will come from Merchant |
| transactionCurrencyCode | The currency code for the transaction, such as "USD", "EU", "INR" and more. | Transaction amount at the Checkout will come from Merchant |
| mobileNumber | An object containing the user's mobile phone number and country code. | Customer’s mobile number that Merchant collects |
| renderAddCardForm | This function is triggered when the widget needs to render the add card form. You should render the card fields inside the fieldsWrapperElem. Optionally, you can render the submit button within the submitWrapperElem. The ClickToPayWidget will handle the rendering of the ClickToPay consent checkboxes. Use the formID to invoke Juspay.setup | NILL |
| merchantId | Your Juspay account merchant id | You can find this on the Juspay Dashboard |
| setSelectedPayment | This is a state-setting function that lets us programmatically set or update the selected payment method. | Saved Card Id - click_to_pay_saved_card_{srcD igitalCardId} Manual Card Id - click_to_pay_manual_card |
| onSavedCardSelected | This function is triggered whenever the customer selects a different saved card from the Click to Pay list. It will include the cardBrand and panBin. | NILL |
| returnUrl | The url where Click to Pay will redirect the merchant | NILL |
| onUserCancelled | This function is triggered when the user closes the DCF page. You can remove any loader that was added, allowing the customer to proceed with an alternative payment method. | NILL |