PayTabs SDK makes the integration with the PayTabs payment gateway very easy by providing a ready-made payment screen that handles the card entry and, billing & shipping information and completes the missing details.


This article is dedicated to walking you through how to handle the payment response after performing it. Handling the response right will prevent your application from crashing on any unhandled response status or any missing case.


To perform such, you will need to use the response result via the async and await keywords which enable asynchronous, promise-based until you get the response (PaymentSdkTransactionDetails object) then you can handle the transaction details data and start building your business case as shown in the below example:


this.handleResult(result);
      handleResult(result: any) {
          if (result.status == 'success') {
            // Handle transaction details here.
            const transactionDetails = result.data;
            console.log('responseCode: ' + transactionDetails.paymentResult.responseCode);
            console.log('transactionTime: ' + transactionDetails.paymentResult.transactionTime);
            console.log('responseMessage: ' + transactionDetails.paymentResult.responseMessage);
            console.log('transactionReference: ' + transactionDetails.transactionReference);
            console.log('token: ' + transactionDetails.token);
          } else if (result.status == 'error') {
            // Handle error here the code and message.
          } else if (result.status == 'event') {
            // Handle events here.
          }
}


You can use result.status == 'success' condition to ensure a successful transaction.


It worth mentionting, that all the responses and statuses the following checkers relies on are the official supported one listed in our What is: Response_code vs the Response_status? solution article.


It is important that you MUST validate that the response you received from our end in the below PaymentSdkTransactionDetails object is genuine by comparing it to the order/cart details stored already on your server-side in order to ensure that the original data that has been sent through the Mobile Application (client-side) has not been manipulated/intercepted.



if (result.status == 'success')


In this case, this means that your payment has been finished successfully, and you received a response from PayTabs. The next step for you is to handle the payment response. 

Through the PaymentSdkTransactionDetails object, you will receive the PayTabs response that should be handled from your side according to your business needs depending on the sent information/parameters as clarified below:


PaymentSdkTransactionDetails Properties


PropertyData TypeUsage
tokenStringThe sent token for the tokenized payment requests. This field is required for creating tokenized (recurring) transactions. To know more, please check our sss solution article.
transactionReferenceStringThe unique key for the transaction generated by the PayTabs. 

This field is required for creating tokenized (recurring) transactions.
transactionTypeStringThe identification of the type of transaction. To know more about these types, please check our What is the "tran_type" (transaction type)? solution article. 
To know more about the only types that are supported in this SDK, please check our 2.3 Ionic SDK | Enums solution article.

The default passed value is ".sale".
cartIDStringIndicates the cart/order id at the merchant end to easily relate the transaction to
cartDescriptionStringIndicates the cart/order description at the merchant end to easily relate the transaction to.
cartCurrencyStringIndicates the transaction currency, which the customer will be charged with. Noting that this currency must be configured first on your PayTabs account to accept payment with.
cartAmountStringIndicates the amount of this transaction the customer is about to be charged.
paymentResultPaymentSdkPaymentResult ObjectresponseStatusStringIndicates the status of the performed transaction, which will be one from the list clarified in our What is: Response_code vs the Response_status? solution article.
responseCodeStringIndicates the code of the performed transaction, which will be one from the list clarified in our What is: Response_code vs the Response_status? solution article.
responseMessageStringIndicate the message/description of the performed transaction.
transactionTimeString

Indicate the exact time that transaction is completed

paymentInfoPaymentSdkPaymentInfo ObjectcardTypeString

Indicates the card type (Credit, Debit, etc)

cardSchemeString

Indicates the card Scheme (Visa, MasterCard, etc)

paymentDescriptionString

Indicates the card mask ("4000 00## #### 0002")

billingDetails
PaymentSdkBillingDetails ObjectnameString

Indicates the customer's/cardholder's valid name

emailStringIndicates the customer's valid email address. Preferred not to pass the same email with every transaction, as blocking any for a fraud attempt will cause blocking your payments at all.
phoneStringIndicates the customer's valid phone number
addressLineStringIndicates the customer's valid address
cityStringIndicates the customer's valid city name.
stateStringIndicates the customer's valid state name. Should be ISO 3166-1 alpha-2 code (two-letter state codes)
countryCodeStringIndicates the customer's valid state name. Should be

ISO 3166-1 alpha-2 code (two-letter state codes)

zipStringIndicates the customer's valid zip code.
shippingDetails
PaymentSdkShippingDetails ObjectnameString

Indicates the customer's valid name

emailStringIndicates the customer's valid email address.
phoneStringIndicates the customer's valid phone number
addressLineStringIndicates the customer's valid address
cityStringIndicates the customer's valid city name.
stateStringIndicates the customer's valid state name. Should be ISO 3166-1 alpha-2 code (two-letter state codes)
countryCodeStringIndicates the customer's valid state name. Should be

ISO 3166-1 alpha-2 code (two-letter state codes)

zipStringIndicates the customer's valid zip code.


We also provide within the same PaymentSdkTransactionDetails object multiple checkers that can assist you through your system/business flow, as shown below, which highly recommend using them to handle the response in the event:


if (result.status == 'error')


In this case, this means that the customer has canceled your payment request. You may handle the case according to your business needs, as shown below:

if (result.status == 'error') {
            // Handle events here.
}


if (result.status == 'error')


Via this event handler function, you will handle your sent request only if the payment doesn't exceed the validation.





⌂ To get familiar with the whole process and the other steps, kindly navigate to our "The Ionic SDK Integration Manual" solution article.
    
⇦ And to navigate to the previous step in the integration process "Step 4 - Accepting the payment" kindly click here.
    
⇨ Or you can navigate to the next step in the integration process " Step 6 - Handle the post-payment responses (notifications)" kindly click here.