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	Supports "modal" or "fullPage". Defaults to "fullPage". Modal: FullPage
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.