FramePay configuration reference

This section describes the reference along with the complete list of properties that are supported in the configuration object.

To initialize or update FramePay, use the configuration object to call Rebilly.initialize(configuration) or Rebilly.update(configuration).

A configuration property is updatable when it can be updated after FramePay is initialized using Rebilly.update().

For an overview of all configuration options, go to the example at the end of this page.

OptionScope
publishableKeyAll payment methods.
organizationIdAll payment methods.
localeAll payment methods.
digitalWalletGoogle Pay™
iconPayment card and bank account payment methods.
displayPayment card and bank account payment methods.
colorPayment card and bank account payment methods.
placeholdersPayment card and bank account payment methods.
i18nPayment card.
cardPayment card.
stylePayment card and bank account payment methods.
classesPayment card and bank account payment methods.

publishableKey

This property is required to authenticate your API requests from FramePay. To create a new Rebilly publishable API key, go to Add API Key.

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

organizationId

Use this property to specify the organization identifier to be used in API requests. If not specified, the default organization will be used.

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

locale

Use this property to specify the language used in the elements and messages that Framepay injects in your checkout form. This option accepts strings in the RFC-5646 format.

If you do not provide any value, FramePay will try to detect and use the client's locale. If that not possible, it will use en-US locale as the default fallback value.

Requiredfalse
Updatabletrue
Typestring
JavaScripthtmlcss
Copy
Copied
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        locale: 'es-ES',
    });
    Rebilly.on('ready', () => {
        var card = Rebilly.card.mount('#mounting-point');
    });
})();
Copy
Copied
<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>
Copy
Copied
.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

Example of digitalWallet object:

Copy
Copied
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 through Rebilly.digitalWallet.GooglePayAllowedCardNetworks. Please note, that Google has a different set of acceptable card brands for Brazil - those are exposed through 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'.

For a complete example, see Setup Google Pay™.

Icon

Use this object to control the color and visibility of the icon in the payment card and bank account elements.

Requiredfalse
Updatabletrue
Typeobject

Warning: The card icon is hidden in the combined card mode on mobile devices.

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

Display

Use this property to control the visibility of the icon in the payment card and bank account fields.

Requiredfalse
Updatabletrue
Typeboolean
Default valuetrue (render icon)
Supported valuestrue, false
JavaScripthtmlcss
Copy
Copied
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        icon: {
            display: false,
        },
    });
    Rebilly.on('ready', () => {
        var card = Rebilly.card.mount('#mounting-point');
    });
})();
Copy
Copied
<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>
Copy
Copied
.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

Use this property to control the color of the icon in the payment card and bank account 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)"

Payment card example

JavaScripthtmlcss
Copy
Copied
(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');
    });
})();
Copy
Copied
<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>
Copy
Copied
.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 example

JavaScripthtmlcss
Copy
Copied
(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');
    });
})();
Copy
Copied
<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>
Copy
Copied
.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

Use this property to customize the input placeholders that FramePay injects into your checkout form.

Requiredfalse
Updatabletrue
Typeobject

payment card placeholders

You can specify placeholders for each 3 different payment card inputs.

placeholders is an object with this default format:

Copy
Copied
placeholders: {
    card: {
        number: 'string',
        expiration: 'string',
        cvv: 'string',
    },
},

Example:

JavaScripthtmlcss
Copy
Copied
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        placeholders: {
            card: {
                number: 'Number',
                expiration: 'Exp',
                cvv: '***',
            },
        },
    });
    Rebilly.on('ready', () => {
        var card = Rebilly.card.mount('#mount-point');
    });
})();
Copy
Copied
<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>
Copy
Copied
.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;
}

custom expiration placeholder

Instead of using the default expiration placeholder:

Copy
Copied
placeholders: {
    card: {
        ...
        expiration: 'string',
        ...
    },
},

You can split the expiration placeholder in 3 strings.

Example:

Copy
Copied
Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    placeholders: {
        card: {
            expirationSeparator: '-',
            expirationMonth: 'M.',
            expirationYear: 'Y.',
        },
    },
});

Bank account placeholders

You can define placeholders for each of the 5 different BBAN/IBAN inputs.

placeholders is an object with this default format:

