How to Upload and Configure the PayTabs Plugin in nopCommerce

Introduction

This guide provides a step-by-step walkthrough on how to upload, install, and configure the PayTabs payment plugin in nopCommerce. The PayTabs plugin enables seamless integration with the PayTabs payment gateway, allowing users to make secure online payments. Additionally, the plugin supports multiple stores, making it suitable for businesses operating in a multi-store environment.

This plugin works using redirection techniques, where the user is redirected to the PayTabs payment gateway to complete the payment before being redirected back to the store.

We support this type of integration: The Hosted Payment Page APIs Integration Manual.
To manage your profile and fill in the required information below, check your Merchant URL, which varies by country. For KSA, the URL is: https://merchant.paytabs.sa.

By default, the return URL is https://store2.local/Plugins/Paytabs/Return and the IPN URL is https://store2.local/Plugins/Paytabs/IPN.

For a live example, you can check this website: Chef Eyad.

This plugin supports nopCommerce 4.7. If you need support for another version, please contact us through the Contact Us page.

For a live example, you can check this website: Chef Eyad.

Step 1: Upload the Plugin

1. Navigate to the Admin Panel of your nopCommerce store.

2. Go to Configuration > Local Plugins.

3. Click the Upload plugin or theme button.

4. Select the PayTabs plugin ZIP file and upload it.

5. Click the Reload list of plugins button to refresh the list.

6. Locate the PayTabs Payment Plugin under the Payment Methods section.

7. Click Install.

8. Restart the application by clicking Restart application to apply changes.

Step 2: Configure the Plugin

1. • Additional Fee Percentage: When enabled, this option will add an extra charge to the total order amount based on the value specified in the Additional Fee field.

   • Additional Fee: Specifies the percentage to be charged to the customer if they select Additional Fee Percentage. The specified percentage will be added to the total order amount.

   • Base URL: You can get the base URL (up to the first slash) from the Merchants page → Developers → Transaction API for For KSA, the URL is: https://merchant.paytabs.sa

   • Profile ID: You can obtain the profile ID from the Merchant page (https://merchant.paytabs.sa/), then click on Profile in the left menu.

   • API Key: To create an API key, go to the Developers menu in the Merchant portal, then click on Key Management. When creating the key, select Standard API Key and copy the Server Key.

   • Transaction Currency:  On the Merchant Profile page, you can find your currency, which must match the default currency set in your store (Admin → Currencies). The format should be a three-letter code for example:

     • Jordan: JOD

     • Saudi Arabia: SAR

     • United States: USD ...

     • The maximum length is three characters. 

   • Hide Shipping: Determines whether shipping and billing information should be hidden on the payment page.

   • Enable Save Card: Allows users to see the Save This Card option on the payment page. Only a token is saved for future transactions. The next transaction will be faster, requiring only the CVV number. No card details are stored. 

   • Transaction Type: Defines the main transaction type, which can be either "auth" or "sale".

     • Auth transactions can be followed by:

       • Capture

       • Void

     • Sale transactions can be followed by:

       • Refund

     • Note: "Auth + Capture" is equivalent to "Sale." For example, Capture transactions can be followed by a Refund.
       For more details, consult this link: What is the Transaction Type?.

   • Tokenise Type: Defines the tokenization format for the generated token. Select Hex32.

   • Transaction Class: Specifies the category/class of the transaction, such as eCommerce or Recurring. For this plugin, ensure that Ecom is selected.

   • IsActive: Enables or disables the plugin so that it appears in the payment methods list.

   • Skip Payment Info: If enabled, the user will be redirected directly to the payment gateway without seeing additional information. If saved cards are enabled, the user won't be able to select from saved cards.

   • Enable Logging: Used for debugging purposes. When enabled, it generates detailed logs. Use it cautiously, as it may produce a large number of logs.

   • Default Country: Sets the default country so the user does not need to enter this information on the payment gateway page.

   • Default City: Works the same as Default Country, but for the city.

   • Default Address: Sets the default address so the user does not need to enter additional details on the payment gateway page.

2. Click Save to apply changes.

3. You might  requires to Clear Cache if you didn't see your changes right away.

Step 3: Checkout Payment Selection

1. When a customer proceeds to checkout, they will see the available payment methods.

2. The PayTabs option should be visible.

3. The customer selects PayTabs Payment and clicks Next.

Step 4: PayTabs Payment Page

1. After selecting PayTabs as the payment method, the customer is redirected to the PayTabs payment page.

2. The page allows the customer to enter their card details securely.

3. The transaction is processed through PayTabs, and the customer is redirected back to the store upon completion.

Step 5: Admin Panel - Transaction Management

1. Navigate to Sales > Orders in the nopCommerce admin panel.

2. Select an order that was paid using the PayTabs payment method.

3. Scroll to the Payment Information section to view transaction details such as:

   • Payment status

   • Transaction ID

   • Payment method

   • Amount paid

4. Perform administrative actions:

   • Void: Cancel an authorized transaction that has not yet been captured.

   • Capture: Capture funds from an authorized transaction.

   • Refund: Issue a refund for a completed sale transaction.

5. Click the appropriate action button to process the request.