Click to Pay Widget

Click to Pay is an online payment standard based on EMV SRC (Secure Remote Commerce), developed by Visa, Mastercard, and other EMVCo participants. Click to Pay encrypts the customer’s card data using a unique virtual card number, thereby allowing it to be used for payments in various online stores without re-entering the card data. To make payments using this standard, a special Click to Pay widget is used.

Below is a description of the module for adding the Click to Pay widget to the merchant’s website.

Integration

<script src="https://bank-domain.com/payment/modules/click-to-pay-widget/module.js"></script>

After integration, the ClickToPayWidget constructor is available in window.

Initialization

const clickToPayWidget = new window.ClickToPayWidget();
const container = document.querySelector<HTMLElement>('#click-to-pay-widget-container');

if (!container) {
  throw new Error('Click to Pay container is missing');
}

const result = await clickToPayWidget.init({
  mdOrder: 'order-id',
  language: 'en',
  container,
});

await merchantBackend.finishPayment(result.transientToken);

init() mounts the Click to Pay UI into the provided container and completes after successfully passing through the widget.

Resource Cleanup

clickToPayWidget.destroy();

destroy() removes the service iframe connect.html and clears commutator handlers. The method can be called manually if you need to interrupt the widget or free up resources. After init() completes, cleanup is performed automatically.

Parameters

type ClickToPayWidgetOptions = {
  mdOrder: string;
  language?: string;
  container: HTMLElement;
  baseUrl?: string;
  onComplete?: (result: ClickToPayWidgetResult) => void | Promise<void>;
};

• mdOrder – payment session identifier.
• language – widget language. If not provided, the parameter is not sent in widget requests.
• container – DOM element for mounting the Click to Pay UI.
• baseUrl – base URL of the payment service. By default, taken from the connected script URL.
• onComplete – optional callback that is called with the same result that init() returns.

Result

type ClickToPayWidgetResult = {
  mdOrder: string;
  integrationType: 'VISA_DROP_IN_UI';
  transientToken: string;
};

• integrationType – integration type from ctpData.integrationType, obtained from /payment/rest/getSessionStatus.do.
• transientToken – short-lived CyberSource Unified Checkout token. The library user passes it to their backend to complete the payment.

Internal Flow

The module performs the following steps:

1. Creates a hidden iframe connect.html.
2. Through commutator, waits for the iframe to be ready.
3. In the iframe, calls /payment/rest/getSessionStatus.do.
4. Verifies that VISA_DROP_IN_UI is available for the session.
5. In the iframe, calls /payment/rest/clicktopay/anonymous/getCaptureContext.do.
6. Loads the CyberSource Unified Checkout client library from the capture context JWT.
7. Creates a checkout with disabled auto-processing, displays the Click to Pay UI, and returns the transientToken.
8. Destroys the checkout and Unified Checkout client, removes the service iframe, and clears commutator handlers.

If /payment/rest/getSessionStatus.do returns an unsupported integrationType, init() fails with an error.

The code for each integration is located in a separate folder _src/integrations/<integrationType>. Currently, the _src/integrations/VISA_DROP_IN_UI integration is implemented.