Skip to main content

Quick Start

Get started with Easy SDK in minutes.

React Quick Start​

1. Install the Package​

npm install @easylabs/react

2. Wrap Your App with EasyProvider​

import { EasyProvider } from "@easylabs/react";

function App() {
  return (
    <EasyProvider apiKey={import.meta.env.VITE_EASY_API_KEY}>
      <YourApp />
    </EasyProvider>
  );
}
Environment Variables
  • Vite: Use VITE_ prefix (e.g., VITE_EASY_API_KEY)
  • Next.js: Use NEXT_PUBLIC_ prefix (e.g., NEXT_PUBLIC_EASY_API_KEY)
  • Make sure to add your .env file to .gitignore

3. Create a Payment Form​

import { useEasy, CardElement } from "@easylabs/react";
import { useRef } from "react";

function PaymentForm() {
  const { checkout } = useEasy();
  const cardRef = useRef(null);

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const result = await checkout({
        customer_creation: true,
        customer_details: {
          first_name: "John",
          last_name: "Doe",
          email: "john@example.com",
        },
        source: {
          type: "PAYMENT_CARD",
          cardElement: cardRef,
          name: "Primary Card",
        },
        line_items: [{ price_id: "price_123", quantity: 1 }],
      });

      console.log("Payment successful!", result);
    } catch (error) {
      console.error("Payment failed:", error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement ref={cardRef} />
      <button type="submit">Pay Now</button>
    </form>
  );
}

See more React examples →

Node.js Quick Start​

1. Install the Package​

npm install @easylabs/node

2. Initialize the Client​

import { createClient } from "@easylabs/node";

const easy = await createClient({
  apiKey: process.env.EASY_API_KEY,
});

3. Process a Payment​

// Create a customer
const customer = await easy.createCustomer({
  first_name: "Jane",
  last_name: "Smith",
  email: "jane@example.com",
});

// Process a checkout
const result = await easy.checkout({
  customer_creation: false,
  identity_id: customer.data.id,
  source: {
    type: "PAYMENT_CARD",
    tokenId: "tok_from_frontend",
    name: "Customer Card",
  },
  line_items: [{ price_id: "price_123", quantity: 1 }],
});

console.log("Order created:", result.data.order_number);

See more Node.js examples →

Express.js Integration​

import express from "express";
import { createClient } from "@easylabs/node";

const app = express();
app.use(express.json());

const easy = await createClient({
  apiKey: process.env.EASY_API_KEY,
});

app.post("/api/checkout", async (req, res) => {
  try {
    const result = await easy.checkout({
      customer_creation: true,
      customer_details: req.body.customer,
      source: {
        type: "PAYMENT_CARD",
        tokenId: req.body.paymentToken,
        name: "Customer Card",
      },
      line_items: req.body.items,
    });

    res.json({ success: true, order: result.data });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(3000);

Next.js API Route​

// pages/api/checkout.ts
import { createClient } from "@easylabs/node";
import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  if (req.method !== "POST") {
    return res.status(405).end();
  }

  const easy = await createClient({
    apiKey: process.env.EASY_API_KEY!,
  });

  try {
    const result = await easy.checkout({
      customer_creation: true,
      customer_details: req.body.customer,
      source: {
        type: "PAYMENT_CARD",
        tokenId: req.body.paymentToken,
        name: "Customer Card",
      },
      line_items: req.body.items,
    });

    res.json({ success: true, order: result.data });
  } catch (error: any) {
    res.status(500).json({ error: error.message });
  }
}

Common Patterns​

Full-Stack Flow​

  1. Frontend (React): Collect payment information securely
  2. Backend (Node.js): Process the payment with your secret key
  3. Easy API: Handle the transaction
// Frontend - React
const handlePayment = async () => {
  const token = await tokenizePaymentInstrument({
    type: 'PAYMENT_CARD',
    cardElement: cardRef,
  });

  // Send token to your backend
  const response = await fetch('/api/checkout', {
    method: 'POST',
    body: JSON.stringify({ token, items }),
  });
};

// Backend - Node.js
app.post('/api/checkout', async (req, res) => {
  const result = await easy.checkout({
    customer_creation: true,
    customer_details: { ... },
    source: {
      type: 'PAYMENT_CARD',
      tokenId: req.body.token,
      name: 'Card',
    },
    line_items: req.body.items,
  });

  res.json(result);
});

Next Steps​