Conditionally Show Resolve At Checkout

If you are using B2B Edition with your BigCommerce store, refer to Payment Method Customization (B2B Edition) for instructions on hiding/showing the Resolve payment method at checkout

Overview

If you manage a unified B2C and B2B storefront and wish to display the Resolve payment method exclusively for approved B2B customers, or if you want to restrict Resolve for certain customer groups, the following guide details how to show the Resolve payment method only for certain customer groups in BigCommerce.

The following steps require familiarity with JavaScript

Create a Customer Group

1. From the BigCommerce Control Panel, navigate to Customers > Customer Groups

2. If you do not have an existing customer group that you want to use, create a new group by selecting + Create new

3. Enter a name for the customer group and save

4. Select the newly created customer group, take note of the url structure as it includes the Customer Group ID that you will need for the checkout script.

The URL structure should appear like this: https://{store}.mybigcommerce.com/manage/customers/groups/{id}/edit. We will be using the id for our custom script below.

Create a Script

1. Navigate to Script Manager either from Storefront > Script Manager or (with multiple channels) Channels > Scripts (Accessed through Quick Links)

2. Select Create a script

3. Enter a name for the script and ensure the following is selected:

   1. Placement: Footer

   2. Location: Checkout

   3. Script category: Essential

   4. Script type: Script

4. Under script contents, add the following script. Ensure you are replacing allowedGroupId with the correct Customer Group ID that you want to restrict. Select Save after finalizing the script.

The following script is provided an example, ensure you have thoroughly tested the intended functionality on a sandbox store before replicating the changes on your live BigCommerce store.

<script>
(function () {
  const customerGroupId = "{{customer.customer_group_id}}";
  const allowedGroupId = 3; // Add correct customer group id
  let observer;

  function handlePaymentMethod() {
    const codItems = document.querySelectorAll('.form-checklist-item');
    codItems.forEach(item => {
      const radioInput = item.querySelector('#radio-cod');
      if (radioInput) {

        const isLoggedIn = customerGroupId !== "";
        const isAllowedGroup = parseInt(customerGroupId) === allowedGroupId;
        const shouldShow = isLoggedIn && isAllowedGroup;

        if (shouldShow) {
          item.removeAttribute('inert');
          item.style.display = 'block';
          radioInput.disabled = false;
        } else {
          item.setAttribute('inert', '');
          item.style.display = 'none';
          radioInput.disabled = true;
        }
      }
    });
  }

  function setupObserver() {
    const checkoutApp = document.getElementById('checkout-app');
    if (checkoutApp) {
      if (observer) {
        observer.disconnect();
      }
      observer = new MutationObserver((mutations) => {
        let shouldCheck = false;
        mutations.forEach((mutation) => {
          if (mutation.type === 'childList' || mutation.type === 'subtree') {
            shouldCheck = true;
          }
        });
        if (shouldCheck) {
          handlePaymentMethod();
        }
      });

      observer.observe(checkoutApp, {
        childList: true,
        subtree: true
      });

      handlePaymentMethod();
    } else {
      setTimeout(setupObserver, 500);
    }
  }
  setupObserver();
})();

</script>

Upon checkout completion, only customers in the specified group will see the Resolve option. Customers without an account (guest customers), will not be able to checkout with Resolve.