Last updated 8 months ago

publishableKey

A Rebilly publishable API key. This property is required to authenticate your API requests from Framepay.

Requiredtrue
Updatablefalse
Typestring
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    });
    Rebilly.on('ready', () => {
        var card = Rebilly.card.mount('#mounting-point');
    });
})();

organizationId

Your organization identifier, in the scope of which requests are performed. (If it is not specified, the default organization will be used).

Requiredfalse
Updatablefalse
Typestring
Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    organizationId: 'your-company-organization-id',
});
Rebilly.on('ready', () => {
    var card = Rebilly.card.mount('#mounting-point');
});

locale

The language FramePay should use for the fields that are injected into your checkout form. This option accepts strings in the RFC-5646 format

By default, FramePay will try to detect and use the client's locale. The en-US locale is used as a fallback.

Requiredtrue
Updatablefalse
Typestring
Default value"auto" ("en-US" as fallback)
Supported values"auto", "en-US", "es-ES"
JavaScripthtmlcss 
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        locale: 'es-ES',
    });
    Rebilly.on('ready', () => {
        var card = Rebilly.card.mount('#mounting-point');
    });
})();
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

<form>
    <div class="field">
        <div id="mounting-point"></div>
        <button>Make Payment</button>
    </div>
</form>
.field {
    display: flex;
}

.field > #mounting-point {
    flex: .8;
}

.field > button {
    flex: .2;
    margin-left: 20px;
}

button {
    position: relative;
    border: none;
    padding: 8px 16px;
    color: #FFF;
    margin: 0 auto;
    border-radius: 6px;
    background: #1abc9c;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

button:hover {
    background: #000000;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

digitalWallet

This configuration object is required for digital wallets, such as Google Pay.

Requiredtrue (when a digital wallet payment method is used)
Updatabletrue
Typeobject

The general structure of the digitalWallet config object looks like this:

Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    organizationId: 'organization-1',
    digitalWallet: {
        transactionData: {
            amount: 10,
            currency: 'USD',
            countryCode: 'US',
            label: 'Purchase label 1'
        },
        allowedCardBrands: [
            Rebilly.digitalWallet.GooglePayAllowedCardNetworks.Mastercard,
            Rebilly.digitalWallet.GooglePayAllowedCardNetworks.Visa,
        ],
        merchantConfig: {
            merchantName: 'Example',
            merchantOrigin: 'www.example.com'
        },
        googlePayDisplayOptions: {
            buttonColor: 'white',
            buttonType: 'long',
        },
    },
});

Required fields: transactionData, allowedCardBrands, merchantConfig
Optional fields: googlePayDisplayOptions

Allowed card brands:
All possible values for allowedCardBrands are exposed via Rebilly.digitalWallet.GooglePayAllowedCardNetworks. Please note, that Google has a different set of acceptable card brands for Brazil - those are exposed via Rebilly.digitalWallet.GooglePayAllowedCardNetworksForBrazil

Display options:
The default values for googlePayDisplayOptions are buttonColor: 'default' and buttonType: 'short'. Google determines the default color value which is currently 'black'.

icon

This object will let you control the color or the visibility of the icon in the card and iban fields.

Requiredfalse
Updatabletrue
Typeobject

Warning: Always hidden on the mobile devices

The card icon will be always hidden in the combined card on mobile devices

Rebilly.initialize({
    icon: {
        display: true,
        color: '#000000'
    }
})

display

This property will let you control the visibility of the icon in the card and iban fields.

Requiredfalse
Updatabletrue
Typeboolean
Default valuetrue (render icon)
Supported valuestrue, false
JavaScripthtmlcss 
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        icon: {
            display: false,
        },
    });
    Rebilly.on('ready', () => {
        var card = Rebilly.card.mount('#mounting-point');
    });
})();
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

<form>
    <div class="field">
        <div id="mounting-point"></div>
        <button>Make Payment</button>
    </div>
</form>
.field {
    display: flex;
}

.field > #mounting-point {
    flex: .8;
}

.field > button {
    flex: .2;
    margin-left: 20px;
}

