SDK Initialization

This JavaScript SDK allows seamless integration of our payment gateway with various platforms, including Apple Pay, STC Pay, and websites. Before using any specific payment option, you must initialize the SDK by following the steps below. This ensures your integration is set up correctly and ready to process payments.

Step 1: Getting Token

From the server side, programmatically generate a token from the backend server using the Paylink Authentication endpoint. then client-side code will use this token.


Step 2: 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>

Step 3: Creating Payment JavaScript Object

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

let payment = new PaylinkPayments({mode: 'test', defaultLang: 'ar', backgroundColor: '#EEE'});
Parameter NameDescriptionDefault Value
modeChoose the environment of the Paylink system:

- [production] for the production environment.
- [test] for the testing environment.
production
defaultLangChoose the language of the payment user interface:

- [en] for English.
- [ar] for Arabic.
en
backgroundColorThis field will contain the hex color of the background of the Paylink payment popup window.# EEE

Step 4: 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}
            ],
        });

The provided code creates a new Order object and sets several properties using an object literal. The properties of the Order object are used to provide information about the order being processed. The following table lists the properties and their descriptions.

PropertyTypeMandatoryDescription
callBackUrlStringYesThe URL of the callback page that will be called after the payment is processed
clientNameStringYesThe buyer's name
clientMobileStringYesThe buyer's mobile phone number.
amountNumberYesThe total amount of the order, including any applicable VAT or discounts.
orderNumberStringYesThe unique order number in the seller's system
clientEmailStringNoThe buyer's email address
productsArrayNoAn array of objects representing the individual products included in the order, Each object in the collection has:

- title: the name of the product
- price: the price of the product
- qty: the quantity of the product ordered

Next Steps

Now that you've initialized the SDK, you can proceed to use one of the following methods: