---
title: "Click to Pay"
slug: "click-to-pay"
updated: 2026-07-23T13:07:51Z
published: 2026-07-23T14:31:47Z
canonical: "docs.monri.com/click-to-pay"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.monri.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Click to Pay

## Click to Pay

Click to Pay is Mastercard's Secure Remote Commerce checkout. Once a shopper has enrolled a card, they can pay on any participating merchant by confirming their identity (email or phone) instead of re-typing card details. Monri exposes Click to Pay through the [Components](components-integration.md) JavaScript SDK, inside a Monri-hosted iframe, so card data never touches your page.

## Enabling Click to Pay

Click to Pay is enabled per merchant on the Monri side. **Contact Monri to enable Click to Pay for your account.** Once enabled, the SDK detects availability automatically from your merchant configuration (the `mastercard_c2p_active` flag returned in the transaction hash) — you do not need to pass any flag to turn it on. If Click to Pay is not enabled for your account, the components fall back to the traditional card form.

## Choosing an integration

Click to Pay is offered through two Components, depending on whether you already have your own card form:

| Component | Use when | What it renders |
|-----------|----------|-----------------|
| [`card`](click-to-pay-card.md) | You do **not** have your own card form | Card input fields (PAN, expiry, CVV) **and** Click to Pay, in one iframe |
| [`c2p-extension`](click-to-pay-extension.md) | You **already have** your own card form | Click to Pay only (card list, OTP, consent) — no card input fields |

Both share the same setup, configuration object, events, states, accessibility features, and runtime methods described below. The dedicated pages cover the differences (payment submission, and — for `c2p-extension` — the required card-brand sync).

## Setup

Include the Components script and initialize Monri:

```html
<script src="https://ipgtest.monri.com/dist/components.js"></script>
<div id="card-element"></div>
```

```js
const monri = Monri('your_authenticity_token', { locale: 'en' });

const components = monri.components({
  clientSecret: 'your_client_secret'
});

// component: "card" or "c2p-extension"
const card = components.create("card", {
  clientSecret: 'your_client_secret',
  locale: 'en',
  environment: 'test'   // 'test' for sandbox, 'prod' for production
});

card.mount("card-element");
```

## Click to Pay configuration

The `clickToPay` option is entirely optional — Click to Pay is auto-detected from your merchant configuration. Pass it to pre-fill the shopper's contact details or set accessibility preferences. All fields are optional.

| Property | Type | Required | Description |
|----------|------|----------|-------------|
| `chPhone` | `string` | No | Customer phone number (E.164 format) — used for Click to Pay identity lookup |
| `chEmail` | `string` | No | Customer email address — used for Click to Pay identity lookup |
| `isHighContrast` | `'true'` \| `'false'` | No | High-contrast mode for accessibility |
| `dyslexicFont` | `'true'` \| `'false'` | No | Dyslexia-friendly font |
| `fontSize` | `'normal'` \| `'large'` \| `'larger'` | No | Font-size scaling |

> **Identity lookup** is triggered as soon as **either** `chEmail` or `chPhone` is provided — both are not required. If the first identity finds no saved cards, the lookup automatically retries when the second identity is provided.

```js
const card = components.create("card", {
  clientSecret: 'your_client_secret',
  environment: 'test',
  clickToPay: {
    chPhone: '+385991234567',
    chEmail: 'customer@example.com'
  }
});
```

## States

The Click to Pay iframe moves through a set of states as the shopper interacts with it. Subscribe with the `state_change` event.

| State | Description |
|-------|-------------|
| `loading` | The Click to Pay SDK is initializing |
| `empty` | Initial state, or SDK failed / no identity found — the traditional card form is shown |
| `consent` | New-user consent screen — appears when a valid card brand is detected in the PAN field; disappears if the PAN is cleared |
| `card-list` | Returning shopper sees their saved cards |
| `otp-input` | One-time-password verification |
| `new-card` | Shopper is adding a new card — appears when a valid card brand is detected in the PAN field; disappears if the PAN is cleared |
| `not-your-card` | Shopper is switching identity |

## Events

| Event | Fires when |
|-------|-----------|
| `state_change` | The iframe transitions between states |
| `checkout_data` | A Click to Pay payment completes (contains the transaction result) |
| `not_your_card` | The shopper wants to switch identity or enter a card manually |
| `payment_progress` | Progress updates during checkout |

Payloads and handling differ slightly between the two components — see the [`card`](click-to-pay-card.md) and [`c2p-extension`](click-to-pay-extension.md) pages.

## Accessibility

Click to Pay includes built-in accessibility support, configurable at creation (via the `clickToPay` object) or at runtime:

- **High contrast** — enhanced colour contrast (`isHighContrast` / `toggleTheme()`)
- **Dyslexic font** — OpenDyslexic font family (`dyslexicFont` / `toggleDyslexicFont()`)
- **Font-size scaling** — `normal`, `large`, `larger` (`fontSize` / `toggleFontSize()`)
- **Theme** — light and dark variants with automatic contrast adjustments

## Runtime methods

```js
card.setLanguage('hr');                 // change language
card.toggleTheme(true);                 // true = dark, false = light
card.toggleDyslexicFont(true);          // dyslexia-friendly font
card.toggleFontSize('large');           // 'normal' | 'large' | 'larger'
card.clientPhoneUpdate('+385991234567');// update contact — re-runs identity lookup
card.clientEmailUpdate('new@example.com');
card.updateActiveBrand('mastercard');   // sync detected card brand (required for c2p-extension)
```

## Next steps

- [`card` component integration](click-to-pay-card.md)
- [`c2p-extension` component integration](click-to-pay-extension.md)