Last updated

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.

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
defaultname's default layout
stackedname's stacked layout
combinedname's combined layout
Region
defaultregion's default layout
stackedregion's stacked layout
splitregion'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.
import RebillyInstruments from '@rebilly/instruments';

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

Additional fields

Use the paymentInstrument.additionalFields property, in the RebillyInstruments.mount() function, to configure forms containing additional fields. If this option is not passed, the default Rebilly layout is used.

Only transactions of type purchase display additional fields.

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

import RebillyInstruments from '@rebilly/instruments';

RebillyInstruments.mount({
  publishableKey: 'pk_sandbox_123',
  organizationId: 'org-123',
  websiteId: 'my-website-id',
  apiMode: 'sandbox',
  paymentInstruments: {
    additionalFields: {
      show: ['poNumber'],
    }
  }
});