button {
    position: relative;
    border: none;
    padding: 8px 16px;
    color: #FFF;
    margin: 0 auto;
    border-radius: 6px;
    background: #1abc9c;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

button:hover {
    background: #000000;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

color

This property will let you control the color of the icon in the card and iban fields.

Requiredfalse
Updatabletrue
Typestring
Default value"#A1B2C1"
Supported valuesString colors in formats like: "red", "#A1B2C1", "rgb(0,0,0)", "rbga(0,0,0,0.5)"

Card element

JavaScripthtmlcss 
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        icon: {
            color: 'rgba(0,0,0,0.1)',
        },
    });
    Rebilly.on('ready', () => {
        var card = Rebilly.card.mount('#mount-point');
    });
})();
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

<form>
    <div class="field">
        <div id="mount-point"></div>
        <button>Make Payment</button>
    </div>
</form>
.field {
    display: flex;
}

.field > #mount-point {
    flex: .8;
}

.field > button {
    flex: .2;
    margin-left: 20px;
}

button {
    position: relative;
    border: none;
    padding: 8px 16px;
    color: #FFF;
    margin: 0 auto;
    border-radius: 6px;
    background: #1abc9c;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

button:hover {
    background: #000000;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

IBAN element

JavaScripthtmlcss 
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        icon: {
            // Supported names like 'red', rgb, hex
            color: 'rgb(200,197,31)',
        },
    });
    Rebilly.on('ready', () => {
        var iban = Rebilly.iban.mount('#mount-point');
    });
})();
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

<form>
    <div class="field">
        <div id="mount-point"></div>
        <button>Make Payment</button>
    </div>
</form>
.field {
    display: flex;
}

.field > #mount-point {
    flex: .8;
}

.field > button {
    flex: .2;
    margin-left: 20px;
}

button {
    position: relative;
    border: none;
    padding: 8px 16px;
    color: #FFF;
    margin: 0 auto;
    border-radius: 6px;
    background: #1abc9c;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

button:hover {
    background: #000000;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

placeholders

An object defining custom input placeholder values for the fields that were injected into your checkout form.

The placeholders value will override the current locale settings.

Requiredfalse
Updatabletrue
Typeobject

card

The card element placeholders.

Requiredfalse
Updatabletrue
Typeobject
JavaScripthtmlcss 
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        placeholders: {
            card: {
                number: 'Number',
                expiry: 'Exp',
                cvv: '***',
            },
        },
    });
    Rebilly.on('ready', () => {
        var card = Rebilly.card.mount('#mount-point');
    });
})();
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

<form>
    <div class="field">
        <div id="mount-point"></div>
        <button>Make Payment</button>
    </div>
</form>
.field {
    display: flex;
}

.field > #mount-point {
    flex: .8;
}

.field > button {
    flex: .2;
    margin-left: 20px;
}

button {
    position: relative;
    border: none;
    padding: 8px 16px;
    color: #FFF;
    margin: 0 auto;
    border-radius: 6px;
    background: #1abc9c;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

button:hover {
    background: #000000;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
The expiration field placeholder
The expiration field support some additional placeholders. This placeholders also will used in the dropdown expiration.
Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    placeholders: {
        card: {
            expirationSeparator: '-',
            expirationMonth: 'M.',
            expirationYear: 'Y.',
        },
    },
});

bban

The bban element placeholder

JavaScripthtmlcss 
(function () {
  Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    placeholders: {
      bban: {
        bicPlaceholder:'BIC ****',
        bankNamePlaceholder:'Bank Name ****',
        accountNumber: 'Account Number ****',
        routingNumber: 'Routing Number ****',
        type: {
          savings: 'Type 1 Savings',
          checking: 'Type 2 Checking',
          other: 'Type 3 Other'
        }
      }
    }
  });
  Rebilly.on('ready', function () {
    Rebilly.bban.mount('#mount-point-bic', 'bic');
    Rebilly.bban.mount('#mount-point-bank-name', 'bankName');
    Rebilly.bban.mount('#mount-point-0', 'accountType');
    Rebilly.bban.mount('#mount-point-1', 'accountNumber');
    Rebilly.bban.mount('#mount-point-2', 'routingNumber');
  });
})();
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

<form>
    <div id="mount-point-0" style="width:60%;margin:0 auto 30px 0;"></div>
    <div class="field">
        <div id="mount-point-1"></div>
        &nbsp;&nbsp;
        <div id="mount-point-2"></div>
        <button>Make Payment</button>
    </div>
</form>
.field {
    display: flex;
}

.field > #mount-point-1 {
    flex: .4;
}

