Web Checkout

Embed the Lydian checkout on your own page with the Web SDK (@lydianpay/sdk-web). The SDK registers a <lydian-checkout> element and a window.Lydian API that runs the whole payment inline — the customer never leaves your site.

Hosted vs embedded — which to use?

  • Choose hosted checkout for the least code: your backend creates a session and redirects the customer to Lydian's page. Start with Accept Your First Payment.
  • Choose embedded Web checkout (this guide) to render the checkout inside your own site for a branded, in-page experience. See also Choose Your Integration.

Prerequisites

1. Add the SDK

Load the SDK as an ES module, and pin a version so an upstream release can't change your checkout unexpectedly:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@lydianpay/sdk-web@3.0.1/dist/lydian.js"
></script>

Using a bundler instead? Run npm install @lydianpay/sdk-web and import '@lydianpay/sdk-web'.

2. Place the checkout element

Add the <lydian-checkout> element where you want the checkout to appear. It stays hidden until you initialize the SDK.

<lydian-checkout></lydian-checkout>

3. Initialize the SDK

Call window.Lydian.init(...) with your publishable key, WalletConnect project ID, and the payment to collect. Set isEmbedded: true to render the checkout inline (rather than as a modal), and provide listeners to react to the outcome.

window.Lydian.init({
  sandbox: true, // sandbox environment; use dev:false + sandbox:false for production
  dev: false,
  isEmbedded: true, // render inline inside <lydian-checkout>
  publishableKey: '{PUBLISHABLE_KEY}',
  walletConnectProjectId: 'your-walletconnect-project-id',
  transaction: {
    amount: 2.45,
    currency: 'USD', // 'USD', 'TRY' or 'PHP'
    descriptor: 'Order #1234',
    referenceNumber: 'your-unique-ref',
  },
  paymentSuccessListener: () => {
    window.location.href = '/thank-you'
  },
  paymentFailedListener: (message) => {
    console.error('Payment failed:', message)
  },
  paymentCanceledListener: () => {
    console.log('Payment canceled')
  },
})

Lydian creates and tracks the underlying Transaction for this payment, and your listeners fire when it succeeds, fails, or is canceled. To change the amount before the customer pays, call window.Lydian.updateTransaction({ ... }).

Next steps