JavaScript SDK

<script src="https://plurelpay.com/sdk/v1/1.2.1/plurel.js" async></script>
<script>
  const cart = {
    total: 12800,
    currency: "usd",
    items: [{ id: "sku_1", name: "Ticket", quantity: 2, unit_price: 5000 }],
    tax: 1000,
    shipping: 1000,
    fees: [
      { id: "cleaning", label: "Cleaning fee", amount: 500 },
      { id: "processing", label: "Ticket processing", amount: 300 },
    ],
    metadata: { order_ref: "ORD-1042" },
  };

  // From your logged-in shopper when available:
  const customer = { name: "Alex", email: "alex@example.com" };

  Plurel.init({
    merchantId: "plurel_merch_YOUR_ID",
    publishableKey: "plurel_pk_test_YOUR_KEY",
    getSignature: async (c) => {
      const res = await fetch("/api/cart/sign", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ cart: c }),
      });
      if (!res.ok) throw new Error("Cart signing failed");
      return (await res.json()).signature;
    },
  });

  Plurel.createButton({
    cart,
    group: { minSize: 2, maxSize: 6 },
    customer,
    success_url: "https://your-store.com/checkout/success",
    cancel_url: "https://your-store.com/checkout",
    callbacks: {
      onGroupFunded: (id, ref) => console.log("Funded", id, ref),
    },
  }).mount("#plurel-button");
</script>

import { Plurel } from "@plurel/sdk";

Plurel.init({
  merchantId: import.meta.env.VITE_PLUREL_MERCHANT_ID,
  publishableKey: import.meta.env.VITE_PLUREL_PUBLISHABLE_KEY,
  getSignature: async (cart) => {
    const res = await fetch("/api/cart/sign", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ cart }),
    });
    if (!res.ok) throw new Error("Cart signing failed");
    return (await res.json()).signature;
  },
});

Plurel.createButton({ cart, group: { minSize: 2, maxSize: 6 } }).mount("#plurel-button");

import { createCartSignature } from "@plurel/sdk/signing";

export async function POST(req: Request) {
  const { cart } = await req.json();
  const signature = createCartSignature(cart, process.env.PLUREL_SIGNING_SECRET!);
  return Response.json({ signature });
}

"use client";

import { PlurelProvider, PlurelButton } from "@plurel/react-sdk";

const cart = {
  total: 12000,
  currency: "usd",
  items: [{ id: "sku_1", name: "Ticket", quantity: 2, unit_price: 5000 }],
  metadata: { order_ref: "ORD-1042" },
};

export default function Checkout() {
  const customer = { name: "Alex", email: "alex@example.com" };

  return (
    <PlurelProvider
      merchantId={process.env.NEXT_PUBLIC_PLUREL_MERCHANT_ID!}
      publishableKey={process.env.NEXT_PUBLIC_PLUREL_PUBLISHABLE_KEY!}
      environment="sandbox"
      getSignature={async (c) => {
        const res = await fetch("/api/cart/sign", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ cart: c }),
        });
        if (!res.ok) throw new Error("Cart signing failed");
        return (await res.json()).signature;
      }}
    >
      <PlurelButton
        cart={cart}
        group={{ minSize: 2, maxSize: 6 }}
        customer={customer}
        success_url="https://your-store.com/checkout/success"
        cancel_url="https://your-store.com/checkout"
        appearance={{ size: "md", variant: "primary" }}
      />
    </PlurelProvider>
  );
}

import { PlurelApiClient } from "@plurel/sdk";

const client = new PlurelApiClient({
  apiKey: process.env.PLUREL_SECRET_KEY!,
  merchantId: "plurel_merch_YOUR_ID",
});

const session = await client.createSession({
  cart,
  group_config: { min_size: 2, max_size: 6 },
});