---
page_source: https://docs.juspay.io/clicktopay/docs/how-to-integrate/integration-steps
page_title: Integration Steps
---
# Integrate Step by Step
## Step 1: **Setup the HTML Structure**
Create a basic HTML structure where the widget will be embedded and include a "Pay Now".
#### html Code Snippet:
```html
Click to Pay Integration
```
## Step 2: **Load the ClickToPayWidget Script**
In your JavaScript file (e.g., integration.js), dynamically load the ClickToPayWidget script.
#### Javascript Code Snippet:
```javascript
function initializeClickToPayWidget() {
if (window.ClickToPayWidget) {
const checkoutElement = document.getElementById("click-to-pay-checkout");
if (checkoutElement) {
const ctpWidgetInstance = window.ClickToPayWidget.init(checkoutElement, {
email: "user@example.com",
transactionAmount: 100.0,
transactionCurrencyCode: "USD",
mobileNumber: {
phoneNumber: "5550102411",
countryCode: "1",
},
returnUrl: "return_url",
merchantId: "merchant_id",
setSelectedPayment: setSelectedPayment,
onUserCancelled: () => {
console.log("===> User cancelled");
setIsLoading(false);
},
onSavedCardSelected: (card) => {
console.log("===> card", card);
},
renderAddCardForm: (formID, fieldsWrapperElem, submitWrapperElem) => {
// this component will call Juspay.Setup() with this formID
const payV3Form = createComponent(MerchantPayV3Form, {
formId: formID,
});
payV3Form.mountComponent(fieldsWrapperElem);
// not needed for Merchant if submit button is outside
const submit = createComponent(MerchantSubmitButton);
submit.mountComponent(submitWrapperElem);
},
});
// Optionally handle cleanup
window.addEventListener("unload", ctpWidgetInstance.cleanup);
}
}
}
initializeClickToPayWidget();
```
## Step 3: **Handle "Pay Now" Button Click**
If merchant has a central “Pay Now” button for the whole screen, you should add an event listener to the "Pay Now" button to send a post message with the correct type.
#### Javascript Code Snippet:
```javascript
try {
await ctpWidgetInstance.submitBegin();
// Call this method on user click before any API calls on your end
// Any API calls or tasks you want to do before submitting the payment
await ctpWidgetInstance.submit("order_id");
} catch (err) {
await ctpWidgetInstance.submitCancel();
// In case an error occurs
}
```
## Step 4: **Deselecting Payment Option**
The **deselectCard** function is a key feature of our Click to Pay integration that allows users to change their payment selection easily. This function is particularly useful when you want to provide flexibility in your payment flow, allowing users to switch between different payment options seamlessly.
#### **1. How to Use**
The `deselectCard` function is available through the `clickToPayWidget` object, which is set up when you initialize the Click to Pay component.
#### javascript Code Snippet:
```javascript
const handlePaymentChange = (value: string): string => {
// Update the local state with the new payment selection
setSelectedPayment(value);
// Deselect the card in the ClickToPay widget
clickToPayWidget.deselectCard(value);
return value; // Return the selected payment value
};
```
#### **2. When to Call**
Call this function when a user selects a different payment method or when you need to
programmatically clear the current Click to Pay card selection.
#### **3. Function Behaviour**
* It clears the currently selected card in the Click to Pay interface.
* It allows the user to select a different payment method or card.
**Benefits**
* Improves user experience by providing more control over payment selection.
* Reduces errors by allowing users to easily change their payment method.
* Enhances the flexibility of your checkout process.
**Best Practices**
* Call deselectCard whenever a user switches to a non-Click to Pay payment method.
* Use it in conjunction with your state management to keep your UI and the Click to Pay widget in sync.
* Ensure that the clickToPayWidget is properly initialized before calling this function.