.field > #mount-point-2 {
    flex: .4;
}

.field > button {
    flex: .2;
    margin-left: 20px;
}

button {
    position: relative;
    border: none;
    padding: 8px 16px;
    color: #FFF;
    margin: 0 auto;
    border-radius: 6px;
    background: #1abc9c;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

button:hover {
    background: #000000;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

Separated card

iban

The iban element placeholder

JavaScripthtmlcss 
(function () {
  Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    placeholders: {
      iban: {
        accountNumber: 'IBAN NUMBER ***'
      }
    }
  });
  Rebilly.on('ready', function () {
    var iban = Rebilly.iban.mount('#mount-point');
  });
})();
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

<form>
    <div class="field">
        <div id="mount-point"></div>
        <button>Make Payment</button>
    </div>
</form>
.field {
    display: flex;
}

.field > #mount-point {
    flex: .8;
}

.field > button {
    flex: .2;
    margin-left: 20px;
}

button {
    position: relative;
    border: none;
    padding: 8px 16px;
    color: #FFF;
    margin: 0 auto;
    border-radius: 6px;
    background: #1abc9c;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

button:hover {
    background: #000000;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

Placeholders and locale

The placeholders configuration will override the active locale settings.

(function () {
  Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    placeholders: {
      card: {
        expiration: 'EXP'
      }
    },
    locale: 'es-ES'
  });
  Rebilly.on('ready', function () {
    var card = Rebilly.card.mount('#mount-point');
  });
})();
(function () {
  Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    placeholders: {
      card: {
        expiry: 'EXPIRY'
      }
    },
    locale: 'es-ES'
  });
  Rebilly.on('ready', function () {
    var card = Rebilly.card.mount('#mount-point');
  });
  document.getElementById('btn-update-1').addEventListener('click', function (e) {
    Rebilly.update({
      locale: 'en-US'
    });
  });
  document.getElementById('btn-restore-1').addEventListener('click', function (e) {
    Rebilly.update({
      locale: 'es-ES'
    });
  });
})();

i18n

This object allows you to customize the error messages.

UpdatableFalse (Soon True)
RequiredFalse
TypeObject
Rebilly.initialize({
    i18n: {
        en: {
            validations: {
                [Rebilly.errorCodes.incompleteCardNumber]: 'Your Card Number is incomplete'
            }
        },
    }
});

Validations override

Combined card

See change event details in browser console

JavaScripthtmlcss 
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        i18n: {
            en: {
                validations: {
                    [Rebilly.errorCodes.invalidPaymentCard]: 'Please check your Payment Card',
                    [Rebilly.errorCodes.incompleteCardNumber]: 'Please check Card Number field',
                    [Rebilly.errorCodes.incompleteExpiry]: 'Please check Expiry field',
                    [Rebilly.errorCodes.incompleteCvv]: 'Please check CVV field',
                },
            },
        },
    });
    Rebilly.on('ready', () => {
        var card = Rebilly.card.mount('#mount-point');

        card.on('change', (data) => {
            console.log('change event data', data);
            document.getElementById('error').innerText = data.valid ? '' : data.error.message;
        });
    });


    document.getElementById('btn-update-1')
        .addEventListener('click', () => {
            alert('Soon');
            Rebilly.update({
                i18n: {
                    en: undefined,
                },
            });
        });
})();
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

<form>
    <div class="field">
        <div id="mount-point"></div>
        <button>Make Payment</button>
    </div>
    <p id="error"></p>
</form>

<button class="btn-update" id="btn-update-1">Update config</button>
.field {
    display: flex;
}

.field > #mount-point {
    flex: .8;
}

.field > button {
    flex: .2;
    margin-left: 20px;
}