Copy
Copied
placeholders: {
    bban: {
        bicPlaceholder: 'string',
        bankNamePlaceholder: 'string',
        accountNumber: 'string',
        routingNumber: 'string',
        type: {
          savings: 'string',
          checking: 'string',
          other: 'string'
        }
    },
},

Example with IBAN:

JavaScripthtmlcss
Copy
Copied
(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');
  });
})();
Copy
Copied
<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>
Copy
Copied
.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;
}

Example with BBAN:

JavaScripthtmlcss
Copy
Copied
(function () {
  Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    placeholders: {
      iban: {
        accountNumber: 'IBAN NUMBER ***'
      }
    }
  });
  Rebilly.on('ready', function () {
    var iban = Rebilly.iban.mount('#mount-point');
  });
})();
Copy
Copied
<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>
Copy
Copied
.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

Customized placeholders only apply to the current configured locale.

For example, if the configured locale is 'es-ES', the Spanish placeholders will be overriden but, the placeholders of non-Spanish locales will not be overriden.

Example:

Copy
Copied
(function () {
  Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    placeholders: {
      card: {
        expiration: 'CAD.'
      }
    },
    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'
    });
  });
})();

In this example, the configured locale is es-ES and the customized placeholder is card.expiration.

If you click Update locale to en-US, the English card.expiration placeholder will not not be customized. If you click Update locale to es-ES, the Spanish card.expiration placeholder will be customized.

i18n

Use this configuration object to customize the displayed and returned error messages.

UpdatableFalse
RequiredFalse
TypeObject
Copy
Copied
Rebilly.initialize({
    i18n: {
        // Open developer tools, check the value of `navigator.language` in the console.
        // `en` should match with `navigator.language` exactly. 
        // In another word, if the value is `en-US`, then use `en-US` instead of `en`.
        en: {
            validations: {
                // Below are the default validation message, customize them yourself 
                
                // card
                [Rebilly.errorCodes.invalidCardNumber]: `Invalid card number.`,
                [Rebilly.errorCodes.invalidExpirationYearInPast]: `Your card is expired.`,
                [Rebilly.errorCodes.invalidExpirationYearInFuture]: `Your card's expiration is too far in the future.`,
                [Rebilly.errorCodes.invalidExpirationMonth]: `Your card's expiration month is invalid.`,
                [Rebilly.errorCodes.incompleteCvv]: `Invalid CVV code.`,
                [Rebilly.errorCodes.invalidExpiration]: `Invalid expiration date.`,
                [Rebilly.errorCodes.invalidPaymentCard]: `Invalid card information.`,
                
                // bban
                [Rebilly.errorCodes.incompleteRoutingNumber]: `Invalid bank routing number.`,
                [Rebilly.errorCodes.incompleteAccountNumber]: `Invalid bank account number.`,
                [Rebilly.errorCodes.invalidBbanAccount]: `Invalid bank account information.`,
                [Rebilly.errorCodes.invalidLengthRoutingNumber]: `Your bank routing number must be 5 digits long`,
                [Rebilly.errorCodes.invalidLengthAccountNumber]: `Your bank account number must less than or equal to 12 digits long`,
                [Rebilly.errorCodes.invalidMaxLengthAccountNumber]: `Your bank account number must not be 16 digits long`,
                
                // iban
                [Rebilly.errorCodes.invalidIBANNumber]: `Invalid IBAN number.`,
                [Rebilly.errorCodes.invalidIBANCountry]: `Your IBAN should start with a two-letter country code.`,
                [Rebilly.errorCodes.unsupportedIBANCountry]: `Your IBAN country is not supported.`,
                [Rebilly.errorCodes.incompleteIBANNumber]: `Your IBAN number is incomplete.`,
            }
        },
    }
});

Validations i18n

Payment card in combined mode

To see the details of the change events in the following example, open your browser's console.

JavaScripthtmlcss
Copy
Copied
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        i18n: {
            en: {
                validations: {
                    [Rebilly.errorCodes.invalidPaymentCard]: 'Please check your Payment Card',
                    [Rebilly.errorCodes.invalidCardNumber]: 'Please check Card Number field',
                    [Rebilly.errorCodes.invalidExpiration]: 'Please check Expiration 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,
                },
            });
        });
})();
Copy
Copied
<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>
Copy
Copied
.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);
}

Payment card in separated mode

