# Rendering a checkout button

The [`DigitalRiverCheckout` object](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object) exposes `renderButton()`, which allows you to define a checkout button's location, style, and text. It can also hide existing buttons and initiate the creation of a [Prebuilt Checkout window](https://docs.digitalriver.com/digital-river-api/integration-options/low-code-checkouts/drop-in-checkout#drop-in-checkout-modal-window).

The function accepts two parameters, a [button container](#button-container) and [button options](#button-options).

```javascript
digitalRiverCheckout.renderButton(buttonContainer, buttonOptions);
```

## Button container

The required button container represents the `id` for the [HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) in which you want [DigitalRiverCheckout.js](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference) to render your checkout button.

```javascript
<div id="button-container"></div>
...
const buttonContainer = '#button-container';
```

## Button options

In button options, you can:

* [Style the button](#style-the-button)
* [Customize the button's text](#customize-the-buttons-text)
* [Hide elements](#hide-elements)
* [Add the button to the DOM](#after-button-render-actions)
* Define how you'd like to handle:
  * [Button initialization events](#button-initialization-event)
  * [Button click events](#button-click-event)
  * [Checkout cancel events](#checkout-cancel-event)

```javascript
const buttonOptions = {
  style: {
    backgroundColor: '#B52',
    borderRadius: '4px',
    color: '#fff',
    fontSize: '1rem',
    fontWeight: '400',
    fontFamily: 'Montserrat,Arial,Helvetica,sans-serif',
    ':hover': {
      color: 'rgb(0, 167, 225)'
    }
  },
  buttonText: 'Proceed to checkout',
  hiddenElement: ['.cart-actions > a.button', '.previewCartAction-checkout > a.button'],
  afterRender: false,
  onInit: (actions) => {},
  onClick: async (actions) => {
    try {
      actions.loading.start();
      const checkoutSessionId = await createCheckoutSession();
      actions.loading.stop();
      if (!checkoutSessionId) {
        return;
      }
      const modalConfig = getConfigObj();
      actions.checkout.modal.open(checkoutSessionId, modalConfig);
    } catch (error) {
      actions.loading.stop();
    }
  },
  onCancel: () => {}
};
```

### Style the button

The `style` object can be used to define the visual appearance of a checkout button:

* `backgroundColor`: Sets the background color
* `borderRadius`: Determines the roundness of the button's corners
* `color`: Sets the color of the text
* `fontSize`: Sets the font size of the text
* `fontWeight`: Sets the font weight of the text
* `fontFamily`: Specifies the button's font family. If the browser doesn't support the first font, it moves through the list, from left to right, looking for one it does.
* `':hover'`: This object contains a nested `color` property which determines the color of the button when it's hovered over.

```javascript
const buttonOptions = {
  style: {
    backgroundColor: '#B52',
    borderRadius: '4px',
    color: '#fff',
    fontSize: '1rem',
    fontWeight: '400',
    fontFamily: 'Montserrat,Arial,Helvetica,sans-serif',
    ':hover': {
      color: 'rgb(0, 167, 225)'
    }
  },
  ...
};
```

### Customize the button's text

The `buttonText` allows you to customize the characters displayed on the button. The default value is `Check out`.

```javascript
const buttonOptions = {
  ...
  buttonText: 'Proceed to checkout',
  ...
};
```

### Hide elements

The `hiddenElement` array represents one or more [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) strings that you want [DigitalRiverCheckout.js](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference) to locate and then hide before rendering the checkout button. This allows you to conceal add to cart, cart preview, and similar buttons that might exist on the page.

```javascript
const buttonOptions = {
  ...
  hiddenElement: ['.cart-actions > a.button', '.previewCartAction-checkout > a.button'],
  ...
};
```

In the example, `'.cart-actions > a.button'` and `'.previewCartAction-checkout > a.button'` target elements that have a `class` value of `"button"` and are descendants of elements with classes of `"cart-actions"` and `"previewCartAction-checkout"`, respectively.

### After button render actions

The `afterRender` boolean determines whether or not the [button container](#button-container) gets dynamically added to the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction).

```javascript
const buttonOptions = {
  ...
  afterRender: false,
  ...
};
```

### Button initialization event

The `onInit` property can be assigned a callback method, which accepts [`actions`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/rendering-a-checkout-button/performing-actions-on-the-checkout-button), that executes when the checkout button first renders.

```javascript
const buttonOptions = {
  ...
  onInit: (actions) => {},
  ...
};
```

### Button click event

The `onClick` property can be assigned a callback method, which accepts [`actions`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/rendering-a-checkout-button/performing-actions-on-the-checkout-button), that executes when the user clicks the checkout button.

```javascript
const buttonOptions = {
  ...
  onClick: async (actions) => {
    try {
      actions.loading.start();
      const checkoutSessionId = await createCheckoutSession();
      actions.loading.stop();
      if (!checkoutSessionId) {
        return;
      }
      const modalConfig = getConfigObj();
      actions.checkout.modal.open(checkoutSessionId, modalConfig);
    } catch (error) {
      actions.loading.stop();
    }
  },
  ...
};
```

In most cases, to handle this event, you'll define an asynchronous function that creates a [checkout-session](https://www.digitalriver.com/docs/digital-river-api-reference/#tag/Drop-in-Checkout-Sessions) and then passes its identifier to [`actions.checkout.modal.open()`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/performing-actions-on-the-checkout-button#open-a-checkout-modal).

For details, refer to [Setting up the shopping experience](https://docs.digitalriver.com/digital-river-api/integration-options/low-code-checkouts/offering-local-pricing#setting-up-the-shopping-experience) on the [Offering local pricing](https://docs.digitalriver.com/digital-river-api/integration-options/low-code-checkouts/offering-local-pricing) page.

### Checkout cancel event

The `onCancel` property can be assigned a callback method that executes when users close the [Prebuilt Checkout window](https://docs.digitalriver.com/digital-river-api/integration-options/low-code-checkouts/drop-in-checkout#drop-in-checkout-modal-window) before completing the purchase.

```javascript
const buttonOptions = {
  ...
  onCancel: () => {}
};
```

{% hint style="info" %}
The [`onClose`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/configuring-prebuilt-checkout#onclose) property in the [configuration object](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-prebuilt-checkout) also allows you to listen for modal closed events.
{% endhint %}