Skip to main content

Quick Start

Get started with the Easy React SDK in minutes.

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>
  );
}

export default App;
tip

For Next.js, use process.env.NEXT_PUBLIC_EASY_API_KEY instead.

3. Create a Payment Form​

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

function PaymentForm() {
  const { checkout } = useEasy();
  const cardRef = useRef(null);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

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

      console.log("Payment successful!", result);
    } catch (err: any) {
      console.error("Payment failed:", err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement ref={cardRef} />
      <button type="submit" disabled={loading}>
        {loading ? "Processing..." : "Pay Now"}
      </button>
    </form>
  );
}

Next Steps​