> For the complete documentation index, see [llms.txt](https://docs.digitalriver.com/bigcommerce-prebuilt-checkout-solution/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digitalriver.com/bigcommerce-prebuilt-checkout-solution/use-digital-river-prebuilt-checkout-with-bigcommerce/install-and-configure-the-digital-river-script.md).

# Install and configure the Digital River script

Install the Digital River script in order to use Prebuilt Checkout.

Next, you install the Digital River script in the BigCommerce Script Manager. Doing this overrides the native BigCommerce checkout with the Digital River global checkout. Use the following steps:

1. Click **Storefront** in the app menu on the left and then click **Script Manager**. The Script Manager page appears.
2. Click **Create a Script**.
3. Enter `Digital River Checkout` in the **Name of script** and **Description** fields.
4. Select the **Footer** option for **Location on page**.
5. Select the **All pages** option for **Select pages where script will be added**.
6. Select the **Essential** option for the **Script category**.
7. Select the **Script** option for the **Script type**.
8. Copy the script your Digital River Project Manager provided and paste it into the **Script contents** field.

### Configure the Digital River Script

The following script shows an example of a Digital River Script configured for Prebuilt Checkout:

```
<script>
	const apiKey = 'pk_test_keyvaluesarehere12345';
	const displayMode = 'modal';
	const style = encodeURI(JSON.stringify({"modal": {
        "logo": "https://cdn11.bigcommerce.com/s-xs1cevxe43/stencil/6a6fe3a0-480d-013b-31ad-52beef6de530/e/7a4929a0-7731-013a-d0e2-4e84386f9e1f/img/logo-lrg.svg",
        "themeColor": {
          "primary": "#000",
          "highlight": "#e60000",
          "background": {
            "header": "#fff",
            "mainContent": "#fff",
            "orderSummary": "#f6f6f6",
            "footer": "#000000"
          },
          "text": {
            "link": "#fff",
            "footerLink": "#fff",
            "sectionHeading": "#000",
            "button": "#fff",
            "textButton": "#fff"
          }
        },
        "borderRadius": "8px",
        "fontFamily": "sans-serif",
        "fontStyle": "normal",
        "fontVariant": "normal",
        "letterSpacing": "2px"
      },
      "textField": {
        "base": {
          "color": "#000",
          "fontFamily": "sans-serif",
          "fontSize": "18px",
          "fontStyle": "normal",
          "fontVariant": "normal",
          "letterSpacing": "1px"
        }
      }}));

	(function () {
		var s = document.createElement('script');
		s.type = 'text/javascript';
		s.async = true;
		s.setAttribute('data-dr-apiKey', apiKey);
		s.setAttribute('data-dr-display-mode', displayMode);
        s.setAttribute('data-dr-checkout-style', style);         

		s.src = 'https://js.digitalriverws.com/v1/DigitalRiverBigCommerceCheckout.js';

		document.getElementsByTagName('head')[0].appendChild(s);
	})();
</script>
```

Use the attributes provided below to provide Prebuilt Checkout configuration attributes to this script:

| **Attribute**            | **Required/Optional** | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ------------------------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-dr-apiKey`         | Required              | Specifies your Digital River public API key.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `data-dr-language`       | Optional              | Specifies the language to be used in localization.  If not provided, the browser language is used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `data-dr-logo`           | Required              | Displays the logo displayed within the experience.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `data-dr-display-mode`   | Optional              | <p>Supports "modal" or "fullPage".  Defaults to "fullPage".<br></p><p>Modal:</p><p><img src="https://1794393090-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbpluWKtvZjpZc2on4950%2Fuploads%2FKMcyaEvvwOJa2P7rL6Nj%2F1%20install%20and%20configure%20modal.png?alt=media&amp;token=f8e2da39-7607-4b36-9fc0-d77b42d47938" alt="" data-size="original"></p><p> </p><p>FullPage<br><img src="https://1794393090-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbpluWKtvZjpZc2on4950%2Fuploads%2FZodFgdUwoyPRv8CDWYcJ%2Finstall%20and%20configure%20full%20page%202.png?alt=media&amp;token=1f3a6b41-67d9-4ca5-b702-85a50fee2993" alt=""></p> |
| `data-dr-checkout-style` | Optional              | Indicates the style overrides for the user experience.  If not provided, the library will attempt to determine the appropriate colors from the website's CSS.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `data-dr-thank-you-page` | Optional              | Indicates the page where the user experience is redirected after completing an order.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |