Web SDK

The official Plexy client-side SDK for the browser. Build full Drop-in checkout or compose individual payment Components in any web app, including React and Next.js.

Installation

npm install @plexy/web
# or
pnpm add @plexy/web
# or
yarn add @plexy/web

Quick Start

Import the SDK and styles, then mount Drop-in into a container:

import { PlexyCheckout } from '@plexy/web';
import '@plexy/web/styles/plexy.css';

const checkout = await PlexyCheckout({
  clientKey: 'YOUR_CLIENT_KEY',
  environment: 'test', // or 'live'
  locale: 'en-US',
  session: {
    id: 'session_abc123',
    sessionData: 'SESSION_DATA_FROM_BACKEND',
  },
  onPaymentCompleted: (result) => {
    console.log('Payment completed', result);
  },
  onError: (error) => {
    console.error('Payment error', error);
  },
});

const dropin = checkout.create('dropin').mount('#plexy-container');

Add the container to your HTML:

<div id="plexy-container"></div>

Creating a Session

Drop-in works with checkout sessions created from your backend. See the Node.js SDK example:

const session = await plexy.checkout.sessions.create({
  amount: { value: 10000, currency: 'KZT' },
  reference: 'ORDER-12345',
  returnUrl: 'https://yoursite.com/checkout/result',
});

// Pass session.id and session.sessionData to your frontend

Configuration

const checkout = await PlexyCheckout({
  clientKey: 'YOUR_CLIENT_KEY',
  environment: 'test',
  locale: 'en-US',
  analytics: { enabled: true },
  showPayButton: true,
  paymentMethodsConfiguration: {
    card: {
      hasHolderName: true,
      holderNameRequired: true,
      enableStoreDetails: true,
    },
  },
});

Components

Use individual Components for custom checkout layouts:

const cardComponent = checkout
  .create('card', {
    onSubmit: (state) => {
      // Send state.data to your backend
    },
  })
  .mount('#card-container');

Available Components include card, applepay, googlepay, ideal, and more.

React

import { useEffect, useRef } from 'react';
import { PlexyCheckout } from '@plexy/web';
import '@plexy/web/styles/plexy.css';

export function Checkout({ session }) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let dropin: ReturnType<typeof setup> | undefined;

    async function setup() {
      const checkout = await PlexyCheckout({
        clientKey: process.env.NEXT_PUBLIC_PLEXY_CLIENT_KEY!,
        environment: 'test',
        session,
      });

      return checkout.create('dropin').mount(containerRef.current!);
    }

    setup().then((d) => (dropin = d));
    return () => dropin?.unmount();
  }, [session]);

  return <div ref={containerRef} />;
}

For App Router, render the checkout in a Client Component ('use client') and create the session in a Server Action or Route Handler. The SDK is browser-only and must not be imported from server code.

Handling Submission

dropin.submit().then((state) => {
  fetch('/api/payments', {
    method: 'POST',
    body: JSON.stringify(state.data),
  });
}).catch((error) => {
  console.error('Payment error:', error);
});

Customization

Override CSS variables to match your brand:

.plexy-checkout {
  --plexy-color-primary: #5b21b6;
  --plexy-color-text: #111827;
  --plexy-radius: 12px;
  --plexy-font-family: 'Inter', sans-serif;
}

Browser Support

The SDK supports the latest two versions of Chrome, Firefox, Safari, and Edge. Internet Explorer is not supported.

Web SDK

На этой странице