button {
    position: relative;
    border: none;
    padding: 8px 16px;
    color: #FFF;
    margin: 0 auto;
    border-radius: 6px;
    background: #1abc9c;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

button:hover {
    background: #000000;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.btn-update {
    display: inline-block;
    width: auto;
    background: rgba(26, 188, 156, 0.6);
}

Separated card

See change event details in the browser console

JavaScripthtmlcss 
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        i18n: {
            en: {
                validations: {
                    [Rebilly.errorCodes.incompleteCardNumber]: 'Please check Card Number field',
                    [Rebilly.errorCodes.incompleteExpiration]: 'Please check Expiration field',
                    [Rebilly.errorCodes.incompleteCvv]: 'Please check CVV field',
                },
            },
        },
    });

    Rebilly.on('ready', () => {
        var [number, expiration, cvv] = [
            Rebilly.card.mount('#mount-point-1', 'cardNumber'),
            Rebilly.card.mount('#mount-point-2', 'cardExpiration'),
            Rebilly.card.mount('#mount-point-3', 'cardCvv'),
        ];

        number.on('change', (data) => {
            console.log('change event data', data);
            document.getElementById('error').innerText = data.valid ? '' : data.error.message;
        });
        expiry.on('change', (data) => {
            console.log('change event data', data);
            document.getElementById('error').innerText = data.valid ? '' : data.error.message;
        });
        cvv.on('change', (data) => {
            console.log('change event data', data);
            document.getElementById('error').innerText = data.valid ? '' : data.error.message;
        });
    });

    document.getElementById('btn-update-1')
        .addEventListener('click', () => {
            alert('Soon');
            Rebilly.update({i18n: {en: undefined}});
        });
})();
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

<form>
    <div class="field">
        <div id="mount-point">
            <div id="mount-point-1"></div>
            <div id="mount-point-2"></div>
            <div id="mount-point-3"></div>
        </div>
        <button>Make Payment</button>
    </div>
    <p id="error"></p>
</form>

<button class="btn-update" id="btn-update-1">Update config</button>
.field {
    display: flex;
}

.field > #mount-point {
    flex: .7;
    display: flex;
}

#mount-point > #mount-point-1 {
    flex: .5;
}

#mount-point > #mount-point-2 {
    flex: .3;
    margin-left: 1rem;
}

#mount-point > #mount-point-3 {
    flex: .15;
    margin-left: 1rem;
}

.field > button {
    flex: .2;
    margin-left: 20px;
}

button {
    position: relative;
    border: none;
    padding: 8px 16px;
    color: #FFF;
    margin: 0 auto;
    border-radius: 6px;
    background: #1abc9c;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

button:hover {
    background: #000000;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.btn-update {
    display: inline-block;
    width: auto;
    background: rgba(26, 188, 156, 0.6);
}

card

This object allows you to customize the payment card element properties.

UpdatableTrue
RequiredFalse
TypeObject

brands

This object allows you to customize the payment card Brands properties. See Allowed Card Brands List

UpdatableTrue
RequiredFalse
TypeObject

Allowed Card Brands List

This array allows you to customize the available card types in the card field

UpdatableTrue
RequiredFalse
TypeArray|null
Default valuenull (allow all)
Supported valuesSee Rebilly.card.Brands

"Visa","UnionPay","MasterCard","American Express","Discover","Maestro","JCB","Diners Club","AstroPay Card"
JavaScripthtmlcss 
(function () {
  Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    card: {
      brands: {
        allowed: [Rebilly.card.Brands.Visa, Rebilly.card.Brands.Amex]
      }
    }
  });
  Rebilly.on('ready', function () {
    var card = Rebilly.card.mount('#mount-point');
    card.on('change', function (data) {
      document.getElementById('error').innerHTML = JSON.stringify(data, null, 2);
    });
  });
})();
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

<form>
    <div class="field">
        <div id="mount-point"></div>
        <button>Make Payment</button>
    </div>
    <br>
    <div style="position: relative">
        <pre id="error"></pre>
    </div>
</form>
.field {
    display: flex;
}

.field > #mount-point {
    flex: .8;
}

.field > button {
    flex: .2;
    margin-left: 20px;
}

button {
    position: relative;
    border: none;
    padding: 8px 16px;
    color: #FFF;
    margin: 0 auto;
    border-radius: 6px;
    background: #1abc9c;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

button:hover {
    background: #000000;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
  • Visa (allowed) 4111111111111111
  • MasterCard (declined) 5555555555554444
  • AMEX (allowed) 378282246310005
  • Discover (declined) 6011111111111117

expiration

This option allows you to customize the card expiration render type. The card expiration field supports 2 render types.

  • text (simple input type text)
  • dropdown (styled dropdowns and native select on mobile)
UpdatableFalse/>
RequiredFalse
TypeString
Default value"text"
Supported values"text", "dropdown"
JavaScripthtmlcss 
(function () {
  Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    card: {
      expiry: {
        type: 'dropdown'
      }
    }
  });
  Rebilly.on('ready', function () {
    var card = Rebilly.card.mount('#mount-point');
  }); // the expiry type is non-updatable property
  // document.getElementById('btn-update-1')
  //     .addEventListener('click', (e) => {
  //         Rebilly.update({card: {expiry: {type: 'text'}}});
  //     });
})();
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

