FramePay configuration reference

This topic 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.

Option	Scope
publishableKey	All payment methods.
organizationId	All payment methods.
websiteId	Payment card, PayPal, Plaid, Apple Pay, Google Pay™, Klarna.
locale	All payment methods.
methods	Payment card, PayPal, Plaid, Apple Pay, Google Pay™, Klarna.
transactionData	Payment card, PayPal, Plaid, Apple Pay, Google Pay™, Klarna.
icon	Payment card and bank account payment methods.
display	Payment card and bank account payment methods.
color	Payment card and bank account payment methods.
placeholders	Payment card and bank account payment methods.
i18n	Payment card.
paypal	PayPal.
applePay	Apple Pay.
googlePay	Google Pay™.
kountAccountId	BlueSnap payment gateways.
style	Payment card and bank account payment methods.
classes	Payment 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.


Required	true
Updatable	false
Type	string

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.


Required	false
Updatable	false
Type	string

Copy

Copied

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

websiteId

Use this property to specify the website identifier used for Ready To Pay API requests. Required if using automatic method configuration with methods: 'auto'.


Required	false
Updatable	false
Type	string

Copy

Copied

Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    organizationId: 'your-company-organization-id',
    websiteId: 'your-rebilly-website-id',
    transactionData: {
        currency: 'USD',
        amount: 10,
    },
});
Rebilly.on('ready', () => {
    const card = Rebilly.paypal.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.


Required	false
Updatable	true
Type	string

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;
}

methods

note

This property is applicable for: payment card, PayPal, Plaid, Apple Pay, Google Pay™, and Klarna. Support for other payment methods is not yet added.

Required	False
Updatable	True
Type	Array \| string
Default value	`'auto'`
Supported values	`'auto'` OR an array of payment methods matching the structure returned by ReadyToPay.

Automatic payment method details

When methods is auto (default) FramePay uses information from the Ready To Pay API operation to automatically configure your payment methods.websiteId and transactionData are required when using automatically configured payment methods.

Example:

Copy

Copied

Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    organizationId: 'your-company-organization-id',
    websiteId: 'your-rebilly-website-id',
    transactionData: {
        currency: 'USD',
        amount: 10,
    },
});

Manual payment method details

To configure payment method details manually, pass an array of payment method objects matching the structure returned by ReadyToPay.

Example:

Copy

Copied

Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    organizationId: 'your-company-organization-id',
    transactionData: {
        currency: 'USD',
    },
    methods: [
        {
            method: 'paypal',
            feature: {
                billingAgreementToken: 'BA-1234',
                paypalMerchantId: 'ABCDEF',
            },
        },
    ]
});

transactionData

note

This property is required when methods: 'auto'

This property contains information about the transaction which is required to mount payment methods. The required properties change based on automatic or manual payment methods configuration and the payment method type.

Property	Type	Required for
currency	string	`auto` methods, PayPal, Plaid, Apple Pay, Google Pay™, Klarna
amount	number	`auto` methods, PayPal, Plaid, Apple Pay, Google Pay™, Klarna
label	string	Apple Pay, Google Pay™

Example:

Copy

Copied

// Automatically configuring payment methods
Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    organizationId: 'your-company-organization-id',
    websiteId: 'your-rebilly-website-id',
    transactionData: {
        currency: 'USD',
        amount: 10,
    },
});

// Manually configuring payment methods
Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    organizationId: 'your-company-organization-id',
    websiteId: 'your-rebilly-website-id',
    methods: [
        {
            method: 'paypal',
            feature: {
                billingAgreementToken: 'BA-1234',
                paypalMerchantId: 'ABCDEF',
            },
        },
    ]
    transactionData: {
        // Currency is always required for PayPal
        currency: 'USD',
    },
});

Icon

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


Required	false
Updatable	true
Type	object

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.


Required	false
Updatable	true
Type	boolean
Default value	`true` (render icon)
Supported values	`true`, `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.


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)"`

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.


