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:
<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:
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 |
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).
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).
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.
Updated 14 days ago