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 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:

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:

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

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.

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.

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.

Events

Payloads and handling differ slightly between the two components — see the card and c2p-extension 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

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
• c2p-extension component integration