Required	false
Updatable	true
Type	object

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 or 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 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.

Updatable	False
Required	False
Type	Object

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);
}

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)

Updatable	False
Required	False
Type	String
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)

Updatable	True
Required	False
Type	String
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.

Required	False
Updatable	True
Type	Object

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, textTransformThe 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.

Updatable	True
Required	False
Type	Object

note

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

You can define the following properties:

`base`	The class shared by all the element containers. This is considered the default state. Default value: `rebilly-framepay`
`focus`	The class applied when an element is focused after a 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 in 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 expiration dropdown. Default value: `rebilly-framepay-secondary`
`dropdown`	The `secondary` element type `dropdown`, the element will have 2 classes `secondary` and `dropdown`, see card expiration dropdown. Default value: `rebilly-framepay-dropdown`
`group`	The 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;
}

paypal

This property contains configuration values that change the appearance of the PayPal button. For a complete example, see Set up PayPal.


Required	false
Updatable	true
Type	object

For more information, see the PayPal Buttons style guide.

Copy

Copied

Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    organizationId: 'your-company-organization-id',
    websiteId: 'your-rebilly-website-id',
    transactionData: {
        currency: 'USD',
        amount: 10,
    },
    paypal: {
        buttonColor: 'blue',
        buttonShape: 'pill',
        buttonHeight: 55,
    }
});

applePay

This property contains configuration values that change the appearance of the Apple Pay button. For a complete example, see Set up Apple Pay.


Required	false
Updatable	true
Type	object

For more information, see the Apple Pay on the Web Interactive Demo.

Copy

Copied

Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    organizationId: 'your-company-organization-id',
    websiteId: 'your-rebilly-website-id',
    transactionData: {
        currency: 'USD',
        amount: 10,
        label: 'Demo purchase from docs example page.',
    },
    applePay: {
        buttonColor: 'white-outline',
        buttonType: 'buy',
        buttonLanguage: 'ar-AB',
    }
});

googlePay

This property contains configuration values that change the appearance of the Google Pay™ button. For a complete example, see Set up Google Pay™.


Required	false
Updatable	true
Type	object

Copy

Copied

Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    organizationId: 'your-company-organization-id',
    websiteId: 'your-rebilly-website-id',
    transactionData: {
        currency: 'USD',
        amount: 10,
        label: 'Demo purchase from docs example page.'
    },
    googlePay: {
        buttonColor: 'black',
        buttonType: 'buy',
        buttonHeight: '48px',
    }
});

Google Pay™ brand guidelines

Google Pay™ provides specific guidelines on how the Google Pay™ button must be used. For the full guidelines, see Google's Brand guidelines.

As a quick reference, here are some general guidelines:

Use black buttons on white or light backgrounds to provide contrast.
Use white buttons on dark or colorful backgrounds.
Use the same style of button throughout your site.
Ensure that the size of the Google Pay™ buttons remains equal to or larger than other buttons.
Always maintain the minimum clear space of 8 dp on all sides of the payment button. Ensure the clear space is never broken with graphics or text.

For information on UX best practices when using Google Pay™, see UX best practices.

kountAccountId

Configures the Kount account used to generate the kountFraudSessionId, which is included in requests to BlueSnap payment gateways.

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,
    },
    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',
    },
}

Our Solutions

Products

Features

FramePay configuration reference

publishableKey

organizationId

websiteId

locale

methods

note

Automatic payment method details

Manual payment method details

transactionData

note

Icon

Display

Color

Payment card example

IBAN element example

placeholders

payment card placeholders

custom expiration placeholder

Bank account placeholders

Placeholders and locale

i18n

Validations i18n

Payment card in combined mode

Payment card in separated mode

expiration

Expiration dropdown in combined mode

Expiration dropdown in separated mode

cvv

style

Common States

Buttons

classes

note

paypal

applePay

googlePay

Google Pay™ brand guidelines

kountAccountId

Configuration structure example

Expiration dropdown in `combined` mode

Expiration dropdown in `separated` mode