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.
OptionScope
publishableKeyAll payment methods.
organizationIdAll payment methods.
websiteIdPayment card, PayPal, Plaid, Apple Pay, Google Pay™, Klarna.
localeAll payment methods.
methodsPayment card, PayPal, Plaid, Apple Pay, Google Pay™, Klarna.
transactionDataPayment card, PayPal, Plaid, Apple Pay, Google Pay™, Klarna.
iconPayment card and bank account payment methods.
displayPayment card and bank account payment methods.
colorPayment card and bank account payment methods.
placeholdersPayment card and bank account payment methods.
i18nPayment card.
paypalPayPal.
applePayApple Pay.
googlePayGoogle Pay™.
kountAccountIdBlueSnap payment gateways.
stylePayment card and bank account payment methods.
classesPayment card and bank account payment methods.

publishableKey

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

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

organizationId

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

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

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'.
Requiredfalse
Updatablefalse
Typestring
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.
Requiredfalse
Updatabletrue
Typestring
JavaScripthtmlcss
Copy
Copied
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        locale: 'es-ES',
    });
    Rebilly.on('ready', () => {
        var card = Rebilly.card.mount('#mounting-point');
    });
})();
Copy
Copied
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

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

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

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

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

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

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.

RequiredFalse
UpdatableTrue
TypeArray | 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.

PropertyTypeRequired for
currencystringauto methods, PayPal, Plaid, Apple Pay, Google Pay™, Klarna
amountnumberauto methods, PayPal, Plaid, Apple Pay, Google Pay™, Klarna
labelstringApple 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.
Requiredfalse
Updatabletrue
Typeobject
Warning: The card icon is hidden in the combined card mode on mobile devices.
Copy
Copied
Rebilly.initialize({
    icon: {
        display: true,
        color: '#000000'
    }
})

Display

Use this property to control the visibility of the icon in the payment card and bank account fields.
Requiredfalse
Updatabletrue
Typeboolean
Default valuetrue (render icon)
Supported valuestrue, false
JavaScripthtmlcss
Copy
Copied
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        icon: {
            display: false,
        },
    });
    Rebilly.on('ready', () => {
        var card = Rebilly.card.mount('#mounting-point');
    });
})();
Copy
Copied
<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.js"></script>

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

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

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

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

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

Color

Use this property to control the color of the icon in the payment card and bank account fields.
Requiredfalse
Updatabletrue
Typestring
Default value"#A1B2C1"
Supported valuesString colors in formats like: "red", "#A1B2C1", "rgb(0,0,0)", "rbga(0,0,0,0.5)"

Payment card example

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

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

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

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

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

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

IBAN element example

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

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

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

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

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

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

placeholders

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

Requiredfalse
Updatabletrue
Typeobject

payment card placeholders

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

placeholders is an object with this default format:
Copy
Copied
placeholders: {
    card: {
        number: 'string',
        expiration: 'string',
        cvv: 'string',
    },
},

Example:

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

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

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

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

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

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

custom expiration placeholder

Instead of using the default expiration placeholder:
Copy
Copied
placeholders: {
    card: {
        ...
        expiration: 'string',
        ...
    },
},

You can split the expiration placeholder in 3 strings.

Example:

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

Bank account placeholders

You can define placeholders for each of the 5 different BBAN 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.
UpdatableFalse
RequiredFalse
TypeObject
Copy
Copied
Rebilly.initialize({
    i18n: {
        // Open developer tools, check the value of `navigator.language` in the console.
        // `en` should match with `navigator.language` exactly.
        // In another word, if the value is `en-US`, then use `en-US` instead of `en`.
        en: {
            validations: {
                // Below are the default validation message, customize them yourself

                // card
                [Rebilly.errorCodes.invalidCardNumber]: `Invalid card number.`,
                [Rebilly.errorCodes.invalidExpirationYearInPast]: `Your card is expired.`,
                [Rebilly.errorCodes.invalidExpirationYearInFuture]: `Your card's expiration is too far in the future.`,
                [Rebilly.errorCodes.invalidExpirationMonth]: `Your card's expiration month is invalid.`,
                [Rebilly.errorCodes.incompleteCvv]: `Invalid CVV code.`,
                [Rebilly.errorCodes.invalidExpiration]: `Invalid expiration date.`,
                [Rebilly.errorCodes.invalidPaymentCard]: `Invalid card information.`,

                // bban
                [Rebilly.errorCodes.incompleteRoutingNumber]: `Invalid bank routing number.`,
                [Rebilly.errorCodes.incompleteAccountNumber]: `Invalid bank account number.`,
                [Rebilly.errorCodes.invalidBbanAccount]: `Invalid bank account information.`,
                [Rebilly.errorCodes.invalidLengthRoutingNumber]: `Your bank routing number must be 5 digits long`,
                [Rebilly.errorCodes.invalidLengthAccountNumber]: `Your bank account number must less than or equal to 12 digits long`,
                [Rebilly.errorCodes.invalidMaxLengthAccountNumber]: `Your bank account number must not be 16 digits long`,

                // iban
                [Rebilly.errorCodes.invalidIBANNumber]: `Invalid IBAN number.`,
                [Rebilly.errorCodes.invalidIBANCountry]: `Your IBAN should start with a two-letter country code.`,
                [Rebilly.errorCodes.unsupportedIBANCountry]: `Your IBAN country is not supported.`,
                [Rebilly.errorCodes.incompleteIBANNumber]: `Your IBAN number is incomplete.`,
            }
        },
    }
});

