Layout

This topic describes how to configure the Rebilly Instruments JS library to change the layout of elements.

Address

Use the paymentInstrument.address property, in the RebillyInstruments.mount() function, to configure your address forms. If this option is not passed, the default Rebilly layout will be used.

For a complete list of options, see Rebilly Instruments reference.

Copy
Copied
import RebillyInstruments from '@rebilly/instruments';

RebillyInstruments.mount({
  publishableKey: 'pk_sandbox_123',
  organizationId: 'org-123',
  websiteId: 'my-website-id',
  apiMode: 'sandbox',
  paymentInstruments: {
    address: {
      name: 'combined',
      region: 'split',
    }
  }
});
Name
default name's default layout
stacked name's stacked layout
combined name's combined layout
Region
default region's default layout
stacked region's stacked layout
split region's split layout

Coupons

To configure whether coupons are available, use the features.showCoupons property in the RebillyInstruments.mount() function. By default coupons are not available, and the default value is null.

To specify where coupons are displayed, provide an array with one or more of the following keys.

KeyDescription
summaryDisplays the coupons within the summary details.
confirmationDisplays coupons within the confirmation screen before the customer confirms their purchase details.
Copy
Copied
import RebillyInstruments from '@rebilly/instruments';

RebillyInstruments.mount({
  publishableKey: 'pk_sandbox_123',
  organizationId: 'org-123',
  websiteId: 'my-website-id',
  apiMode: 'sandbox',
  features: {
    showCoupons: ['summary', 'confirmation'],
  }
});