publishableKey
A Rebilly publishable API key. This property is required to authenticate your API requests from Framepay.
Required | true |
Updatable | false |
Type | string |
(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).
Required | false |
Updatable | false |
Type | string |
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.
Required | true |
Updatable | false |
Type | string |
Default value | "auto" ("en-US" as fallback) |
Supported values | "auto" , "en-US" , "es-ES" |
(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.
Required | true (when a digital wallet payment method is used) |
Updatable | true |
Type | object |
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.
Required | false |
Updatable | true |
Type | object |
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.
Required | false |
Updatable | true |
Type | boolean |
Default value | true (render icon) |
Supported values | true , false |
(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.
Required | false |
Updatable | true |
Type | string |
Default value | "#A1B2C1" |
Supported values | String colors in formats like: "red" , "#A1B2C1" , "rgb(0,0,0)" , "rbga(0,0,0,0.5)" |
Card element
(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
(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.
Required | false |
Updatable | true |
Type | object |
card
The card element placeholders.
Required | false |
Updatable | true |
Type | object |
(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 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
(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>
<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
(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.
Updatable | False (Soon True) |
Required | False |
Type | Object |
Rebilly.initialize({
i18n: {
en: {
validations: {
[Rebilly.errorCodes.incompleteCardNumber]: 'Your Card Number is incomplete'
}
},
}
});
Validations override
Combined card
See change event details in browser console
(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
(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.
Updatable | True |
Required | False |
Type | Object |
brands
This object allows you to customize the payment card Brands properties. See Allowed Card Brands List
Updatable | True |
Required | False |
Type | Object |
Allowed Card Brands List
This array allows you to customize the available card types in the card field
Updatable | True |
Required | False |
Type | Array|null |
Default value | null (allow all) |
Supported values | See Rebilly.card.Brands "Visa" ,"UnionPay" ,"MasterCard" ,"American Express" ,"Discover" ,"Maestro" ,"JCB" ,"Diners Club" ,"AstroPay Card" |
(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)
Updatable | False/> |
Required | False |
Type | String |
Default value | "text" |
Supported values | "text" , "dropdown" |
(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
(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)
Updatable | True |
Required | False |
Type | String |
Default value | "text" |
Supported values | "text" , "password" |
(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
Required | False |
Updatable | True |
Type | Object |
This object can customize the look of elements using these keys:
base
, base state applied to the elements regardless of validation statefocus
, focus state applied when the user has focused on an element by clicking or tabbing through fieldsvalid
, validation state applied when the data within is correct or complete, and after user interactioninvalid
, 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 ofbase
,focus
andactive
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
OnlywebkitTextFillColor
andfontSize
properties are available::placeholder
IncludeswordSpacing
andopacity
properties::selection
Onlycolor
,background
andtextShadow
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
(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.
Updatable | True |
Required | False |
Type | Object |
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:
base | The class shared by all element containers injected into your form. This is considered the default state. Default value: rebilly-framepay |
focus | The class applied when an element gains focus from user interaction. Default value: rebilly-framepay-focus |
valid | The class applied when an element becomes valid through validation. Default value: rebilly-framepay-valid |
invalid | The class applied when an element becomes invalid through validation. Default value: rebilly-framepay-invalid |
webkitAutofill | The class applied when an element value is autofill by the browser (Only on Chrome and Safari). Default value: rebilly-framepay-webkit-autofill |
buttons | The class applied to the element container for buttons. Only applicable to the bank account type field.Default value: rebilly-framepay-buttons |
secondary | The class applied to the element container for additional elements, like hidden dropdowns, see card expiry dropdown. Default value: rebilly-framepay-secondary |
dropdown | The secondary element type dropdown , the element will have 2 classes secondary and dropdown , see card expiry dropdown.Default value: rebilly-framepay-dropdown |
group | The class applied to the parent node which contains 2 and more rebilly elements, see card expiry dropdown. Default value: rebilly-framepay-group |
(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',
},
}