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".

Step 2: Load the ClickToPayWidget Script

In your JavaScript file (e.g., integration.js), dynamically load the ClickToPayWidget script.

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.

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.

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.