Skip to main content

​
Necessary Configuration Steps

Create your organization in our dashboard and follow the quickstart to configure your webhook and API keys.
1

Fetch Available SKUs

Use the useGetSkuList hook to fetch and display the available SKUs (service offerings) your users can purchase.
const { data, error } = useGetSkuList({
  query: {
    page: currentPage,
    limit: ITEMS_PER_PAGE,
    category: "TELEFONIA",
  },
  getBearerToken: getToken,
  queryOptions: {
    staleTime: 30 * 60 * 1000,
  },
});
2

(Optional) Fetch a Single SKU

Use useGetSku to load full details for a specific SKU before showing a confirmation screen.
const { data: sku } = useGetSku({
  id: selectedSkuId,
  getBearerToken: getToken,
});
3

Purchase a SKU

Use usePurchaseSku to purchase the selected SKU once the user confirms.
"use client";

import { usePurchaseSku } from "@chipi-stack/nextjs";

export function Example() {
  const { purchaseSkuAsync } = usePurchaseSku();

  async function buySku() {
    await purchaseSkuAsync({
      params: {
        skuId: "sku_123",
        mxnAmount: 100,
        reference: "5512345678",
        encryptKey: "1234",
        externalUserId: "user_123",
        wallet: {
          publicKey: "WALLET_PUBLIC_KEY",
          encryptedPrivateKey: "ENCRYPTED_PRIVATE_KEY",
        },
      },
      bearerToken: "USER_JWT_TOKEN",
    });
  }

  return <button onClick={buySku}>Buy SKU</button>;
}
4

Inspect a Purchase By ID

Use useGetSkuPurchase to retrieve and inspect the details of a purchase using its ID.
const { getToken } = useAuth();
const {
  fetchSkuPurchase,
  data: skuPurchase,
  isLoading,
  error,
} = useGetSkuPurchase();

const loadPurchase = async () => {
  try {
    const token = await getToken();
    await fetchSkuPurchase({
      id: purchaseId,
      getBearerToken: async () => token || "",
    });
  } catch (error) {
    console.error("Error loading purchase:", error);
  }
};