Change clearing method based on user group v2 (NG) - xmpie-users/uStore-js GitHub Wiki

By default, uStore allows you to set one or more clearing (payment) methods on a store. For example, Credit Card, Cost Center and Invoice.

When multiple clearing methods are set on a store, the customer can select which payment method they want to use for each order they place. In most cases, store administrators will set one clearing method on each store to force the customer to use their preferred payment method.

Of course, it is easy to duplicate a store, and set one to use Credit Card clearing (maybe for public customers) and the other to use Invoice clearing (maybe for internal customers).

However, in some cases, the store administrator may want to manage only one store, but control which clearing method is available to the user based on their user group.

This example uses JavaScript to show or hide the clearing type on the client side and has been tested on uStore v12.x with NG Themes.

Note that this is not a perfect solution since it uses client-side scripts an advanced user could use the browser console to show and use the clearing type that you have hidden. But, assuming that you are not selling a "download" product, your store administrator still needs to process the order and can easily cancel an order that was made with the wrong clearing type.

1. Create the user groups on your store. In this example, I will use the default "registered customers" group and the newly created "Credit Card" group:

2. Identify the ID of your two groups by clicking on the group, and locating the "UserGroupId" in the URL:

3. Edit your store, and enable two clearing methods. For this example, I am using "Invoice" and "Offline Billing":

4. Add JavaScript to Storefront and paste in the code provided below:

<script>
$(document).ready(function() {

// only run on the checkout page
if (document.title.indexOf("Checkout - Order Summary") == 0) {

  // set these to be your user group IDs and Clearing names:
  var clearingType1 = "Invoice";
  var clearingType2 = "Offline Billing";
  var userGroupIDforClearingType1 = 10032;
  var userGroupIDforClearingType2 = 10050;
  
  // set to hide first
  var showClearingType1 = false;
  var showClearingType2 = false;
  
  //get current user groups and decide if showing each clearing type
  var currentUser = xmp.sdk.storeFrontParams.currentUser;
  for (var i = 0; i < currentUser.userGroups.length; i++) {
    if (currentUser.userGroups[i].ID == userGroupIDforClearingType1)
      showClearingType1 = true;
    if (currentUser.userGroups[i].ID == userGroupIDforClearingType2)
      showClearingType2 = true;
  }
  
  //hide the unwanted clearing type and click the required one.
  if (showClearingType1 && !showClearingType2) {
    var input1 = document.evaluate('//label[text() = "' + clearingType1 + '"]/../input', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    var row1 = document.evaluate('//label[text() = "' + clearingType2 + '"]/../..', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    row1.style.display = "none";
    input1.click();
  }
  if (showClearingType2 && !showClearingType1) {
    var input1 = document.evaluate('//label[text() = "' + clearingType2 + '"]/../input', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    var row1 = document.evaluate('//label[text() = "' + clearingType1 + '"]/../..', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    row1.style.display = "none";
    input1.click();
  }
}
}); 
</script>

5. Edit the first four lines of the script to enter the names of your two clearing providers, and the ID of your two user groups.

6. Use the Preview option to preview the store as a specific user in each group to confirm the script is hiding and selecting the required clearing method based on the user's group membership:

NOTE: Remember that uStore's user group permissions are accumulative. If your test user belongs to both user groups, the user will get both clearing methods displayed.