# DigitalRiverCheckout object

Once you [initialize DigitalRiverCheckout.js](https://github.com/DigitalRiver/GitBook/blob/Digital-River-API/developer-resources/digitalrivercheckout.js-reference/initializing-digitalrivercheckout.js), you can use the `DigitalRiverCheckout` object to:

* [Create an instance of a Prebuilt Checkout](#create-an-instance-of-a-prebuilt-checkout)
* [Create an instance of Components](#creating-an-instance-of-components)
* [Display a checkout button](#display-the-checkout-button)
* [Determine the modal's status](#determine-the-status-of-the-modal)

## Create an instance of a Prebuilt Checkout

The `DigitalRiverCheckout` exposes the [`createModal()`](#createmodal-checkoutsessionid-config) and [`embed()`](#embed-checkoutsessionid-config) functions, either of which can be used to create an interface that customers use to checkout.

### `createModal(checkoutSessionId, config)`

This function creates an instance of a checkout modal window, a graphical control element that appears in front of the other content on the page. When displayed, the user’s interaction with your content is temporarily disabled, and they must engage with the modal by completing checkout or closing the window.

The function accepts a [checkout session identifier](#checkout-session-identifier) and a [configuration object](#configuration).

```javascript
document.getElementById('YOUR_CHECKOUT_BUTTON_ID').addEventListener('click', async (event) => {
  
   //Invokes a client defined function that creates a checkout session
   const checkoutSessionId = await createCheckoutSession();
  
   // Creates and opens Prebuilt Checkout in a modal window
   drCheckout.createModal(checkoutSessionId, config);
})
```

### `embed(checkoutSessionId, config)`

This function creates an [Inline Frame element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) and adds [Prebuilt Checkout](https://docs.digitalriver.com/digital-river-api/integration-options/low-code-checkouts/drop-in-checkout#drop-in-checkout-modal-window), allowing you to embed the entire checkout process directly into your website.

The function accepts a required [checkout session](https://app.gitbook.com/s/x8fSFzVR3sg0TsNWwwVz/drop-in-checkout-sessions/checkout-sessions-basics) identifier and an optional [configuration object](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/configuring-prebuilt-checkout). However, if you want Digital River to add the `iframe` to a specific HTML element, you'll need to define [`containerElementId`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/configuring-prebuilt-checkout#designating-a-container-for-an-inline-frame) in the configuration object.

```javascript
document.getElementById('YOUR_CHECKOUT_BUTTON_ID').addEventListener('click', async (event) => {
  
   //Invokes a client defined function that creates a checkout session
   const checkoutSessionId = await createCheckoutSession();
  
   // Creates a Prebuilt Checkout and adds it to an iframe
   drCheckout.embed(checkoutSessionId, config);
});
```

## Creating an instance of components

The `DigitalRiverCheckout` object exposes `components()`. For details, refer to [Components](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components).

## Display the checkout button

The `DigitalRiverCheckout` object exposes `renderButton()`, which displays a checkout button allowing customers to initiate the checkout process. For details, refer to [Rendering a checkout button](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/rendering-a-checkout-button).

## Determine the status of the modal

The `DigitalRiverCheckout` object exposes `getStatus()`, which returns data on a Prebuilt Checkout's current state. For details, refer to Determining[ the checkout's status.](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/determining-the-checkouts-status)