<form>
    <div class="field">
        <div id="mount-point">
        </div>
        <button>Make Payment</button>
    </div>
</form>
.field {
    display: flex;
}

.field > #mount-point {
    flex: .7;
}

.field > button {
    flex: .2;
    margin-left: 20px;
}

button {
    position: relative;
    border: none;
    padding: 8px 16px;
    color: #FFF;
    margin: 0 auto;
    border-radius: 6px;
    background: #1abc9c;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

button:hover {
    background: #000000;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.btn-update {
    display: inline-block;
    width: auto;
    background: rgba(26, 188, 156, 0.6);
}

Expiration dropdown card separated style

JavaScripthtmlcss 
(function () {
  Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    card: {
      expiry: {
        type: 'dropdown'
      }
    }
  });
  Rebilly.on('ready', function () {
    Rebilly.card.mount('#mount-point-1', 'cardNumber');
    Rebilly.card.mount('#mount-point-2', 'cardExpiry');
    Rebilly.card.mount('#mount-point-3', 'cardCvv');
  }); // the expiry type is non-updatable property
  // document.getElementById('btn-update-1')
  //     .addEventListener('click', (e) => {
  //         Rebilly.update({card: {expiry: {type: 'text'}}});
  //     });
})();
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

<form>
    <div class="field">
        <div id="mount-point">
            <div id="mount-point-1"></div>
            <div id="mount-point-2"></div>
            <div id="mount-point-3"></div>
        </div>
        <button>Make Payment</button>
    </div>
</form>
.field {
    display: flex;
}

.field > #mount-point {
    flex: .7;
    display: flex;
}

#mount-point > #mount-point-1 {
    flex: .5;
}

#mount-point > #mount-point-2 {
    flex: .3;
    margin-left: 1rem;
}

#mount-point > #mount-point-3 {
    flex: .15;
    margin-left: 1rem;
}

.field > button {
    flex: .2;
    margin-left: 20px;
}

button {
    position: relative;
    border: none;
    padding: 8px 16px;
    color: #FFF;
    margin: 0 auto;
    border-radius: 6px;
    background: #1abc9c;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

button:hover {
    background: #000000;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.btn-update {
    display: inline-block;
    width: auto;
    background: rgba(26, 188, 156, 0.6);
}

cvv

This option allows you to customize the card cvv render type. The card cvv field supports 2 render types.

  • "text" (simple input type text)
  • "password" (input type password)
UpdatableTrue
RequiredFalse
TypeString
Default value"text"
Supported values"text", "password"
JavaScripthtmlcss 
(function () {
  Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    card: {
      cvv: {
        type: 'password'
      }
    }
  });
  Rebilly.on('ready', function () {
    var card = Rebilly.card.mount('#mount-point');
  });
  document.getElementById('btn-update-1').addEventListener('click', function (e) {
    Rebilly.update({
      card: {
        cvv: {
          type: 'text'
        }
      }
    });
  });
})();
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

<form>
    <div class="field">
        <div id="mount-point">
        </div>
        <button>Make Payment</button>
    </div>
</form>

<button class="btn-update" id="btn-update-1">Update config</button>
.field {
    display: flex;
}

.field > #mount-point {
    flex: .7;
}

.field > button {
    flex: .2;
    margin-left: 20px;
}

