Developer docs
/
Rebilly Instruments
/
Customize
/
Style
Last updated

These docs are intended for a developer audience.

Style

This topic describes how to customize Rebilly Instruments to match your branding.

This tutorial describes how to:

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.

  1. HTML
  2. CSS
<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 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. 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.

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

  1. JavaScript
  2. HTML
  3. CSS
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.
      },
    },
  }
});

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.

  1. HTML
  2. CSS
<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;
    }
  `,
  ...
});

Interactive example: CSS object

  1. JavaScript
  2. HTML
  3. CSS
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
    },
  ]
});