Popup Payment & Apple Pay

Use this library to integrate Paylink payments into your app and grow your business with Paylink APIs to proceed with easy Payment and generate customer invoices.

Step1: Getting token

From the server side, programmatically generate a token from the backend server using the Paylink Auth method. Next, the client-side code will use this token.

Step2: Referring to javascript SDK.

On the client side, refer to the paylink.js SDK library file as follows:

Call Sript

<script src="https://paylink.sa/assets/js/paylink.js"></script>

Step3: Creating Order javascript object.

On the client side, create the order details for the buyer as follows:

Order

let order = new Order({
            callBackUrl: 'http://example.com/any_call_back_method.php', // callback page URL (for example http://localhost:6655 processPayment.php) in your site to be called after payment is processed. (mandatory)
            clientName: 'John Smith', // the name of the buyer. (mandatory)
            clientMobile: '0509200900', // the mobile of the buyer. (mandatory)
            amount: 50, // the total amount of the order (including VAT or discount). (mandatory). NOTE: This amount is used regardless of total amount of products listed below.
            orderNumber: 'ANY_UNIQUE_ORDER', // the order number in your system. (mandatory)
            clientEmail: '[email protected]', // the email of the buyer (optional)
            products: [ // list of products (optional)
                {title: 'Dress 1', price: 120, qty: 2},
                {title: 'Dress 2', price: 120, qty: 2},
                {title: 'Dress 3', price: 70, qty: 2}
            ],
        });

Step4: Creating Payment javascript object.

Create Paylink Payments javascript object from paylink.js SDK library. Use the parameters as follows:

Parameter Name	Description	Values	Default Value
mode	Choose the environment of the Paylink system, either "production" for the production environment or "test" for the testing environment. The default value here is "production".	production test	production
defaulting	Choose the language of the payment user interface, either " en" for English or "ar" for Arabic. The default value here is "en".	en ar	en
backgroundColor	This field will contain the background color of the Paylink payment popup window. The default color is #EEE.	hex color value	EEE

Payment

let payment = new PaylinkPayments({mode: 'test', defaultLang: 'ar', backgroundColor: '#EEE'});

Step5 - A: Opening Payment popup window

Call the openPayment function to open the Paylink payment popup window. It takes the generated "token" in the server-side (Step 1) and the "order" object (Step 4).

Proceed

payment.openPayment(token, order, successCallback);

The openPayment function takes the following parameters:

Parameters name	Description	value type
token	The token is programmatically generated on the server side (Step 1).	string
order	The order object for the new Invoice.	Order object type
successCallback	the callback function that will be called when the popup screen opens.	javascript function

Step5 - B: Opening ApplePay Payment window

Call the openApplePay function to open the ApplePay payment window. It takes the generated "token" in the server-side (Step 1) and the "order" object (Step 4).

JavaScript

payment.openApplePay(token, order, successCallback);

The openApplePay function takes the following parameters:

Parameters name	Description	value type
token	The token is programmatically generated on the server side (Step 1).	string
order	The order object for the new Invoice.	Order object type
successCallback	the callback function that will be called when the popup screen opens.	javascript function

Step6: Handling Payment process response.

Finally, from the server side, programmatically process the payment response sent by Paylink after the payment process finishes. This step is crucial for security reasons; carefully follow Get Invoice to handle the payment result from Paylink.

❗️

Important

Merchant's application must call GetInvoice (here) endpoint immediately after the payment from the server side. First, check the integrity of the price by checking the payment status "orderStatus" and the amount paid "amount". Then proceed with the order processing of the client as paid or not. Otherwise, avoid using the endpoint GetInvoice and checking the amount and status will jeopardize the security of the payment.

Sample code

You can download a sample of the code written in PHP from here.