Style
This topic describes how to customize Rebilly Instruments to match your branding.
This tutorial describes how to:
- Adjust the default style, using the
theme
object. - Create a more advanced customization, using
css
property.
Adjust the default style
In this part of the tutorial, you will adjust the default style to a dark theme. For an example of the default style, see Interactive example.
1. Add the library mounting points to your website
By default the library will take 100% of your website width. Assign the mount points a set width and padding.
<html>
<body>
<div id="app">
<div class="form-wrapper">
<section class="rebilly-instruments-summary"></section>
<section class="rebilly-instruments"></section>
</div>
</div>
</body>
</html>
2. Use your website style to configure the theme
object
Use the theme
property, in the RebillyInstruments.mount()
option, to match the library style to your branding. The most commonly used theme
object properties are:
colorPrimary
: CSS valid color for the primary color accent on the UI components, buttons, inputs highlights, and loader.colorText
: CSS valid color for the overall text.colorBackground
: CSS valid color for the UI components background color.colorDanger
: CSS valid color for the error messages and invalid inputs highlights.fontFamily
: Same as thefont-family
CSS property.fontSizeBase
: Main font size (in px).fontLineHeightBase
: Main line-height (in px).fontWeightBase
: Main font weight.borderRadius
: General border radius value (in px) for the product photo and form elements.buttonColorBackground
: Button background color (CSS value). By default, this will be the same value ascolorPrimary
.buttonColorText
: Button text color (CSS value).buttonFontSize
: Button font size (in px).buttonFontFamily
: Button font family. This value is the same as thefont-family
CSS property for buttons.buttonFontWeight
: Button font weight.buttonBorder
: Valid CSS border shorthand. Defaults to1px solid transparent
.buttonBorderRadius
: Button border radius value (in px). By default, this will be the same value asborderRadius
.
For the full list of theme
object properties, see Reference.
All theme
properties are mapped to CSS variables and are prefixed with --rebilly
. Prefix examples: --rebilly-colorPrimary
, --rebilly-colorText
, --rebilly-buttonBorderRadius
. For information on how to use custom CSS properties, see MDN web docs.
RebillyInstruments.mount({
...
theme: {
colorPrimary: '#504CCA', // Brand color
colorText: '#ffffff',
colorDanger: '#cd5c5c',
colorBackground: '#201F55', // Website background color
buttonColorText: '#ffffff',
fontFamily: 'Trebuchet MS, sans-serif' // Website font family
}
...
});
3. Update GooglePay
Configure googlePay.displayOptions
on the mount method. Each payment instrument has a specific object for customization.
RebillyInstruments.mount({
...
paymentInstruments: {
googlePay: {
displayOptions: {
buttonType: 'buy', // Changes GooglePay display.
},
},
}
...
});
4. Optional — Add a thumbnail to the summary line item
To add an image of your summary line item, pass the image URL in the option intent items:
RebillyInstruments.mount({
...
items: [
{
planId: 'my-plan-id',
quantity: 1,
thumbnail: 'https://picsum.photos/200' // Adds a thumbnail
}
]
...
});
Interactive example: theme
object
Create a more advanced customization
In this part of the tutorial, you will use the css
property, of the RebillyInstruments.mount()
option, to adjust the library style to match your branding. The css
property accepts a string containing any valid CSS, the passed CSS will override any style that exists in the library.
To find the CSS rule or HTML element that you want to target, use developer tools in your web browser.
For a list of the most common CSS classes to target, see CSS classes.
To try out these steps in an interactive environment, see Interactive example.
All theme
properties are mapped to CSS variables and are prefixed with --rebilly
. Prefix examples: --rebilly-colorPrimary
, --rebilly-colorText
, --rebilly-buttonBorderRadius
. For information on how to use custom CSS properties, see MDN web docs.
1. Add the library mounting points to your website
Add the mounting points to your website.
<html>
<body>
<div id="app">
<section id="form">
<div class="form-wrapper">
<div class="rebilly-instruments"><div>
</div>
</section>
<section id="summary">
<div class="rebilly-instruments-summary"><div>
</section>
</div>
</body>
</html>
2. Use css
property to override any styles and change the input labels to floating
Target specific classes in the library to modify:
- Inputs
- Heading
- Summary loader
RebillyInstruments.initialize({
...
theme: {
labels: 'floating'
},
css: `
.rebilly-instruments-content.is-summary,
.rebilly-instruments-summary .rebilly-instruments-loader {
background-color: #f9fafb;
}
.rebilly-instruments-h2 {
font-weight: normal;
}
.rebilly-instruments-form-field-input,
.rebilly-instruments-form-field-select {
height: 60px;
}
.rebilly-instruments-form-field-input:not(:placeholder-shown):focus,
.rebilly-instruments-form-field-input:not(:placeholder-shown),
.rebilly-instruments-form-field-input:focus,
.rebilly-instruments-form-field-select {
padding-top: 28px;
padding-bottom: 6px;
}
.is-floating input:-webkit-autofill + .rebilly-instruments-form-field-label,
.is-floating select:-webkit-autofill + .rebilly-instruments-form-field-label,
.is-floating .rebilly-instruments-form-field-input:focus + .rebilly-instruments-form-field-label,
.is-floating .rebilly-instruments-form-field-select:focus + .rebilly-instruments-form-field-label,
.is-floating .rebilly-instruments-form-field-label.is-active {
transform: translateY(-120%) scale(0.875)!important;
}
`,
...
});