# Performing actions on the checkout button

Various callback functions can be assigned to properties in the [button options configuration object](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/rendering-a-checkout-button/..#button-options). Some of these functions accept an optional `actions` parameter, which allows you to:

* [Start and stop a spinner](#start-and-stop-a-loading-spinner)
* [Open a checkout modal](#open-a-checkout-modal)

{% hint style="info" %}
Some callbacks in the [Prebuilt Checkout configuration object](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-prebuilt-checkout) also accept `actions`. For details, refer to [Performing actions on the modal.](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-prebuilt-checkout/performing-actions)
{% endhint %}

## Start and stop a loading spinner

The `actions` parameter exposes `loading.start()` and `loading.stop()`. These two functions display and hide a spinning GIF, a visual cue that the [checkout window](https://docs.digitalriver.com/digital-river-api/integration-options/low-code-checkouts/drop-in-checkout#drop-in-checkout-modal-window) is opening.

```javascript
onClick: async (actions) => {
  ...
    actions.loading.start();
    const checkoutSessionId = await createCheckoutSession();
    actions.loading.stop();
  ...
}
```

## Open a checkout modal

The `actions` parameter exposes `checkout.modal.open()`, which accepts a required [checkout-session](https://app.gitbook.com/s/x8fSFzVR3sg0TsNWwwVz/drop-in-checkout-sessions/checkout-sessions-basics) `id` and an optional [configuration object](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-prebuilt-checkout), and results in creating a [checkout window](https://docs.digitalriver.com/digital-river-api/integration-options/low-code-checkouts/drop-in-checkout#drop-in-checkout-modal-window).

{% hint style="info" %}
The `actions.checkout.modal.open()` function accepts the same inputs and generates the same output as [`createModal()`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/..#create-an-instance-of-the-checkout-modal).
{% endhint %}

For details, refer to [Button click event](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/rendering-a-checkout-button/..#button-click-event) on the [Rendering a checkout button](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/rendering-a-checkout-button) page.

```javascript
onClick: async (actions) => {
      ...
      actions.checkout.modal.open(checkoutSessionId, modalConfig);
      ...
  }
```