# Reference



## RebillyInstruments.mount()

Use this method to mount the library UI components to the DOM of your website, and configure the experience for all your payment instrument methods.
This method returns a `Promise` and accepts a single `configuration` object.


```JavaScript
await RebillyInstruments.mount({ /* organizationId, publishableKey, websiteId, form, items */ });
```

### Parameters

This table lists all available configuration options for the `mount()` method.

#### Required configuration properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `organizationId` | string |  | This is a required field. | Your organization ID. To obtain your organization ID, see [Obtain your organization ID and website ID](/docs/settings/organizations-and-websites#obtain-your-organization-id-and-website-id). |
| `publishableKey` | string |  | This is a required field. | Your publishable API key. To obtain your publishable API key, see [Obtain a publishable API key](/docs/dev-docs/api-keys#obtain-a-publishable-api-key). |
| `websiteId` | string |  | This is a required field. | Your website ID. To obtain your website ID, see [Obtain your organization ID and website ID](/docs/settings/organizations-and-websites#obtain-your-organization-id-and-website-id). |


#### Add-ons configuration properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `addons` | array`<object>` |  | `items` and `addons`. | The list of add-ons items to be used for the transaction. |
| `addons[]` | object |  |  | Individual addon item configuration. 
Properties: `planId`, `quantity`, `thumbnail` |
| `addons[].planId` | string |  |  | Rebilly `planId` for the addon. |
| `addons[].quantity` | number |  |  | Number of this addon being purchased. |
| `addons[].thumbnail` | string |  |  | Image source for the addon. Recommend ~100px by 100px. |


#### API configuration properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `apiMode` | string | sandbox |  | Rebilly environment. 
Allowed values: `sandbox`, `live` |


#### Bump offer configuration properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `bumpOffer` | array `<object>` |  | `items` and `bumpOffer`. | List of bump offer items to be used for the transaction instead of items. |
| `bumpOffer[]` | object |  |  | Individual bump offer item configuration. 
Properties: `planId`, `quantity`, `thumbnail` |
| `bumpOffer[].planId` | string |  |  | Rebilly `planId` for the bump offer. |
| `bumpOffer[].quantity` | number |  |  | Number of this bump offer being purchased. |
| `bumpOffer[].thumbnail` | string |  |  | Image source for the bump offer. Recommend ~100px by 100px. |


#### Country configuration properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `countryCode` | string | US |  | Country code for the transaction. |
| `locale` | string | auto |  | Locale of the forms to be posted, uses browser locale by default. 
Allowed values: `en`, `es` |


#### CSS configuration properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `css` | string | null |  | A stringified CSS that overrides default styling. |


#### Deposit configuration properties 

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `deposit` | object |  | `jwt`, and `depositRequestId` or `currency`. | Deposit configurations. For an example, see [Request deposits](/docs/dev-docs/integrate-a-deposit-form/). |
| `deposit.depositRequestId` | string |  |  | ID of the deposit request. |
| `deposit.currency` | string |  |  | Three character [ISO 4217 currency code](https://www.iso.org/iso-4217-currency-codes.html). |
| `deposit.amount` | number |  |  | Default deposit amount. For example, `9.99` or `5`. |
| `deposit.buttons` | array `<number>` | null |  | Displays buttons for the quick selection of deposit amounts. |
| `deposit.editable` | boolean | `true` |  | Specifies whether the customer can enter a deposit amount into a text input field. If this value is `false`, the customer may still change the deposit amount if `deposit.buttons` are provided. |
| `deposit.customAmount` | object |  |  | Validation of allowed deposit amount values. |
| `deposit.customAmount.minimum` | number | 1 |  | Minimum allowed deposit amount. |
| `deposit.customAmount.maximum` | number | 1000000000000 |  | Maximum allowed deposit amount. |


#### Features configuration properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `features` | object |  |  | Controls features related to the UI flow. 
Properties: `hideConfirmation`, `hideResult`, `showCoupons`, `enableTelemetry` |
| `features.hideConfirmation` | boolean | `false` |  | Displays the confirmation screen. Enable this to build your own confirmation screen. |
| `features.hideResult` | boolean | `false` |  | Displays the result screen. Enable this to build your own result screen. |
| `features.hideContinue` | boolean | `false` |  | Displays a continue button. Enable this option to stop customers from proceeding through the payment flow. |
| `features.showCoupons` | array `<string>` | null |  | Enable and display coupons within summary details. Use array values to set coupon display locations. |
| `features.enableTelemetry` | boolean | `true` |  | Enable this option to allow Rebilly to access data on Rebilly Instruments library usage. Disable this option to not provide any data on Rebilly Instruments library usage. |
| `features.hideZeroAmountSummaryItems` | boolean | `false` |  | Enable this option to hide any invoice items with a price of `0`. |
| `features.enableLeadSourceTracking` | boolean | `true` |  | Set this option to `false` to not track the lead source of the customer. When set to `false`, existing customer lead source information is not updated. For more information, see [Lead source attribution](/docs/dev-docs/lead-source-attribution). |


#### Form configuration properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `form` | string|HTMLElement | `.rebilly-instruments` | This is a required field. | CSS class or HTML element where the form mounts. |
| `summary` | string|HTMLElement | `.rebilly-instruments-summary` |  | CSS class or HTML element where the summary mounts. |


#### i18n/Localization configuration properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `i18n` | object | null |  | Configurable object to override translations and texts. 
Properties: `en (or any country ISO code like "en-CA")` |
| `i18n[countryISOCode]` | object | null |  | Language specific translations. 
Properties: `summary`, `form`, `confirmation`, `result`, `validations`, `paymentMethods` |
| `i18n[countryISOCode].summary` | object | null |  | Summary related fields. 
Properties: `subTotal`, `discounts`, `taxes`, `shipping`, `total` |
| `i18n[countryISOCode].form` | object | null |  | Form related fields. 
Properties: `expressCheckout`, `or`, `continue`, `bumpOffer`, `billingAddressTitle`, `address`, `useSameAsBillingAddress`, `shippingAddressTitle`, `paymentCard`, `ach` |
| `i18n[countryISOCode].form.ach` | object | null |  | Payment card form related fields. 
Properties: `addNew`, `useExisting`, `accountingNumber`, `routingNumber`, `iban` |
| `i18n[countryISOCode].form.paymentCard` | object | null |  | Payment card form related fields. 
Properties: `addNew`, `useExisting` |
| `i18n[countryISOCode].form.bumpOffer` | object | null |  | Bump offer related fields. 
Properties: `title`, `startingAt` |
| `i18n[countryISOCode].confirmation` | object | null |  | Confirmation related fields. 
Properties: `billingAddressTitle`, `shippingAddressTitle`, `paymentMethodTitle`, `addons`, `edit`, `confirm`, `goBack`, `sameAsBillingAddress`, `addressFromPayPal`, `paymentMethodTitle`, `save`, `cancel` |
| `i18n[countryISOCode].confirmation.addons` | object | null |  | Add-ons related fields. 
Properties: `title`, `startingAt` |
| `i18n[countryISOCode].result` | object | null |  | Result related fields. 
Properties: `success`, `failure`, `wrong` |
| `i18n[countryISOCode].validations` | object | null |  | Validation related fields. 
Properties: `form` |
| `i18n[countryISOCode].validations.address` | object | null |  | Form validation related fields. 
Properties: `firstName`, `lastName`, `fullName`, `email`, `address`, `address`, `city`, `country`, `region`, `state`, `province`, `postalCode`, `zipCode` |
| `i18n[countryISOCode].validations.confirmation` | object | null |  | Confirmation validation related fields. 
Properties: `deliveryAddress` |
| `i18n[countryISOCode].paymentMethods` | object | null |  | Change the display name of different payment methods. 
Properties: `payment-card`, `ach` |


#### Items configuration properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `items` | array `<object>` |  | One of the following: `items`, `money`, `invoiceId`, or `transactionId`. | The list of plan items to be used for the transaction. |
| `items[]` | object |  |  | Properties: `planId`, `quantity`, `thumbnail` |
| `items[].planId` | string |  |  | Rebilly `planId` for the item. |
| `items[].quantity` | number|object |  |  | Number of this item being purchased. |
| `items[].quantity.default` | number |  |  | Number of this item being purchased. If `minimum`, `maximum` or `multipleOf` values are specified, the quantity field becomes editable. |
| `items[].quantity.minimum` | number | 1 |  | Specifies the minimum number of this item that can be purchased. |
| `items[].quantity.maximum` | number | `Number.MAX_SAFE_INTEGER` |  | Specifies the maximum number of this item that can be purchased. |
| `items[].quantity.multipleOf` | number | 1 |  | The number by which the quantity of this item can be changed. |
| `items[].thumbnail` | string |  |  | Image source for the item. Recommend ~100px by 100px. |


#### JWT configuration properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `jwt` | string |  | Required with: `invoiceId`, `transactionId` | An exchanged token for customer authorization to the invoice or transaction resource. |


#### Money configuration properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `money` | object |  | One of the following: `items`, `money`, `invoiceId`, or `transactionId`. | Properties: `amount`, `currency` |
| `money.amount` | number |  | Required with: `money`. | The transaction amount. For example, "9.99" or 5. |
| `money.currency` | string |  | Required with: `money`. | A three character [ISO 4217 currency code](https://www.iso.org/iso-4217-currency-codes.html). |


#### Payout configuration properties 

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `payout` | object |  | `jwt` and `payoutRequestId`. | Payout configurations. |
| `payout.payoutRequestId` | string |  |  | ID of the payout request. |


#### Payment instruments additional fields configuration

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `paymentInstruments.additionalFields` | object |  |  | Display options for additional fields. 
Properties: `show`, `require` |
| `paymentInstruments.additionalFields.show` | array `<string>` |  |  | Controls whether any of the listed inputs are displayed. 
Properties: `poNumber` |
| `paymentInstruments.additionalFields.require` | array `<string>` |  |  | Controls whether any of the listed inputs are required to be filled. 
Properties: `poNumber` |


#### Payment instruments address configuration

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `paymentInstruments.address` | object |  |  | Configure how address forms look and behave across the library |
| `paymentInstruments.address.name` | string | default |  | Controls how the first name and last name inputs are displayed. 
Properties: `default`, `combined`, `stacked` |
| `paymentInstruments.address.region` | string | default |  | Controls how the `country`, `region`, and `postalCode` inputs are displayed. 
Properties: `default`, `split`, `stacked` |
| `paymentInstruments.address.show` | array `<string>` |  |  | Controls if of the listed inputs are displayed. 
Properties: `all`, `email`, `organization`, `phoneNumber`, `city`, `country`, `region`, `postalCode` |
| `paymentInstruments.address.hide` | array `<string>` |  |  | Controls if any of the listed inputs are not displayed. 
Properties: `all`, `address`, `address2` |
| `paymentInstruments.address.require` | array `<string>` |  | `firstName` and `lastName`. 
If there are shippable plans in the items, `country` is also required. | Controls if any of the listed inputs are required to be filled. Note: 
Properties: `organization`, `email`, `phoneNumber`, `address`, `address2`, `city`, `country`, `region`, `postalCode` |


#### Payment instruments base configuration

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `paymentInstruments` | object |  |  | Payment instruments configuration options. 
Properties: `compactExpressInstruments`, `allowDeactivate`, `allowUpdate`, `allowMakeDefault`, `allowCreate`, `enableTelemetry` |
| `paymentInstruments.compactExpressInstruments` | boolean | `true` |  | Controls if express payment methods are displayed in a compact view. |


#### Payment instruments Google Pay configuration

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `paymentInstruments.googlePay` | object |  |  | Google Pay configuration options. 
Properties: `displayOptions` |
| `paymentInstruments.googlePay.displayOptions` | object |  |  | Google Pay display options. 
Properties: `buttonColor`, `buttonHeight`, `buttonType` |


#### Payment instruments payment card configuration

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `paymentInstruments.paymentCard` | object |  |  | Payment card configuration options. 
Properties: `input` |
| `paymentInstruments.paymentCard.input` | string | default |  | Controls if payment card inputs are split apart. Default is to combine the inputs. 
Properties: `default`, `split` |


#### Payment instruments permission properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `paymentInstruments.allowCreate` | boolean | `true` |  | Display button to allow the creation of a new payment instrument. |
| `paymentInstruments.allowDeactivate` | boolean | `false` |  | Display option on selected payment instruments to deactivate the payment instrument. |
| `paymentInstruments.allowMakeDefault` | boolean | `false` |  | Display option on a selected payment instrument to mark it as the customer's default payment instrument. |
| `paymentInstruments.allowUpdate` | boolean | `false` |  | Display options on a selected payment instrument to update the details of the payment instrument. |


#### Theme button properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.buttonColorBackground` | string |  |  | Main button background color (CSS value). |
| `theme.buttonColorText` | string | `#FFFFFF` |  | Main button text color (CSS value). |
| `theme.buttonFontFamily` | string |  |  | Button text font family. |
| `theme.buttonFontSize` | string |  |  | Button font size (in px). |
| `theme.buttonFontLineHeight` | string |  |  | Button line-height (in px). |
| `theme.buttonFontWeight` | string |  |  | Button font weight. |
| `theme.buttonBorder` | string | 1px solid transparent |  | Main button border (CSS border shorthand). |
| `theme.buttonBorderRadius` | string |  |  | Button border radius (in px). |
| `theme.buttonBoxShadow` | string | none |  | Button box shadow (CSS box-shadow value). |
| `theme.buttonSecondaryColorText` | string | `#0044D4` |  | Secondary button text color (CSS value). |
| `theme.buttonSecondaryFontFamily` | string |  |  | Secondary button text font family. |
| `theme.buttonSecondaryFontSize` | string |  |  | Secondary button font size (in px). |
| `theme.buttonSecondaryFontLineHeight` | string |  |  | Secondary button line-height (in px). |
| `theme.buttonSecondaryFontWeight` | string |  |  | Secondary button font weight. |
| `theme.buttonSecondaryBorder` | string | 1px solid `#0044D4` |  | Secondary button border (CSS border shorthand). |
| `theme.buttonSecondaryBorderRadius` | string |  |  | Secondary button border radius (in px). |
| `theme.buttonSecondaryBoxShadow` | string | none |  | Secondary button box shadow (CSS box-shadow value). |


#### Theme button active properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.buttonActiveColorBackground` | string |  |  | Main button background color on active state (CSS value). |
| `theme.buttonActiveColorText` | string |  |  | Main button text color on active state (CSS value). |
| `theme.buttonActiveFontFamily` | string |  |  | Button text font family on active state. |
| `theme.buttonActiveFontSize` | string |  |  | Button font size on active state (in px). |
| `theme.buttonActiveFontLineHeight` | string |  |  | Button line-height on active state (in px). |
| `theme.buttonActiveFontWeight` | string |  |  | Button font weight on active state. |
| `theme.buttonActiveBorder` | string |  |  | Main button border on active state (CSS border shorthand). |
| `theme.buttonActiveBorderRadius` | string |  |  | Button border radius on active state (in px). |
| `theme.buttonActiveBoxShadow` | string | none |  | Button box shadow on active state (CSS box-shadow value). |
| `theme.buttonSecondaryActiveColorBackground` | string |  |  | Secondary button background color on active state (CSS value). |
| `theme.buttonSecondaryActiveColorText` | string |  |  | Secondary button text color on active state (CSS value). |
| `theme.buttonSecondaryActiveFontFamily` | string |  |  | Secondary button text font family on active state. |
| `theme.buttonSecondaryActiveFontSize` | string |  |  | Secondary button font size on active state (in px). |
| `theme.buttonSecondaryActiveFontLineHeight` | string |  |  | Secondary button line-height on active state (in px). |
| `theme.buttonSecondaryActiveFontWeight` | string |  |  | Secondary button font weight on active state. |
| `theme.buttonSecondaryActiveBorder` | string |  |  | Secondary button border on active state (CSS border shorthand). |
| `theme.buttonSecondaryActiveBorderRadius` | string |  |  | Secondary button border radius on active state (in px). |
| `theme.buttonSecondaryActiveBoxShadow` | string | none |  | Secondary button box shadow on active state (CSS box-shadow value). |


#### Theme button hover properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.buttonHoverColorBackground` | string |  |  | Main button background color on hover state (CSS value). |
| `theme.buttonHoverColorText` | string |  |  | Main button text color on hover state (CSS value). |
| `theme.buttonHoverFontFamily` | string |  |  | Button text font family on hover state. |
| `theme.buttonHoverFontSize` | string |  |  | Button font size on hover state (in px). |
| `theme.buttonHoverFontLineHeight` | string |  |  | Button line-height on hover state (in px). |
| `theme.buttonHoverFontWeight` | string |  |  | Button font weight on hover state. |
| `theme.buttonHoverBorder` | string |  |  | Main button border on hover state (CSS border shorthand). |
| `theme.buttonHoverBorderRadius` | string |  |  | Button border radius on hover state (in px). |
| `theme.buttonHoverBoxShadow` | string | none |  | Button box shadow on hover state (CSS box-shadow value). |
| `theme.buttonSecondaryHoverColorBackground` | string |  |  | Secondary button background color on hover state (CSS value). |
| `theme.buttonSecondaryHoverColorText` | string |  |  | Secondary button text color on hover state (CSS value). |
| `theme.buttonSecondaryHoverFontFamily` | string |  |  | Secondary button text font family on hover state. |
| `theme.buttonSecondaryHoverFontSize` | string |  |  | Secondary button font size on hover state (in px). |
| `theme.buttonSecondaryHoverFontLineHeight` | string |  |  | Secondary button line-height on hover state (in px). |
| `theme.buttonSecondaryHoverFontWeight` | string |  |  | Secondary button font weight on hover state. |
| `theme.buttonSecondaryHoverBorder` | string |  |  | Secondary button border on hover state (CSS border shorthand). |
| `theme.buttonSecondaryHoverBorderRadius` | string |  |  | Secondary button border radius on hover state (in px). |
| `theme.buttonSecondaryHoverBoxShadow` | string | none |  | Secondary button box shadow on hover state (CSS box-shadow value). |


#### Theme configuration properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme` | object |  |  | Theme configuration options. 
Properties: `labels` |
| `theme.labels` | string | stacked |  | Changes the layout and behavior of the label inputs. 
Allowed values: `floating`, `stacked` |


#### Theme color properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.colorPrimary` | string | `#0044D4` |  | Primary theme color (CSS value). |
| `theme.colorBackground` | string | `#FFFFFF` |  | Background color (CSS value). |
| `theme.colorText` | string | `#0D2B3E` |  | Main font color (CSS value). |
| `theme.colorDanger` | string | `#CD5C5C` |  | Error message text color (CSS value). |
| `theme.borderRadius` | string | 4px |  | General border radius (in px). |


#### Theme font properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.fontFamily` | string | `-apple-system`, `system-ui`, `BlinkMacSystemFont`, `'Segoe UI'`, `Roboto`, `'Helvetica Neue'`, `Arial`, `sans-serif` |  | Main font family. |
| `theme.fontSizeBase` | string | 16px |  | Main font size (in px). |
| `theme.fontWeightBase` | string | 400 |  | Main font weight. |
| `theme.fontLineHeightBase` | string | 24px |  | Line height (in px), used as the main line-height. |
| `theme.fontSmooth` | string | auto |  | General text anti-aliasing setting. 
Allowed values: `auto`, `never`, `always` |


#### Theme heading properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.headingFontFamily` | string |  |  | Heading font family. |
| `theme.headingFontWeight` | string | `500` |  | Heading font weight. |
| `theme.headingColorText` | string |  |  | Heading text color (CSS value). |


#### Theme input properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.inputColorBackground` | string |  |  | Input element background color (CSS value). |
| `theme.inputColorText` | string |  |  | Input element text color (CSS value). |
| `theme.inputFontFamily` | string |  |  | Input element font family. |
| `theme.inputFontSize` | string |  |  | Input element font size (in px). |
| `theme.inputFontLineHeight` | string |  |  | Input element line-height (in px). |
| `theme.inputFontWeight` | string |  |  | Input element font weight. |
| `theme.inputBorder` | string |  |  | Input element border (CSS border shorthand). |
| `theme.inputBorderRadius` | string |  |  | Input element border radius (in px). |
| `theme.inputBoxShadow` | string |  |  | Input element box shadow (CSS box-shadow value). |


#### Theme input focus state properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.inputFocusColorBackground` | string |  |  | Input element background color on focus state (CSS value). |
| `theme.inputFocusColorText` | string |  |  | Input element text color on focus state (CSS value). |
| `theme.inputFocusFontFamily` | string |  |  | Input element font family on focus state. |
| `theme.inputFocusFontSize` | string |  |  | Input element font size on focus state (in px). |
| `theme.inputFocusFontLineHeight` | string |  |  | Input element line-height on focus state (in px). |
| `theme.inputFocusFontWeight` | string |  |  | Input element font weight on focus state. |
| `theme.inputFocusBorder` | string |  |  | Input element border on focus state (CSS border shorthand). |
| `theme.inputFocusBorderRadius` | string |  |  | Input element border radius on focus state (in px). |
| `theme.inputFocusBoxShadow` | string |  |  | Input element box shadow on focus state (CSS box-shadow value). |


#### Theme input hover state properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.inputHoverColorBackground` | string |  |  | Input element background color on hover state (CSS value). |
| `theme.inputHoverColorText` | string |  |  | Input element text color on hover state (CSS value). |
| `theme.inputHoverFontFamily` | string |  |  | Input element font family on hover state. |
| `theme.inputHoverFontSize` | string |  |  | Input element font size on hover state (in px). |
| `theme.inputHoverFontLineHeight` | string |  |  | Input element line-height on hover state (in px). |
| `theme.inputHoverFontWeight` | string |  |  | Input element font weight on hover state. |
| `theme.inputHoverBorder` | string |  |  | Input element border on hover state (CSS border shorthand). |
| `theme.inputHoverBorderRadius` | string |  |  | Input element border radius on hover state (in px). |
| `theme.inputHoverBoxShadow` | string |  |  | Input element box shadow on hover state (CSS box-shadow value). |


#### Theme input placeholder properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.inputPlaceholderColorText` | string |  |  | Input placeholder text color (CSS value). |
| `theme.inputPlaceholderFontFamily` | string |  |  | Input placeholder font family. |
| `theme.inputPlaceholderFontSize` | string |  |  | Input placeholder font size (in px). |
| `theme.inputPlaceholderFontLineHeight` | string |  |  | Input placeholder line-height (in px). |
| `theme.inputPlaceholderFontWeight` | string |  |  | Input placeholder font weight. |


#### Theme input selected text properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.inputSelectionColorText` | string |  |  | Input selected text color (CSS value). |
| `theme.inputSelectionColorBackground` | string |  |  | Input selected background color (CSS value). |


#### Theme invalid input properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.inputErrorColorBackground` | string |  |  | Invalid input element background color (CSS value). |
| `theme.inputErrorColorText` | string |  |  | Invalid input element text color (CSS value). |
| `theme.inputErrorFontFamily` | string |  |  | Invalid input element font family. |
| `theme.inputErrorFontSize` | string |  |  | Invalid input element font size (in px). |
| `theme.inputErrorFontLineHeight` | string |  |  | Invalid input element line-height (in px). |
| `theme.inputErrorFontWeight` | string |  |  | Invalid input element font weight. |
| `theme.inputErrorBorder` | string |  |  | Invalid input element border (CSS border shorthand). |
| `theme.inputErrorBorderRadius` | string |  |  | Invalid input element border radius (in px). |
| `theme.inputErrorBoxShadow` | string |  |  | Invalid input element box shadow (CSS box-shadow value). |


#### Theme invalid input hover state properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.inputErrorHoverColorBackground` | string |  |  | Invalid input element background color on hover (CSS value). |
| `theme.inputErrorHoverColorText` | string |  |  | Invalid input element text color on hover (CSS value). |
| `theme.inputErrorHoverFontFamily` | string |  |  | Invalid input element font family on hover. |
| `theme.inputErrorHoverFontSize` | string |  |  | Invalid input element font size on hover (in px). |
| `theme.inputErrorHoverFontLineHeight` | string |  |  | Invalid input element line-height on hover (in px). |
| `theme.inputErrorHoverFontWeight` | string |  |  | Invalid input element font weight on hover. |
| `theme.inputErrorHoverBorder` | string |  |  | Invalid input element border on hover (CSS border shorthand). |
| `theme.inputErrorHoverBorderRadius` | string |  |  | Invalid input element border radius on hover (in px). |
| `theme.inputErrorHoverBoxShadow` | string |  |  | Invalid input element box shadow on hover (CSS box-shadow value). |


#### Theme invalid input focus state properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.inputErrorFocusColorBackground` | string |  |  | Invalid input element background color on focus (CSS value). |
| `theme.inputErrorFocusColorText` | string |  |  | Invalid input element text color on focus (CSS value). |
| `theme.inputErrorFocusFontFamily` | string |  |  | Invalid input element font family on focus. |
| `theme.inputErrorFocusFontSize` | string |  |  | Invalid input element font size on focus (in px). |
| `theme.inputErrorFocusFontLineHeight` | string |  |  | Invalid input element line-height on focus (in px). |
| `theme.inputErrorFocusFontWeight` | string |  |  | Invalid input element font weight on focus. |
| `theme.inputErrorFocusBorder` | string |  |  | Invalid input element border on focus (CSS border shorthand). |
| `theme.inputErrorFocusBorderRadius` | string |  |  | Invalid input element border radius on focus (in px). |
| `theme.inputErrorFocusBoxShadow` | string |  |  | Invalid input element box shadow on focus (CSS box-shadow value). |


#### Theme invalid input placeholder properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.inputErrorPlaceholderColorText` | string |  |  | Invalid input placeholder text color (CSS value). |
| `theme.inputErrorPlaceholderFontFamily` | string |  |  | Invalid input placeholder font family. |
| `theme.inputErrorPlaceholderFontSize` | string |  |  | Invalid input placeholder font size (in px). |
| `theme.inputErrorPlaceholderFontLineHeight` | string |  |  | Invalid input placeholder line-height (in px). |
| `theme.inputErrorPlaceholderFontWeight` | string |  |  | Invalid input placeholder font weight. |


#### Theme invalid input selected text properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `theme.inputErrorSelectionColorText` | string |  |  | Invalid input selected text color (CSS value). |
| `theme.inputErrorSelectionColorBackground` | string |  |  | Invalid input selected background color (CSS value). |


#### Transaction configuration properties

| Option  | Type  | Default  | Requires  | Description |
|  --- | --- | --- | --- | --- |
| `transactionId` | string |  | `jwt` and one of the following: `items`, `money`, `invoiceId`, or `transactionId`. | ID of a Rebilly transaction. |
| `transactionType` | string | purchase |  | When set to `setup`, the payment instrument will be available for future transactions. 
Allowed values: `purchase`, `setup` |
| `invoiceId` | string |  | `jwt` and one of the following: `items`, `money`, `invoiceId`, or `transactionId`. | ID of a Rebilly invoice. |


### Example

This example describes the configuration of mount parameters for the Rebilly Instruments JavaScript library.

Payment methods that are displayed in payment forms are based on the gateway configuration. For more information, see [Set up a payment gateway](/docs/settings/set-up-a-gateway).


```JavaScript
RebillyInstruments.mount({
  organizationId: "abc-123-xyz",
  publishableKey: "pk_sandbox_1234567890",
  websiteId: "ghi-789-qst",
  form: ".rebilly-instruments",
  summary: ".rebilly-instruments-summary",
  items: [
    {
      planId: "abc-123-def",
      quantity: 1,
      thumbnail: "https://www.example.com/picture-1.png"
    }, {
      planId: "xyz-987-uvw",
      quantity: 2,
      thumbnail: "https://www.example.com/picture-2.png"
    }, {
        planId: "abc-567-xyz",
        quantity: {
            default: 1,
            multipleOf: 1,
            minimum: 1,
            maximum: 20
        }
    }
  ],
  addons: [
    {
      planId: "fgh-123-uio",
      quantity: 1,
      thumbnail: "https://www.example.com/picture-3.png"
    }, {
      planId: "vbn-987-jkl",
      quantity: 2,
      thumbnail: "https://www.example.com/picture-4.png"
    }
  ],
  bumpOffer: [
    {
      planId: "kjh-123-edw",
      quantity: 1,
      thumbnail: "https://www.example.com/picture-5.png"
    }, {
      planId: "hyu-543-klo",
      quantity: 1,
      thumbnail: "https://www.example.com/picture-6.png"
    }
  ],
  apiMode: "sandbox",
  css: `
    .rebilly-instruments-summary-line-item-figure {
      border: 2px solid #0044d4;
    }
  `,
  theme: {
    colorPrimary: "#0044d4",
    colorDanger: "#cd5c5c",
    colorText: "#0d2b3e",
    colorBackground: "#ffffff",
    buttonColorText: "#ffffff",
    fontFamily: "Comic Sans MS",
    labels: "floating"
  },
  i18n: {
    en: {
      summary: {
        subTotal: "Sub Total",
        discounts: "Discounts",
        taxes: "Taxes",
        shipping: "Shipping",
        total: "Total"
      },
      form: {
        expressCheckout: "Express checkout",
        or: "Or",
        popupOverlayText: "Press here to show popup window",
        "continue": "Continue",
        bumpOffer: {
          title: "Yes, I want to upgrade!",
          startingAt: "Starting at {basePrice}"
        },
        billingAddressTitle: "Billing address",
        useSameAsBillingAddress: "Use same billing address for shipping",
        shippingAddressTitle: "Shipping address",
        address: {
          organizationLabel: "Organization",
          organizationPlaceholder: "My Organization Name",
          firstNameLabel: "First Name",
          firstNamePlaceholder: "John",
          lastNameLabel: "Last Name",
          lastNamePlaceholder: "Doe",
          fullNameLabel: "Full Name",
          fullNamePlaceholder: "John Doe",
          emailLabel: "Email",
          emailPlaceholder: "person@example.com",
          phoneNumberLabel: "Phone number",
          phoneNumberPlaceholder: "",
          addressLabel: "Address",
          addressPlaceholder: "",
          address2Label: "Address 2",
          address2Placeholder: "",
          cityLabel: "City",
          cityPlaceholder: "",
          countryLabel: "Country",
          countryPlaceholder: "",
          regionLabel: "Region",
          regionPlaceholder: "",
          stateLabel: "State",
          statePlaceholder: "",
          provinceLabel: "Province",
          provincePlaceholder: "",
          postalCodeLabel: "Postal code",
          postalCodePlaceholder: "",
          zipCodeLabel: "Zip code",
          zipCodePlaceholder: ""
        }
      },
      confirmation: {
        billingAddressTitle: "Billing address",
        shippingAddressTitle: "Shipping address",
        paymentMethodTitle: "Payment method",
        edit: "Edit",
        confirm: "Confirm",
        goBack: "Choose another payment method",
        addons: {
          title: "Other customers also selected",
          startingAt: "Starting at {basePrice}"
        }
      },
      result: {
        success: "Thank you for your purchase!",
        failure: "Transaction {result}",
        wrong: "Something went wrong"
      },
      validations: {
        address: {
          firstName: {
            required: "First name is required."
          },
          lastName: {
            required: "Last name is required."
          },
          fullName: {
            required: "Full name is required.",
            lastNameMissing: "Must include first name and last name."
          },
          email: {
            required: "Email is required.",
            validEmail: "Email must be a valid email address."
          },
          address: {
            required: "Address is required."
          },
          address2: {
            required: "Address 2 is required."
          },
          city: {
            required: "City is required.",
            noSpecialCharacters: "City cannot have any special characters."
          },
          country: {
            required: "Country is required."
          },
          region: {
            required: "Region is required."
          },
          state: {
            required: "State is required."
          },
          province: {
            required: "Province is required."
          },
          postalCode: {
            required: "Postal code is required.",
            maxLength: "Postal code cannot have more than 10 characters."
          },
          zipCode: {
            required: "Zip code is required.",
            maxLength: "Zip code cannot have more than 10 characters."
          }
        }
      }
    }
  },
  countryCode: "US",
  locale: "auto",
  paymentInstruments: {
    compactExpressInstruments: true,
    allowDeactivate: false,
    allowUpdate: false,
    allowMakeDefault: false,
    allowCreate: true,
    enableTelemetry: true,
    address: {
      name: "default",
      region: "default",
      show: ["organization", "phoneNumber"],
      hide: [],
      require: ["address"]
    },
    googlePay: {
      displayOptions: {
        buttonColor: "black",
        buttonHeight: "48px",
        buttonType: "plain"
      }
    }
  },
  features: {
    hideConfirmation: false,
    hideResult: false,
    hideContinue: false,
    showCoupons: ["summary", "confirmation"],
    hideZeroAmountSummaryItems: false
  }
});
```

## RebillyInstruments.on()

Rebilly Instruments supports 3 events:

- `instrument-ready`
- `purchase-completed`
- `setup-completed`


### RebillyInstruments.on("instrument-ready")

The `instrument-ready` event will be called once the payment instrument token is generated.


```JavaScript
RebillyInstruments.on("instrument-ready", (instrument) => {
  console.info("instrument-ready", instrument);
});
```

### RebillyInstruments.on("purchase-completed")

The `purchase-completed` event will be called once the transaction is processed.


```JavaScript
RebillyInstruments.on("purchase-completed", (transaction) => {
  console.info("purchase-completed", transaction);
});
```

### RebillyInstruments.on("setup-completed")

The `setup-completed` event is called once the payment instrument is processed.


```JavaScript
RebillyInstruments.on("setup-completed", (setup) => {
  console.info("setup-completed", setup);
});
```

## RebillyInstruments.show()

This method will display the following UI elements:

- Confirmation
- Result


By default, the library will display these screens, use the `options.features.hideConfirmation` and `options.features.hideResult` parameters to disable them.
Use this function in conjunction with `RebillyInstruments.on` to display screens that provide the right argument.

### RebillyInstruments.show("confirmation")

Displays the confirmation screen after the `instrument-ready` event is triggered. If this value is set to `false`, you must trigger the purchase manually .


```JavaScript
RebillyInstruments.show("confirmation", instrument);
```

### RebillyInstruments.show("result")

Displays the result of a transaction after the `purchase-completed` event is triggered. If this value is set to `false`, you must trigger purchase the manually.


```JavaScript
RebillyInstruments.show("result", transaction);
```

## RebillyInstruments.purchase()

Initializes the purchase by passing the instrument data from the `instrument-ready` event. If the mount `options.features.hideConfirmation` option is set to `true`, this method must be triggered by a user click event in the browser.


```JavaScript
RebillyInstruments.purchase(instrument);
```

## RebillyInstruments.setup()

Initializes the process to make a payment instrument available for future use. Requires that instrument data is passed from the `instrument-ready` event. If mount the `options.features.hideConfirmation` option is set to `true`, this instrument must be triggered by a user click event in the browser.


```JavaScript
RebillyInstruments.setup(instrument);
```

## RebillyInstruments.update()

Updates the library information or styles. All [`mount` options](#rebillyinstrumentsmount) are updatable.


```JavaScript
RebillyInstruments.update(options);
```

## RebillyInstruments.destroy()

Destroys the library instance.


```JavaScript
RebillyInstruments.destroy();
```

## RebillyInstruments.version

Returns the version of the library.


```JavaScript
console.log(RebillyInstruments.version); // RebillyInstruments Ver.X
```