# 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](/docs/dev-docs/reference-rebilly-instruments).


```JavaScript
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](/assets/rebilly-instruments-layout-address-name-default.da7ee54689a6202261d8bad7c367976fb43266f5d123fe5f4651d49b1ab2b3ad.a8224ebd.png) |
| `stacked` | ![name's stacked layout](/assets/rebilly-instruments-layout-address-name-stacked.ebb6b201620bc42c5fec590982df4e3bdb0e647635e7db98a86e77306f1713aa.a8224ebd.png) |
| `combined` | ![name's combined layout](/assets/rebilly-instruments-layout-address-name-combined.926d05ed51460af3ad67af72982a1265db0e7731ec96b2f5a96c62eda8952204.a8224ebd.png) |


| Region |  |
|  --- | --- |
| `default` | ![region's default layout](/assets/rebilly-instruments-layout-address-region-default.936122c2611a23d69c69cfc1398cd212c0c60379ccdcc138e11b0a70ba3664f1.a8224ebd.png) |
| `stacked` | ![region's stacked layout](/assets/rebilly-instruments-layout-address-region-stacked.64566e777db52131b75d79d2cb5ccb192b7b98933f1bc55bc95b377fe638a697.a8224ebd.png) |
| `split` | ![region's split layout](/assets/rebilly-instruments-layout-address-region-split.8d5f6d4551990b04ca47f3ac2db177f08ea64efb4a79cbd63ca6459280d39789.a8224ebd.png) |


## Payment Card

To configure the payment card to be multiple inputs, use the `paymentInstrument.paymentCard.input` property, in the `RebillyInstruments.mount()` function.

To split the inputs provide the value `split`.


```JavaScript
import RebillyInstruments from '@rebilly/instruments';

RebillyInstruments.mount({
  publishableKey: 'pk_sandbox_123',
  organizationId: 'org-123',
  websiteId: 'my-website-id',
  apiMode: 'sandbox',
  paymentInstruments: {
    paymentCard: {
      input: 'split',
    }
  }
});
```

| Input |  |
|  --- | --- |
| `default` | ![payment card's default layout](/assets/rebilly-instruments-layout-payment-card-input-default.88b14766d45704ba275625701eb1f7d54ccb975eab9362a1eadf8ad487859c1f.a8224ebd.png) |
| `split` | ![payment card's split layout](/assets/rebilly-instruments-layout-payment-card-input-split.0cac7cc1a2c1e64bfff6e823034fb9b2898cf994a265ed12f9eb859df0bb9f18.a8224ebd.png) |


## 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.

| Key | Description |
|  --- | --- |
| `summary` | Displays the coupons within the summary details. |
| `confirmation` | Displays coupons within the confirmation screen before the customer confirms their purchase details. |



```JavaScript
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](/docs/dev-docs/reference-rebilly-instruments).


```JavaScript
import RebillyInstruments from '@rebilly/instruments';

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