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:

Last updated