ClickPay provides you with a collection of API endpoints which used to process all payments, regardless of if they are through either your own payment pages, the managed payment pages, or if you are using the hosted payment pages.


In this article, we will walk you through how to make a payment page using the Saved Card Token (requiring CVV) to not force your customers to provide the card details again except for the CVV. You will be introduced to the required parameters that need to be passed to initiate the request.


We highly recommend you to check our Step 3.3 Token Based Transactions | Create and Manage Token to get the best out of this article, since this article is showing how to use the token.



In this article, you will be going to know about:


The Endpoint and Related Postman Collection


In this tutorial, we will rely on the ClickPay Own-Form API Endpoint, mentioned on the ClickPay API endpoints postman collection, which you can access from here. The endpoint will need to be accessed with a POST request on the below-mentioned URL


Post{{domain}}/payment/request


Please note that not using the proper endpoint URI {{domain}} will lead to authentication issues within your responses. To find the your proper domain you can read our What Is My (Region)/(endpoint URL)? solution article.


The Minimum Required Parameters


To initiate a recurring payment request, there are minimum required parameters that need to be passed with valid information. The specification of these required parameters is clarified below.


Parameter 

Required 

Purpose 

profile_id 

✔ 

The merchant Profile ID you can get from your PayTavs dashboard. For more information please check our How to get your account information from PT2 Dashboard? solution article.


To know more about this parameter please click here.

tran_type 

✔ 

the identification of the type of the transaction. To know more about these types please check our What is the "tran_type" (transaction type)? solution article. 


To know more about this parameter please click here.

tran_class 

✔ 

For this request, the transaction type MUST be "ecom".


The identification of the category/class this transaction will follow, such as eCommerce, Recurring, etc. To know more about these types please check our What is the "tran_class" (transaction class)? solution article


To know more about this parameter please click here.

cart_id 

✔ 

Indicates the cart/order id at the merchant end to easily relate the transaction to 


To know more about this parameter please click here.

cart_description 

✔ 

Indicates the cart/order description at the merchant end to easily relate the transaction to 


To know more about this parameter please click here.

cart_currency 

✔ 

Indicates the transaction currency, which the customer will be charged with 


To know more about this parameter please click here.

cart_amount 

✔ 

Indicates the amount the customer is about to be charged.   
Both min and max values are subjected to the merchant transaction limits.


To know more about this parameter please click here.


Now in order to create the tokenized payment request, you need - in addition to the general initial parameters - to include new parameters specific to the tokenized payments. Find below the Additional required parameters for tokenization.


Parameter 

Required 

Purpose 

token

✔

Valid pre-generated token


To know more about this parameter please click here.


Sample Request payload  


The below sample request payload will show you how you can pass the above-mentioned parameters, which are needed to be passed with valid values to perform a request.  

{
    "profile_id": "987654",
    "tran_type": "sale",
    "tran_class": "ecom",
    "cart_id": "CART#1001",
    "cart_currency": "USD",
    "cart_amount": 500,
    "cart_description": "Description of the items/services",

    "token": "2C4652BD67A3EF30C6B390F9668175B9"
}
JavaScript


Sample Response Payload


Once the payment request is validated and initiated, you will receive the following response. You can notice that a payment page has already been performed, and the response includes the redirect_url so you can redirect the customer to this generated payment page.


{
    "tran_ref": "TST2236501422089",
    "tran_type": "Sale",
    "cart_id": "CART#1001",
    "cart_description": "Description of the items/services",
    "cart_currency": "USD",
    "cart_amount": "500.00",
    "tran_currency": "",
    "tran_total": "0",
    "return": "none",
    "redirect_url": "https://secure.clickpay.com.sa/payment/page/595CBEF982E4C13E6BE9563C9269DE1961CF2DB7D56139EEEC5E21A7",
    "serviceId": 2,
    "profileId": 987654,
    "merchantId": 1234321,
    "trace": "PMNT0403.63AF7BE0.0006F668"
}
JavaScript



The Payment Page Experience 


By creating the payment page, you will receive the redirect URL "redirect_url" within the response, which you will use to redirect your client to this payment page. Once you have redirected your client, the client browser will display the following page to the client.




The Merchant Dashboard Page Experience 


When the client successfully completes the payment, on your dashboard, you will find the transaction details shown at Home > Transactions as shown below:


 







⌂ To get familiar with the whole process and the other steps, kindly navigate to our "The PT2 API Endpoints Integration Manual" solution article. 
                    
⇦ And to get familiar with the rest of the steps regarding the previous step "Step 2 - Configure the integration method" kindly click here.
                
                    
⇦ And to get familiar with the rest of the steps regarding the current step "Step 3 - Initiating the payment" click here. 
                
                    
⇨ And to navigate to the next step in the integration process "Step 4 - Accepting the payment" kindly click here.