/* @created march 2025 */

Manage the Payment Methods

PayTabs provides you with the backend packages that make the integrating with PayTabs payment gateway very easy by providing ready-made classes that handle the payment process.

This article is dedicated to walking you through managing the payment methods available for your customers on the payment page. The following payment methods keys can be sent within the createPaymentPage function as shown below:

Supported Payment Methods List:

Payment Method	Code
CreditCard:	creditcard
American Express:	amex
mada:	mada
UrPay:	urpay
UnionPay:	unionpay
StcPay:	stcpay
StcPay(QR):	stcpayqr
Valu:	valu
Aman:	aman
Meeza (QR):	meezaqr
OmanNet Debit:	omannet
KnetPay:	knet
KnetPay (Debit):	knetdebit
KnetPay (Credit):	knetcredit
ApplePay:	applepay
SamsungPay:	samsungpay
NBE installment:	installment
Forsa:	forsa
Halan:	halan
Tamara:	tamara
Aman installments:	amaninstallments
Souhoola:	souhoola
Tabby:	tabby
Touchpoints:	touchpoints
PayPal:	paypal
Sadad:	sadad

---

Method Specification

Be Aware

That the payment_code parameter is Mandatory, not passing it would throw an exception.

Description	Create the Payment Page.
Since	1.0.0
Required	✔
Signature	/** * @function createPaymentPage * @param {Array} payment_code - List of accepted payment methods. * @param {Array} transaction - Transaction type and class. * @param {Array} cart - Cart details including ID, currency, amount, and description. * @param {Array} customer - Customer details. * @param {Array} shipping - Shipping details. * @param {Array} urls - Callback and return URLs. * @param {string} lang - Language code (e.g., "en"). * @param {Function} callbackFunction - Function to handle the response. * @param {boolean} [framed=false] - Whether to use a framed payment page. */ PayTabs.createPaymentPage(payment_code, transaction_details, cart_details, customer_details, shipping_address, response_URLs, lang, callback, framed);
Sample	PayTabs.createPaymentPage( paymentMethods, transaction_details, cart_details, customer_details, shipping_address, response_URLs, lang, callbackMethod, frameMode );

---

Method Parameter details:

Payment Code

Name	payment_code
Type	ARRAY
Description	Accept array of multiple specific payment methods separated by a comma.
Default	-
Required	✔
Example	let paymentMethods = ["all"];

---

Method Parameter Behavior:

All available Payment methods

You can send the value "all" to show all available/configured payment methods on your PayTabs account on the payment page.

let paymentMethods = ["all"];

you should know

This is the default value. In other words, if passing an empty array, will be the same as passing this ["all"] value.

Multiple Payment methods

To initiate a payment page with multiple specific payment methods, you can pass a comma-separate string with all the preferred payment methods, as shown below:

Note that you can find all the payment methods code above on the Supported Payment Methods List. However, the payment method should be configured/enabled in your profile first.

let paymentMethods = ["creditcard, valu"];
let paymentMethods = ["creditcard, valu, applepay"];

Excluding Payment methods

You can initiate a payment page with all the configured payment methods, excluding one method or more from being displayed in the payment by adding (-) before the excluded payment method, as shown below:

let paymentMethods = ["creditcard, -valu"];
let paymentMethods = ["creditcard, -valu, -applepay"];

---

Expected payment flow behaviour:

1. As a merchant you would initiate a payment request per the above Specifications, which include a sample code.


2. Then, after generating the payment page use the result to redirect the customer to the payment page.
   

   function callbackMethod(result) {
       //failed to create the payment page.
       if (result['response_code:'] === 400) {
            // get the message
            console.log(result['result']);
            // Next step
       }
       //success to create the payment page.
       else {
           //On success, redirect the customer to complete the payment.
           console.log(result.redirect_url);
           // Next step
       };
   }
   
   PayTabs.createPaymentPage(
       paymentMethods,
       transaction_details,
       cart_details,
       customer_details,
       shipping_address,
       response_URLs,
       lang,
       callbackMethod,
       frameMode
   );


3. After this, your customer would proceed normally with payment by choosing the preferred payment method (if available), and providing his card information.
   
   


4. Then, he will be redirected to his issuer bank 3DS/OTP page to authenticate the used card


5. Finally, he would be redirect to a success/error page accordingly. By this time, you will be able to see his transaction on your merchant dashboard, whether it's accepted/authorized or not.