To see the details of the change events in the following example, open your browser's console.

JavaScripthtmlcss
Copy
Copied
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        i18n: {
            en: {
                validations: {
                    [Rebilly.errorCodes.invalidCardNumber]: '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;
        });
        expiration.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}});
        });
})();
Copy
Copied
<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>
Copy
Copied
.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

Use this configuration object to customize some specific payment card options, such as: allowed card brands, and certain UI details.

Allowed payment card brands

Use this option to customize the list of available payment card types in the payment 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"

Specify the list of allowed brands with this format:

Copy
Copied
card: {
    brands: {
    allowed: [--your list here--]
    }
}

Example:

JavaScripthtmlcss
Copy
Copied
(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);
    });
  });
})();
Copy
Copied
<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>
Copy
Copied
.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;
}

To test the configuration with different brands, use the following example card numbers:

  • Visa (allowed) 4111111111111111
  • MasterCard (declined) 5555555555554444
  • AMEX (allowed) 378282246310005
  • Discover (declined) 6011111111111117

expiration

Use this option to customize the payment card expiration render type. The 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"

Expiration dropdown in combined mode

JavaScripthtmlcss
Copy
Copied
(function () {
  Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    card: {
      expiration: {
        type: 'dropdown'
      }
    }
  });
  Rebilly.on('ready', function () {
    var card = Rebilly.card.mount('#mount-point');
  }); // the expiration type is non-updatable property
  // document.getElementById('btn-update-1')
  //     .addEventListener('click', (e) => {
  //         Rebilly.update({card: {expiration: {type: 'text'}}});
  //     });
})();
Copy
Copied
<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>
Copy
Copied
.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 in separated mode

JavaScripthtmlcss
Copy
Copied
(function () {
  Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    card: {
      expiration: {
        type: 'dropdown'
      }
    }
  });
  Rebilly.on('ready', function () {
    Rebilly.card.mount('#mount-point-1', 'cardNumber');
    Rebilly.card.mount('#mount-point-2', 'cardExpiration');
    Rebilly.card.mount('#mount-point-3', 'cardCvv');
  }); // the expiration type is non-updatable property
  // document.getElementById('btn-update-1')
  //     .addEventListener('click', (e) => {
  //         Rebilly.update({card: {expiration: {type: 'text'}}});
  //     });
})();
Copy
Copied
<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>
Copy
Copied
.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

Use this option to customize the payment card cvv render type. The 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
Copy
Copied
(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'
        }
      }
    });
  });
})();
Copy
Copied
<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>
Copy
Copied
.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

Use this option to override the default FramePay styles.

RequiredFalse
UpdatableTrue
TypeObject

To customize the look of the rendered elements, use these keys:

  • base: state applied to the elements regardless of validation state.
  • focus: state applied when an element has been focused by the user clicking or tabbing through the fields.
  • valid: validation state applied when the input data is correct or complete after each user interaction.
  • invalid: validation state applied when the input data is incorrect or incomplete after each user interaction.

Example:

Copy
Copied
Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    style: {
        base: {
            color: 'blue',
            ':focus': {
                color: 'lightblue',
            },
        },
        valid: {
            color: 'green',
        },
        invalid: {
            color: 'yellow',
        },
    },
});

Additionally, for the account type element in the bank account payment method setup, you can use a nested buttons object:

  • buttons: another set of base, focus and active states to define the look of the account type 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 are compatible with 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

Example:

JavaScripthtmlcss
Copy
Copied
(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'),
        ];
    });
})();
Copy
Copied
<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>
Copy
Copied
# no css

classes

Use this object to define custom class names for the fields that are injected into your checkout form.

UpdatableTrue
RequiredFalse
TypeObject
note

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

You can define the following properties:

baseThe class shared by all the element containers. This is considered the default state.

Default value: rebilly-framepay
focusThe class applied when an element is focused after a 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 in 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 expiration dropdown.

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

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

Default value: rebilly-framepay-group

Example:

JavaScripthtmlcss
Copy
Copied
(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');
    });
})();
Copy
Copied
<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>
Copy
Copied
.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;
}

Configuration structure example

This is an example of the structure of the configuration object. To browse the full list of options, see the configuration reference.

Copy
Copied
{
    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,
            expiration: 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',
    },
}