Card Scheme Detection

Introduction

The scheme iframe-hosted field is used to identify the card scheme while the end-user enters their card number. When multiple schemes are available for a co-branded card, the iframe lets the end user select which scheme to use, for example, Visa, MasterCard, or CB.

Configuration

Add a scheme field to your hosted fields configuration, the same way as any other field:

const hostedFields = new LwHostedFields({
    webkitToken: '...', // from MoneyInWebInit
    cardNumber: { containerId: 'card-number-container' },
    expirationDate: { containerId: 'expiry-container' },
    cvv: { containerId: 'cvv-container' },
    scheme: { containerId: 'scheme-container' }, // ← add this
});

hostedFields.mount();

Add the matching container to your HTML:

<div id="card-number-container"></div>
<div id="expiry-container"></div>
<div id="cvv-container"></div>
<div id="scheme-container"></div> <!-- ← add this -->

How it works

Detection Flow

1. The scheme iframe starts detecting the card scheme as soon as the end-user enters the first digit of the card number.
2. Once the first 8 digits are available, the SDK sends the BIN to the Lemonway backend to improve scheme detection accuracy. The backend returns the matching scheme or schemes, such as CB, Visa, or MasterCard.
3. A single scheme is automatically selected if detected. However, if multiple schemes are available, the scheme iframe displays a selector allowing the end-user to choose their preferred one.
4. On form submission, the selected scheme is added to the payment payload sent to Lemonway.

Customization

Labels

You can customize the text displayed inside the scheme iframe via the labels option:

scheme: {
    containerId: 'scheme-container',
    labels: {
        header: 'Sélectionnez votre réseau de carte',
        options: {
            cb:         'Carte Bancaire',
            visa:       'Visa',
            mastercard: 'Mastercard',
        },
    },
},

Icon Size Presets

You can customize only the always-visible scheme icon size with schemeIconSize:

scheme: {
    containerId: 'scheme-container',
    schemeIconSize: 'small', // 'small' | 'default' | 'large'
},

Preset mapping:

Note
The dropdown option icons keep a fixed size for visual consistency.

Runtime Label Updates

You can also update labels at runtime, for example, when the user switches language:

hostedFields.setSchemeLabels({
    header: 'Select your card network',
    options: {
        cb:         'Carte Bancaire',
        visa:       'Visa',
        mastercard: 'Mastercard',
    },
});

CSS Tips

The scheme iframe behaves like any other hosted field container: you control the outer element, and the iframe fills it.

Recommendations:

• Align the scheme container inline with the card number label rather than on its own row. It reads naturally as a card brand indicator next to the field label.
• Give the scheme container an explicit size. The iframe needs to be defined with dimensions.
• Avoid applying CSS filters such as invert or hue-rotate on a parent of the scheme container.

Values

Submission Payload

When a scheme field is mounted and the form is submitted, the payment payload sent to Lemonway includes the selected scheme:

{
  "cardNumber": "4111111111111111",
  "expirationDate": "12/26",
  "cvv": "123",
  "holderName": "Jean Dupont",
  "scheme": "visa"
}

Supported Scheme Values