Skip to main content

​
Usage

const {
  purchaseSku,
  purchaseSkuAsync,
  data,
  isLoading,
  isError,
  isSuccess,
  error,
  reset,
} = usePurchaseSku();

​
Parameters

The mutation accepts an object with:
  • params (CreateSkuPurchaseParams):
    • wallet (WalletData): The user’s wallet (publicKey + encryptedPrivateKey)
    • skuId (string): The unique identifier of the SKU to purchase
    • mxnAmount (number): The amount to be charged in Mexican Pesos (MXN)
    • reference (string): A unique reference for the transaction (e.g. phone number, account number)
    • encryptKey (string): The user’s PIN to decrypt the wallet
    • externalUserId (string): Your application’s user identifier
  • bearerToken (string): Bearer token for authentication

​
Return Value

PropertyTypeDescription
purchaseSku(input) => voidFire-and-forget purchase
purchaseSkuAsync(input) => Promise<Transaction>Promise-based purchase
dataTransaction | undefinedThe purchase transaction record
isLoadingbooleanTrue while processing
isErrorbooleanTrue if purchase failed
isSuccessbooleanTrue if purchase succeeded
errorError | nullError details
reset() => voidReset mutation state

​
Example Implementation

import { usePurchaseSku, useGetWallet } from "@chipi-stack/chipi-react";
import { useAuth } from "@clerk/nextjs";
import { useState } from "react";

export function PurchaseSkuForm({ skuId }: { skuId: string }) {
  const { userId, getToken } = useAuth();
  const [pin, setPin] = useState("");

  const { data: wallet } = useGetWallet({
    params: { externalUserId: userId || "" },
    getBearerToken: getToken,
  });

  const { purchaseSkuAsync, isLoading, isError, error } = usePurchaseSku();

  const handlePurchase = async () => {
    if (!wallet || !userId) return;

    const bearerToken = await getToken();
    if (!bearerToken) return;

    try {
      const result = await purchaseSkuAsync({
        params: {
          wallet: {
            publicKey: wallet.publicKey,
            encryptedPrivateKey: wallet.encryptedPrivateKey,
          },
          skuId,
          mxnAmount: 100,
          reference: "5512345678", // e.g. phone number for top-up
          encryptKey: pin,
          externalUserId: userId,
        },
        bearerToken,
      });
      alert(`Purchase complete! TX: ${result.id}`);
    } catch (err) {
      console.error("Purchase failed:", err);
    }
  };

  return (
    <div>
      <input
        type="password"
        placeholder="Enter PIN"
        value={pin}
        onChange={(e) => setPin(e.target.value)}
      />
      <button onClick={handlePurchase} disabled={isLoading || !wallet}>
        {isLoading ? "Purchasing..." : "Buy"}
      </button>
      {isError && error && <p>Error: {error.message}</p>}
    </div>
  );
}
  • useGetSkuList — Browse available SKUs before purchasing
  • useGetSku — Fetch details of a specific SKU
  • useGetSkuPurchase — Check the status of a completed purchase