Best Practice: Custom Tender Options in Retail Pro Prism

At times, a custom tender option is required to override existing Retail Pro Prism tenders. This may be done to provide integration with Credit Card or Gift Card providers, or to use existing tender options for different forms of payments like Cash Card.

There are two different types of customizations in Retail Pro Prism that are necessary for integration with Credit Card/Gift Card providers:

1. WebClient/UI customization - With a WebClient or UI customization, you can override the existing tender option to provide a custom form to input information. The process to add tenders to a document can be added in a WebClient customization.
2. Proxy customization - A Proxy customization will work as a middleware customization to provide interaction between the WebClient customization and Credit Card/Gift Card providers. This customization may be required only in some cases, depending on requirements for each custom tender. For example, for Gift Certificates, only a Gift Certificate number and value are required. Therefore, you would not need this type of customization, as there is no communication with the credit card provider. In this case, the WebClient customization would suffice.

 

In this document, we will provide information about overriding the existing Gift Certificate tender option in Retail Pro Prism, which would only require a WebClient customization.

For demonstration purposes:

1. Chrome browser is used for Retail Pro Prism
2. Visual Studio Code is used as html and javascript editor

 

 

How to Create a WebClient Customization for Custom Gift Certificates

 

1. Get event name

Check for the event name linked with the Gift Certificate tender option:

• Select Gift Certificate tender.
• Right click and select Inspect. This will open a separate DevTools form with the Gift Certificate element selected in the html document. Here you will find the event name linked to the Gift Certificate tender option.

 

 

Customization-related files should be stored in the Retail Pro Prism WebClient plugins directory ("C:\ProgramData\RetailPro\Server\WebClient\plugins") as the folders and files in this directory are not updated or removed while applying Retail Pro Prism updates. Create a sub-directory "custGiftCert" to store customization files and create two sub-directories "js" and "html" within "custGiftCert" directory to store the html and javascript files.

 

2. Create button hook for gift certificate

Below is the code to add a button hook for Gift Certificates. Save the following code in the btnHookGiftCert.js file in the "js" directory created in Step 1.

 

3. Create custom gift certificate html and controller

Create custom Gift Certificate html with inputs for Certificate Number and Amount along with two buttons, Submit and Cancel.

Html code for custom Gift Certificate

Save the following code as custGiftCert.htm file in the "html" directory created in the "custGiftCert" directory.

HTML view in Retail Pro Prism on clicking the Gift Certificate tender option:

 

Controller code for custom Gift Certificate  

Save the following code custGiftCertCtrl.js file in the "js" directory created in the "custGiftCert" directory.

 

 

4. Register customization

Customization-related files and controller information need to register in Retail Pro Prism WebClient as the following:

In the "C:\ProgramData\RetailPro\Server\WebClient\customization.html" file, add the following code:

In the "C:\ProgramData\RetailPro\Server\WebClient\customization.js" file, add the following code:

 

5. Add code

Now it's time add more code to the customization.

Add code to call the custom Gift Certificate html in btnHookGiftCert.js:

 

Add code in the custom Gift Card controller custGiftCertCtrl.js to add the Gift Certificate tender based on information provided in the custom Gift Certificate form:

 

Success!

Now you can override any of the available Retail Pro Prism tender options by providing custom tender options.