Web (JS)
You will need to implement web application sdk written in plain JavaScript to create or process any transaction from your frontend web application. In this guide, we’ll look at how web sdk (vanilla JS sdk for web application) works. Lydian offers a way to integrate web sdk into your html web pages allowing you to create and process payment using Lydian.
Include script tag in your HTML document
You can directly include the prebuild JavaScript (JS) file into your HTML pages.
<script src="https://cdn.jsdelivr.net/gh/lydianpay/sdk-web@latest/dist/lydian.iife.js"></script>
Include the checkout UI in your HTML document
The checkout UI can be included in the HTML pages with the following html tag. Though it won't be visible until initialized.
<lydian-checkout></lydian-checkout>
Initialize the SDK after placing the checkout UI
Finally, the SDK can be initialized in the following way. You need to provide the publishable key and the initial transaction in order to initialize the checkout UI and make it visible in the web page. Optional fields like paymentFailedListener and paymentSuccessListener can be set with callback functions for specific operations.
NOTE: Sandbox mode can be enabled by passing sandbox field's value as true.The publishable key can be generated from the Lydian Merchant Dashboard. You can find it under Developer » API Keys.
try {
window.Lydian.init({
sandbox: true,
publishableKey: 'YOUR_PUBLISHABLE_KEY',
initialTransaction: {
amount: 2.45, // Transaction amount to process payment
currency: 'TRY', // Currency of the amount
descriptor: 'YOUR_DESCRIPTOR',
referenceNumber: 'YOUR_REFERENCE_NUMBER',
},
paymentFailedListener: (failureMessage) => { // This function is called whenever their is failure in processing payment
alert(failureMessage);
},
paymentSuccessListener: () => { // This function is called when the payment succeeds
alert("Payment Success!");
}
});
} catch (e) {
console.error(e);
}
Update Transaction Details / Amount
At anytime before the user presses the pay button, the initial transaction can be updated using the following function. It also resets the UI back to initial state.
try {
window.Lydian.updateTransaction({
amount: 1.45, // New transaction amount
currency: "USD", // New currency or existing one for the provided amount
descriptor: 'YOUR_DESCRIPTOR',
referenceNumber: 'YOUR_REFERENCE_NUMBER',
});
} catch (e) {
console.error(e);
}