Hiding and Showing Based on Customer Group Part 2: Payment Display

The most common problem with not having an intuitive way to show or hide certain options throughout Bigcommerce based on customer groups is payment options for Wholesale or Retail groups.

This will walk you through how to set up a COD payment method for Wholesale Customers.

Set your checkout process to multi-page checkout. This method only works with the multi-page check out process.

Making the CSS for Payment Options: Generally, the biggest request is to show/hide a COD payment option. So that is what this will achieve. However you can do this for other payment options, but you have to know what their identifier is.** To do this see the notes at the end of this set-up.** Copy and paste this code into the bottom of your styles.css BEFORE you add the payment option. This will ensure that it does not show up for one or the other group.

/*COD Payment Option Display*/

#checkout_provider_checkout_cod {
display: none;
}
.ProviderNamecheckout_cod {
display:none;
}
#checkout_provider_checkout_cod .PAYMENT_PROVIDER_OFFLINE,
input.PAYMENT_PROVIDER_OFFLINE  {
display: none;
}

 Now that you have set the COD to not display as a default you can go and activate it in the payment area of your Big Commerce.

Implementing the script:

• You can make the script into a panel which can then be inserted. But you need WebDav or FTP to do this.
• Open up Notepad or Notepad ++ and insert the script.
• Save your document as and html and as something easily identifiable like WholesaleAccount or RetailAccount
• Upload the document into the panels directory. Now you just have to create a reference to it like this  %%Panel.WholesaleAccount%% in your Header panel.
• You can insert the script directly into your Header panel. NOTE: I used the panel method. The direct insertion method has not been tested.

The Script:

<script type="text/javascript">
$(document).ready(function()
{
// Begin Wholesale Group COD payment Method display
if($('a[href$="http://www.teststore.com/hot-deals"]').length > 0) {
$("#checkout_provider_checkout_cod .PAYMENT_PROVIDER_OFFLINE,input.PAYMENT_PROVIDER_OFFLINE").show();
$(".ProviderNamecheckout_cod").show();
});
  </script>

Notes: If you want to add and manipulate other payment options you have to know what their identifier is. I only know what the above identifier is because I turned it on and grabbed the line of code I needed and turned it off. But my site has low traffic, if you have a higher traffic flow you might want to open a test store in big commerce and follow the steps below to get the reference you need.

• Turn on the desired payment option(s)
• Grab a product for your cart and go through the check out. 
• Once you get to the payment page use your browsers developer console to find the id for the payment option. 
•  Snag the payment options from the HTML. You can write them down or copy/paste into a text editor. 
•  Now you have them and you can manipulate them in the CSS. Remember if you are working on a live store you want to add them to the CSS and set the display to none before turning on that payment option so that John Smith doesn't use that to buy a product if he's not supposed to.