button {
    position: relative;
    border: none;
    padding: 8px 16px;
    color: #FFF;
    margin: 0 auto;
    border-radius: 6px;
    background: #1abc9c;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

button:hover {
    background: #000000;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.btn-update {
    display: inline-block;
    width: auto;
    background: rgba(26, 188, 156, 0.6);
}

style

The option to override the default FramePay styles

RequiredFalse
UpdatableTrue
TypeObject

This object can customize the look of elements using these keys:

  • base, base state applied to the elements regardless of validation state
  • focus, focus state applied when the user has focused on an element by clicking or tabbing through fields
  • valid, validation state applied when the data within is correct or complete, and after user interaction
  • invalid, validation state applied when the data within is incorrect or incomplete, and after user interaction

Additionally, for the bank account type element, another node can be defined:

  • buttons, another set of base, focus and active states to define the look of the buttons

Common States

The base, focus, valid and invalid states can define these CSS properties:

color, fontFamily, fontSize, fontStyle, fontVariant, fontStretch, fontWeight, fontFeatureSettings, fontKerning, webkitFontSmoothing, mozOsxFontSmoothing, letterSpacing, lineHeight, textDecoration, textShadow, textTransform, textAlign, textRendering,

The following pseudo-classes and pseudo-elements can also be styled with the above properties, as a nested object.

  • :hover
  • :focus
  • :disabled
  • :webkitAutofill Only webkitTextFillColor and fontSize properties are available
  • ::placeholder Includes wordSpacing and opacity properties
  • ::selection Only color, background and textShadow properties are available

Buttons

The base, focus and active button states can define these CSS properties:

color, fontFamily, fontSize, fontStyle, fontVariant, fontStretch, fontWeight, fontFeatureSettings, fontKerning, webkitFontSmoothing, mozOsxFontSmoothing, background, borderColor, borderWidth, borderStyle, borderRadius, lineHeight, textTransform

The hover selector can be added for base and active states as a nested object containing the above properties.

  • :hover
JavaScripthtmlcss 
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        style: {
            buttons: {
                base: {
                    background: 'lightblue',
                    ':hover': {
                        background: 'yellow',
                    },
                },
                active: {
                    background: 'green',
                    ':hover': {
                        background: 'orange',
                    },
                },
            },
        },
    });
    Rebilly.on('ready', () => {
        var [
            accountType,
        ] = [
            Rebilly.bban.mount('#mount-point-1', 'bbanType'),
        ];
    });
})();
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

<form>
    <div class="field">
        <div id="mount-point-1"></div>
    </div>
</form>
# no css

classes

An object defining custom class names for the fields that were injected into your checkout form.

UpdatableTrue
RequiredFalse
TypeObject

An object defining custom class names for the fields that were injected into your checkout form.

If you modify the default classes rebilly.css will no longer apply any styles to the fields.

The following properties can be defined:

baseThe class shared by all element containers injected into your form. This is considered the default state.

Default value: rebilly-framepay
focusThe class applied when an element gains focus from user interaction.

Default value: rebilly-framepay-focus
validThe class applied when an element becomes valid through validation.

Default value: rebilly-framepay-valid
invalidThe class applied when an element becomes invalid through validation.

Default value: rebilly-framepay-invalid
webkitAutofillThe class applied when an element value is autofill by the browser (Only on Chrome and Safari).

Default value: rebilly-framepay-webkit-autofill
buttonsThe class applied to the element container for buttons. Only applicable to the bank account type field.

Default value: rebilly-framepay-buttons
secondaryThe class applied to the element container for additional elements, like hidden dropdowns, see card expiry dropdown.

Default value: rebilly-framepay-secondary
dropdownThe secondary element type dropdown, the element will have 2 classes secondary and dropdown, see card expiry dropdown.

Default value: rebilly-framepay-dropdown
groupThe class applied to the parent node which contains 2 and more rebilly elements, see card expiry dropdown.

Default value: rebilly-framepay-group
Placeholders and locale
JavaScripthtmlcss 
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        classes: {
            base: 'custom-base',
            focus: 'custom-focus',
            valid: 'custom-valid',
            invalid: 'custom-invalid',
        },
    });
    Rebilly.on('ready', () => {
        var card = Rebilly.card.mount('#mounting-point');
    });
})();
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

<form>
    <div class="field">
        <div id="mounting-point"></div>
        <button>Make Payment</button>
    </div>
</form>
.field {
    display: flex;
}

.field > #mounting-point {
    flex: .8;
}

.field > button {
    flex: .2;
    margin-left: 20px;
}

