Rendering a checkout button

Learn how to configure a checkout button that can be used to create a Prebuilt Checkout modal

The DigitalRiverCheckout object exposes renderButton(), which allows you to define a checkout button's location, style, and text. It can also hide existing buttons and initiate the creation of a Prebuilt Checkout window.

The function accepts two parameters, a button container and button options.

digitalRiverCheckout.renderButton(buttonContainer, buttonOptions);

Button container

The required button container represents the id for the HTML element in which you want DigitalRiverCheckout.js to render your checkout button.

<div id="button-container"></div>
...
const buttonContainer = '#button-container';

Button options

In button options, you can:

• Style the button

• Customize the button's text

• Hide elements

• Add the button to the DOM

• Define how you'd like to handle:

  • Button initialization events

  • Button click events

  • Checkout cancel events

const buttonOptions = {
  style: {
    backgroundColor: '#B52',
    borderRadius: '4px',
    color: '#fff',
    fontSize: '1rem',
    fontWeight: '400',
    fontFamily: 'Montserrat,Arial,Helvetica,sans-serif',
    ':hover': {
      color: 'rgb(0, 167, 225)'
    }
  },
  buttonText: 'Proceed to checkout',
  hiddenElement: ['.cart-actions > a.button', '.previewCartAction-checkout > a.button'],
  afterRender: false,
  onInit: (actions) => {},
  onClick: async (actions) => {
    try {
      actions.loading.start();
      const checkoutSessionId = await createCheckoutSession();
      actions.loading.stop();
      if (!checkoutSessionId) {
        return;
      }
      const modalConfig = getConfigObj();
      actions.checkout.modal.open(checkoutSessionId, modalConfig);
    } catch (error) {
      actions.loading.stop();
    }
  },
  onCancel: () => {}
};

Style the button

The style object can be used to define the visual appearance of a checkout button:

• backgroundColor: Sets the background color

• borderRadius: Determines the roundness of the button's corners

• color: Sets the color of the text

• fontSize: Sets the font size of the text

• fontWeight: Sets the font weight of the text

• fontFamily: Specifies the button's font family. If the browser doesn't support the first font, it moves through the list, from left to right, looking for one it does.

• ':hover': This object contains a nested color property which determines the color of the button when it's hovered over.

const buttonOptions = {
  style: {
    backgroundColor: '#B52',
    borderRadius: '4px',
    color: '#fff',
    fontSize: '1rem',
    fontWeight: '400',
    fontFamily: 'Montserrat,Arial,Helvetica,sans-serif',
    ':hover': {
      color: 'rgb(0, 167, 225)'
    }
  },
  ...
};

Customize the button's text

The buttonText allows you to customize the characters displayed on the button. The default value is Check out.

const buttonOptions = {
  ...
  buttonText: 'Proceed to checkout',
  ...
};

Hide elements

The hiddenElement array represents one or more CSS selector strings that you want DigitalRiverCheckout.js to locate and then hide before rendering the checkout button. This allows you to conceal add to cart, cart preview, and similar buttons that might exist on the page.

const buttonOptions = {
  ...
  hiddenElement: ['.cart-actions > a.button', '.previewCartAction-checkout > a.button'],
  ...
};

In the example, '.cart-actions > a.button' and '.previewCartAction-checkout > a.button' target elements that have a class value of "button" and are descendants of elements with classes of "cart-actions" and "previewCartAction-checkout", respectively.

After button render actions

The afterRender boolean determines whether or not the button container gets dynamically added to the DOM.

const buttonOptions = {
  ...
  afterRender: false,
  ...
};

Button initialization event

The onInit property can be assigned a callback method, which accepts actions, that executes when the checkout button first renders.

const buttonOptions = {
  ...
  onInit: (actions) => {},
  ...
};

Button click event

The onClick property can be assigned a callback method, which accepts actions, that executes when the user clicks the checkout button.

const buttonOptions = {
  ...
  onClick: async (actions) => {
    try {
      actions.loading.start();
      const checkoutSessionId = await createCheckoutSession();
      actions.loading.stop();
      if (!checkoutSessionId) {
        return;
      }
      const modalConfig = getConfigObj();
      actions.checkout.modal.open(checkoutSessionId, modalConfig);
    } catch (error) {
      actions.loading.stop();
    }
  },
  ...
};

In most cases, to handle this event, you'll define an asynchronous function that creates a checkout-session and then passes its identifier to actions.checkout.modal.open().

For details, refer to Setting up the shopping experience on the Offering local pricing page.

Checkout cancel event

The onCancel property can be assigned a callback method that executes when users close the Prebuilt Checkout window before completing the purchase.

const buttonOptions = {
  ...
  onCancel: () => {}
};

The onClose property in the configuration object also allows you to listen for modal closed events.