How to Setup a Payment Gateway for Paytabs

Zumzum Financials Knowledge Base

    Overview:

    The Payment Gateway for Paytabs is a secure online payment processing solution that enables businesses to accept payments from customers through various methods, including credit and debit cards, as well as alternative payment methods. Integrated within e-commerce platforms, it facilitates seamless transactions by providing a secure interface for processing payments, managing refunds, and ensuring compliance with industry standards.

    Before You Get Started

    Before you start with the setup of a Payment Gateway, you need to ensure you have a number of items set up beforehand:

    1. Ensure you have a PayTabs account. Sign up here: https://www.paytabs.com/sign_up
    2. Ensure you have the Zumzum Financials Administrator permission set assigned to your user account in Salesforce. Follow this Salesforce help article to learn more about how to add permission sets.
    3. Registered your Salesforce Site Domain, Use this Salesforce article for how to setup you Salesforce Site

    Activate The Salesforce Remote Site

    The next step is to allow the Remote Site within Salesforce.  This Remote Site Setting is used to enable Salesforce to communicate with the PayTabs API  in a secure manner.  Here is how to enable the Remote Site Settings:

    1. From Setup, enter Remote Site Settings in the Quick Find box, then select Remote Site Settings.
    2. Click edit next to the ZumzumPayTabPaymentGateway remote site.
    3. Set the Active checkbox to true.
    4. Click Save.

    Setup and Publish a Salesforce Site

    When a user completes a PayTabs payment page, the data is captured and sent back to Zumzum Financials to process and store in Salesforce records.  You will create a Salesforce Site and enter the details into your PayTabs user account settings. This step will describe how to set up the IPN Handler link from Salesforce ready for entry into Paytabs:

    1. Go to Setup
    2. Search Sites in the quick find box and drill into the settings.
    3. Scroll down and Select New
    4. Enter a Site Label such as “PayTabs Site” – this can be as you wish.
    5. Click into the Site Name field, this should auto-fill the field.
    6. If you wish you can set a custom  Site Contact, or just leave it as the default (the user creating the record)
    7. In the Active Site Home Page field search PayTabsPaymentGatewayResponse and select the corresponding record.
    8. Tick the Active box.
    9. Select Save
    10. On the Sites page, you are redirected to, scroll down to the related list called Custom URL
    11. Copy the Sites Domain Name or make a note of it as you will need to enter this into your PayTabs account.
    12. Go to your Paytabs account to customise your settings in My Account, My Profile, and select Edit Profile
    13. Enter the Custom URL value to the IPN Listener URL field, please ensure you include the “https://” part of the whole domain name, e.g. https://cloudn.force.com/
    14. Enter the Custom URL value to the IPN Listener URL for Transaction Reports fields within PayTabs, please ensure you include the “https://” part of the whole domain name, e.g. https://cloudn.force.com/
    15. Confirm the changes with Submit button

    Add the Zumzum PayTabs Guest User Permission Set To The Guest User Account

    When you create and share your site publicly on the internet, Salesforce automatically creates a Guest User Profile and assigns this to your Guest User Account.  You can either follow the Salesforce article Give Secure Access to Unauthenticated Users with the Guest User Profile or assign the Zumzum PayTabs Guest User permission set to the Guest User created when your site was created. 

    To assign the Zumzum PayTabs Guest User permissions set to the Guest User account please follow these steps:

    1. Go to Setup
    2. Search Sites in the Quick Find box.
    3. Click on the Site Label of the site you set up in the previous step.
    4. Click the Public Access Settings button and then the Assigned Users button
    5. Click on the Full Name of the Site Guest User, PayTabs Site user.
    6. Scroll down to the Permission Set Assignment and click Edit Assignment
    7. Add the Zumzum PayTabs Guest User permission set from the list.
    8. Select Save.

    Setup a Payment Gateway for PayTabs

    Please note that before continuing you must have a PayTabs account. If you do not have a PayTabs account already, please go ahead and create one, here is a link to their page to create an account: https://www.paytabs.com/en/

    You will need to generate and have available your PayTabs Secret Key. To generate your Secret Key in your PayTabs account in your merchant dashboard. Go to your PayTabs Account and find the Secret Key link.

    Back in Zumzum Financials, you will need to add a new Payment Gateway to your company.

    1. Go to the Company you wish to add a Payment Gateway capability for.
    2. In the Payment Gateway, Related List select New
    3. Firstly Fill in Payment Gateway Name with any text value you wish.
    4. If you wish this payment gateway to be your first one to appear in the list for your users, select  Default Payment Gateway (this may only be selected for one gateway per company otherwise you will receive errors when saving)
    5. In the Type, field ensure Paytabs is selected
    6. Fill in the field Merchant’s Email with the email address linked to your PayTabs account
    7. Next Copy & Paste the Secret Key, generated in your PayTabs account, into the Client Secret field.
    8. In the Site URL ensure the value is exactly the same as the field “Site URL” on your PayTabs account
      • This will need to be the same top level domain name as the Redirect URL
    9. Fill out the Redirect URL with a page that you want the user to be redirected to upon completion of the payment
      • This will need to be the same top level domain name as the Site URL
    10. When you are ready, select Active to make available for use by your users.
    11. Save your settings

    Your users will now be able to select this payment gateway for Payment Gateway Transactions for this company.

    Add the Quick Action to the Lead Page

    This section describes how to add the Quick Action component to the Lead page. The component will allow you to payment links to leads directly from Salesforce. The steps to do this are as follow:

    1. Go to Setup
    2. Go to Object Manager 
    3. Find Lead in the list and click into it
    4. Go to the Page Layout section
    5. Select the Page Layout you wish to add the Quick Action to and then click Edit.
    6. In the menu at the top go to the Mobile & Lightning Action and search Payment in the Quick Find box
    7. Drag and drop the Button into the Salesforce Mobile and Lightning Experience Actions section.
    8. Click Save to save the changes you have made.

    Optional: Configure your Leads fields to Payment Transaction Metadata settings

    You are able to use the default fields mappings in Zumzum Financials to capture your Amount and Description fields for your Payment Gateway Transaction screen.  If you wish to use your own custom fields to pass this data to the Payment Gateway Transaction and PayTabs paypage, then please follow these instructions to update your Metadata records for “Payment Gateway Transaction Page Setting” for your Lead object:

    1. Go to Setup
    2. Search for metadadata in the search box
    3. List the Custom Metadata type and find the Payment Gateway Transaction Page Setting record
    4. Click Manage Records against the metadata type
    5. Find the PayTabs Lead Settings and click Edit
    6. Leave the Object as Lead (Do not change)
    7. Edit the setting for the Payment Description field
    8. Or edit the Payment Amount field
    9. Click Save to keep your configuration changes changes.

    Optional: Configure your Opportunity fields to Payment Transaction Metadata settings

    You are able to use the default fields mappings in Zumzum Financials to capture your Amount and Description fields for your Payment Gateway Transaction screen.  If you wish to use your own custom fields to pass this data to the Payment Gateway Transaction and PayTabs paypage, then please follow these instructions to update your Metadata records for “Payment Gateway Transaction Page Setting” for your Opportunity object:

    1. Go to Setup
    2. Search for metadadata in the search box
    3. List the Custom Metadata type and find the Payment Gateway Transaction Page Setting record
    4. Click Manage Records against the metadata type
    5. Find the PayTabs Lead Settings and click Edit
    6. Leave the Object as Lead (Do not change)
    7. Edit the setting for the Payment Description field
    8. Or edit the Payment Amount field
    9. Or edit the Payment Amount field
    10. Or edit the Related Payment Contact field
    11. Click Save to keep your configuration changes changes.

    Optional: Capture Payment Method/Tokens and Store In Salesforce.

    Add an iFrame to Your Redirect Page

    Once your payment request is authorised through the PayTabs payment page, you are able to configure which web page your visitor will be redirected to.  You may decide to redirect to your own web site or any other web page as you wish.  Your decision will depend on how you wish to retain and continue to engage with your web visitor.

    You need to add an iFrame to the web-page that you want the user to be redirected to once the payment is complete. This step will be different depending on which service you use to host your website.   Contact your webmaster or consult your web content management tool manuals to ensure you are able to embed iFrames within your website or web hosting packages.

    Either enter the iFrame to one of your existing web pages or create a new dedicated web page for this use.

    Here is the code you will need to enter into your iFrame:

    NOTE: SITE_URL is the Domain Name URL of the Salesforce site you configured earlier.

    Replace the text in “ENTER YOUR SITE URL HERE” part of the script with your actual Salesforce Sites Domain Name URL.

    <?php
    
    /*
    
    *
    
    *
    
    Script to capture Url parameters for tokenization and store as payment method in Salesforce. The script generates iframe url based on parameters and set the url in hidden iframe which is a salesforce site url and will create payment method linked to Lead and payment gateway transaction.
    
    *
    
    *
    
    */
    
    $_paymentResult = $_POST; /*Capturing url parameters*/
    
    $payment_reference = $_paymentResult['payment_reference'];
    
    $pt_customer_email = $_paymentResult['pt_customer_email'];
    
    $pt_customer_password = $_paymentResult['pt_customer_password'];
    
    $pt_token = $_paymentResult['pt_token'];
    
    $frameurl = "https://<Replace_With_Salesforce_SITE_URL>/PaytabsPaymentGatewayResponse?";
    
    //For Example https://sandbox-paytabsscratchorg3-developer-edition.cs86.force.com
    
    echo '<script>console.log("frame '.$frameurl.'")</script>';
    
    $int = 0;
    
    if($payment_reference != null)
    
    {
    
        $frameurl = $frameurl."payment_reference=".$payment_reference;
    
        $int ++;
    
    }
    
    if($pt_customer_email != null)
    
    {
    
        $frameurl += ($int >= 1 ) ? "&" : "";
    
        $frameurl += "pt_customer_e".$pt_customer_email;
    
        $int ++;
    
    }
    
    if($pt_customer_password != null)
    
    {
    
        $frameurl += ($int >= 1 ) ? "&" : "";
    
        $frameurl += "pt_customer_password=".$pt_customer_password;
    
        $int ++;
    
    }
    
    if($pt_token != null)
    
    {
    
        $frameurl += ($int >= 1 ) ? "&" : "";
    
        $frameurl += "pt_token=".$pt_token;
    
        $int ++;
    
    }
    
    ?>
    
    <iframe src="<?php echo $frameurl; ?>" width="600" height="258" scrolling="no" style="overflow:hidden; margin-top:-4px; margin-left:-4px; border:none;display:none;"></iframe> 

    in PayTabs Payment Gateway Tags: Credit CardePaymentPaymentPayTabs