# 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](#adjust-the-default-style). - [Create a more advanced customization, using `css` property](#create-a-more-advanced-customization). ## 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](#interactive-example-theme-object). ### 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
``` ```CSS body, html { background: #201F55; padding: 0; margin: 0; } #app { font-family: Trebuchet MS, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #ffffff; } #app a { color: #ffffff; } .form-wrapper { max-width: 700px; box-sizing: border-box; padding: 40px 0; margin: 0 auto; } .form-wrapper section { background: transparent; box-sizing: border-box; padding: 40px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.25); } .form-wrapper section + section { margin-top: 20px; } ``` ### 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 the `font-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 as `colorPrimary`. - `buttonColorText`: Button text color (CSS value). - `buttonFontSize`: Button font size (in px). - `buttonFontFamily`: Button font family. This value is the same as the `font-family` CSS property for buttons. - `buttonFontWeight`: Button font weight. - `buttonBorder`: Valid CSS [border shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/border#formal_syntax). Defaults to `1px solid transparent`. - `buttonBorderRadius`: Button border radius value (in px). By default, this will be the same value as `borderRadius`. For the full list of `theme` object properties, see [Reference](/docs/dev-docs/reference-rebilly-instruments#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](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#basic_usage). ```JavaScript 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](/docs/dev-docs/reference-rebilly-instruments#rebillyinstrumentsmount). Each payment instrument has a specific object for customization. ```JavaScript 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: ```JavaScript RebillyInstruments.mount({ ... items: [ { planId: 'my-plan-id', quantity: 1, thumbnail: 'https://picsum.photos/200' // Adds a thumbnail } ] ... }); ``` ### Interactive example: `theme` object Preview iframe JavaScript ```js import RebillyInstruments from '@rebilly/instruments'; RebillyInstruments.mount({ publishableKey: 'pk_sandbox_123', organizationId: 'org-123', websiteId: 'my-website-id', apiMode: 'sandbox', theme: { colorPrimary: '#504CCA', // Brand color colorText: '#ffffff', colorDanger: '#cd5c5c', colorBackground: '#201F55', // Website background color buttonColorText: '#ffffff', fontFamily: 'Trebuchet MS, sans-serif', // Website font family }, items: [ { planId: 'my-plan-id', quantity: 1, thumbnail: 'https://picsum.photos/200', // Adds a thumbnail }, ], paymentInstruments: { googlePay: { displayOptions: { buttonType: 'buy', // Changes GooglePay display. }, }, }, }); ``` HTML ```html
``` CSS ```css body, html { background: #201f55; padding: 0; margin: 0; } #app { font-family: Trebuchet MS, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #ffffff; } #app a { color: #ffffff; } .form-wrapper { max-width: 700px; box-sizing: border-box; padding: 40px 0; margin: 0 auto; } .form-wrapper section { background: transparent; box-sizing: border-box; padding: 40px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.25); } .form-wrapper section + section { margin-top: 20px; } ``` ## 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](/docs/dev-docs/css-reference-rebilly-instruments). To try out these steps in an interactive environment, see [Interactive example](#interactive-example-css-object). 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#basic_usage). ### 1. Add the library mounting points to your website Add the mounting points to your website. ```HTML
``` ```CSS body, html { background: #fff; padding: 0; margin: 0; } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; display: flex; } section { flex: 0 1 55%; box-sizing: border-box; height: 100vh; background: #ffffff; } section + section { flex: 0 1 45%; background:#f9fafb; border-left: 1px solid #e1e1e1; } form-wrapper { max-width: 500px; margin: 0 20px 0 auto; box-sizing: border-box; padding: 60px 0; text-align: left; } rebilly-instruments-summary { margin: 60px 40px 0 20px; } @media (max-width: 600px) { #app { flex-direction: column-reverse; } rebilly-instruments-summary { margin: 0; margin: 20px; } form-wrapper { max-width: auto; margin: 0; padding: 20px; text-align: left; } } ``` ### 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 ```JavaScript 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; } `, ... }); ``` ### Interactive example: `CSS` object Preview iframe JavaScript ```js import RebillyInstruments from '@rebilly/instruments'; RebillyInstruments.mount({ publishableKey: 'pk_sandbox_123', organizationId: 'org-123', websiteId: 'my-website-id', apiMode: 'sandbox', 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; } `, items: [ { planId: 'my-plan-id', quantity: 1, thumbnail: 'https://picsum.photos/200', // Adds a thumbnail }, { planId: 'my-plan-id-2', quantity: 2, thumbnail: 'https://picsum.photos/200', // Adds a thumbnail }, ], }); ``` HTML ```html
``` CSS ```css body, html { background: #fff; padding: 0; margin: 0; } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; display: flex; } section { flex: 0 1 55%; box-sizing: border-box; height: 100vh; background: #ffffff; } section + section { flex: 0 1 45%; background: #f9fafb; border-left: 1px solid #e1e1e1; } form-wrapper { max-width: 500px; margin: 0 20px 0 auto; box-sizing: border-box; padding: 60px 0; text-align: left; } rebilly-instruments-summary { margin: 60px 40px 0 20px; } @media (max-width: 600px) { #app { flex-direction: column-reverse; } rebilly-instruments-summary { margin: 0; margin: 20px; } form-wrapper { max-width: auto; margin: 0; padding: 20px; text-align: left; } } ```