button {
    position: relative;
    border: none;
    padding: 8px 16px;
    color: #FFF;
    margin: 0 auto;
    border-radius: 6px;
    background: #1abc9c;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

button:hover {
    background: #000000;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}


.custom-base {
    outline: 2px solid black !important;

    height: 36px;
    padding: 0 8px;
    border-radius: 4px;
    box-shadow: 0 1px 1px 0 rgba(161, 178, 193, 0.3) inset;
    -webkit-transition: border 150ms ease, box-shadow 150ms ease;
    -moz-transition: border 150ms ease, box-shadow 150ms ease;
    -o-transition: border 150ms ease, box-shadow 150ms ease;
    transition: border 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
    overflow: hidden;
}

.custom-focus {
    outline: 2px solid blue !important;
}

.custom-valid {
    outline: 2px solid green !important;
}

.custom-invalid {
    outline: 2px solid red !important;
}

Structure

The basic structure of the configuration object. You could use this structure in the initialize and update methods

{
    publishableKey:'',
    organizationId:'',
    locale: 'auto',
    icon: {
        display: true,
        color: null,
    },
    digitalWallet: {
        transactionData: {
            amount: null,
            currency: null,
            countryCode: null,
            label: null,
        },
        allowedCardBrands: [],
        merchantConfig: {
            merchantName: null,
            merchantOrigin: null,
        },
        googlePayDisplayOptions: {
            buttonColor: null,
            buttonType: null,
        },
    },
    placeholders: {
        card: {
            number: null,
            expiry: null,
            cvv: null,
            expirationSeparator: null,
            expirationMonth: null,
            expirationYear: null,
        },
        bban: {
            bicTitle: '',
            bicPlaceholder: '',
            bankNameTitle: '',
            bankNamePlaceholder:'',
            routingNumber: null,
            accountNumber: null,
            type: {
                savings: null,
                checking: null,
                other: null,
            },
        },
        iban: {
            bicTitle:'',
            bicPlaceholder: '',
            bankNameTitle:'',
            bankNamePlaceholder:'',
            accountNumber: null
        },
    },
    i18n: {
        en: {
            validations: {
                ... // see i18n configuration details
                [Rebilly.errorCodes[codeName]]: 'String value',
                ...
            }
        },
        es: {
            validations: {
                ... // see i18n configuration details
                [Rebilly.errorCodes[codeName]]: 'String value',
                ...
            }
        }
    },
    card: {
        expiration: {
            type: 'text',
        },
        cvv: {
            type: 'text'
        },
        brands: {allowed: null},
    },
    style: {
        base:{
            color: null,
            fontFamily: null,
            fontFeatureSettings: null,
            fontKerning: null,
            fontSize: null,
            webkitFontSmoothing: null,
            mozOsxFontSmoothing: null,
            fontStretch: null,
            fontStyle: null,
            fontVariant: null,
            fontWeight: null,
            letterSpacing: null,
            lineHeight: null,
            textAlign: null,
            textDecoration: null,
            textRendering: null,
            textShadow: null,
            textTransform: null,
            ':focus': {/** all base styles **/ },
            ':hover': {/** all base styles **/ },
            ':disabled': {/** all base styles **/ },
            ':webkitAutofill': {/** all base styles **/ },
            '::placeholder': {/** all base styles **/ },
            '::selection': {/** all base styles **/ },
        },
        focus:{ /** all basic styles + placeholders **/},
        valid:{ /** all basic styles + placeholders **/},
        invalid:{ /** all basic styles + placeholders **/},
        buttons:{
            base: {
                background: null,
                borderColor: null,
                borderRadius: null,
                borderStyle: null,
                borderWidth: null,
                color: null,
                fontFamily: null,
                fontFeatureSettings: null,
                fontKerning: null,
                fontSize: null,
                webkitFontSmoothing: null,
                mozOsxFontSmoothing: null,
                fontStretch: null,
                fontStyle: null,
                fontVariant: null,
                fontWeight: null,
                letterSpacing: null,
                lineHeight: null,
                textAlign: null,
                textDecoration: null,
                textRendering: null,
                textShadow: null,
                textTransform: null,
                ':hover': {/** all button base styles **/ }
            }
            focus: { /** all button base styles + :hover **/ }
            active: { /** all button base styles + :hover **/ }
        },
    },
    classes: {
        base: 'rebilly-framepay',
        focus: 'rebilly-framepay-focus',
        valid: 'rebilly-framepay-valid',
        invalid: 'rebilly-framepay-invalid',
        secondary: 'rebilly-framepay-secondary',
        dropdown: 'rebilly-framepay-dropdown',
        group: 'rebilly-framepay-group',
        buttons: 'rebilly-framepay-buttons',
        webkitAutofill: 'rebilly-framepay-webkit-autofill',
    },
}
Next to Namespace