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.

HTMLCSS
Copy
Copied
<html>
  <body>
    <div id="app">
      <div class="form-wrapper">
        <section class="rebilly-instruments-summary"></section>
        <section class="rebilly-instruments"></section>
      </div>
    </div>
  </body>
</html>
Copy
Copied
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. 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 variablesMDN web docs with the prefixed with --rebilly. Example --rebilly-colorPrimary, --rebilly-colorText, --rebilly-buttonBorderRadius

Copy
Copied
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 to use the light scheme

To comply with GooglePay brand guidelines, configure googlePay.displayOptions on the mount method. Each payment instrument has a specific object for customization.

Copy
Copied
RebillyInstruments.mount({
  ...
  paymentInstruments: {
    googlePay: {
      displayOptions: {
        buttonColor: 'white', // Changes GooglePay color scheme.
      },
    },
  }
  ...
});

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:

Copy
Copied
RebillyInstruments.mount({
  ...
  items: [
    {
      planId: 'my-plan-id',
      quantity: 1,
      thumbnail: 'https://picsum.photos/200' // Adds a thumbnail
    }
  ]
  ...
});

Interactive example: theme object

JavaScriptHTMLCSS
Copy
Copied
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: {
        buttonColor: 'white', // Changes GooglePay color scheme.
      },
    },
  }
});
Copy
Copied
<html>
  <body>
    <div id="app">
      <div class="form-wrapper">
        <section class="rebilly-instruments-summary"></section>
        <section class="rebilly-instruments"></section>
      </div>
    </div>
  </body>
</html>
Copy
Copied
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.

To try out these steps in an interactive environment, see Interactive example.

All theme properties are mapped to CSS variablesMDN web docs with the prefixed with --rebilly. Example --rebilly-colorPrimary, --rebilly-colorText, --rebilly-buttonBorderRadius

1. Add the library mounting points to your website

Add the mounting points to your website.

HTMLCSS
Copy
Copied
<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>
Copy
Copied
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
Copy
Copied
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

JavaScriptHTMLCSS
Copy
Copied
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
    },
  ]
});
Copy
Copied
<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>
Copy
Copied
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;
  }
}