Validations i18n

Payment card in combined mode

To see the details of the change events in the following example, open your browser's console.
JavaScripthtmlcss
Copy
Copied
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        i18n: {
            en: {
                validations: {
                    [Rebilly.errorCodes.invalidPaymentCard]: 'Please check your Payment Card',
                    [Rebilly.errorCodes.invalidCardNumber]: 'Please check Card Number field',
                    [Rebilly.errorCodes.invalidExpiration]: 'Please check Expiration field',
                    [Rebilly.errorCodes.incompleteCvv]: 'Please check CVV field',
                },
            },
        },
    });
    Rebilly.on('ready', () => {
        var card = Rebilly.card.mount('#mount-point');

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


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

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

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

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

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

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

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

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

Payment card in separated mode

To see the details of the change events in the following example, open your browser's console.
JavaScripthtmlcss
Copy
Copied
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
        i18n: {
            en: {
                validations: {
                    [Rebilly.errorCodes.invalidCardNumber]: 'Please check Card Number field',
                    [Rebilly.errorCodes.incompleteExpiration]: 'Please check Expiration field',
                    [Rebilly.errorCodes.incompleteCvv]: 'Please check CVV field',
                },
            },
        },
    });

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

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

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

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

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

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

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

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

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

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

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

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

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

expiration

Use this option to customize the payment card expiration render type. The expiration field supports 2 render types.
  • text (simple input type text)
  • dropdown (styled dropdowns and native select on mobile)
UpdatableFalse
RequiredFalse
TypeString
Default value"text"
Supported values"text", "dropdown"

Expiration dropdown in combined mode

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

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

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

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

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

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

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

Expiration dropdown in separated mode

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

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

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

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

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

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

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

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

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

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

cvv

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

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

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

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

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

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

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

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

style

Use this option to override the default FramePay styles.

RequiredFalse
UpdatableTrue
TypeObject

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

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

Example:

Copy
Copied
Rebilly.initialize({
    publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
    style: {
        base: {
            color: 'blue',
            ':focus': {
                color: 'lightblue',
            },
        },
        valid: {
            color: 'green',
        },
        invalid: {
            color: 'yellow',
        },
    },
});
Additionally, for the account type element in the bank account payment method setup, you can use a nested buttons object:
  • buttons: another set of base, focus and active states to define the look of the account type buttons.

Common States

The base, focus, valid and invalid states can define these CSS properties: color, fontFamily, fontSize, fontStyle, fontVariant, fontStretch, fontWeight, fontFeatureSettings, fontKerning, webkitFontSmoothing, mozOsxFontSmoothing, letterSpacing, lineHeight, textDecoration, textShadow, textTransform, textAlign, textRendering,

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

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

Buttons

The base, focus and active button states are compatible with these CSS properties:color, fontFamily, fontSize, fontStyle, fontVariant, fontStretch, fontWeight, fontFeatureSettings, fontKerning, webkitFontSmoothing, mozOsxFontSmoothing, background, borderColor, borderWidth, borderStyle, borderRadius, lineHeight, 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.
UpdatableTrue
RequiredFalse
TypeObject
note
If you modify the default classes, rebilly.css will no longer apply any styles to the fields.

You can define the following properties:

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

Default value: rebilly-framepay
focusThe class applied when an element is focused after a user interaction.

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

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

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

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

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

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

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

Default value: rebilly-framepay-group

Example:

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

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

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

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

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

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


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

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

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

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

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

paypal

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

Requiredfalse
Updatabletrue
Typeobject

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.

Requiredfalse
Updatabletrue
Typeobject

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

Requiredfalse
Updatabletrue
Typeobject
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: 'default',
        buttonType: 'short',
        buttonHeight: '40px',
    }
});

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