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, // Consider data fresh for 30 minutes }, });
2

Create a SKU Transaction

Use the useCreateSkuTransaction hook to create a transaction for the desired SKU once a user selects one.
"use client"; import { useCreateSkuTransaction } from "@chipi-stack/nextjs"; export function Example() { const { createSkuTransactionAsync } = useCreateSkuTransaction(); async function buySku() { await createSkuTransactionAsync({ params: { skuId: "sku_123", mxnAmount: 100, reference: "ORDER-001", encryptKey: "1234", // user's PIN externalUserId: "user_123", wallet: { publicKey: "WALLET_PUBLIC_KEY", encryptedPrivateKey: "ENCRYPTED_PRIVATE_KEY", }, }, bearerToken: "USER_JWT_TOKEN", }); } return ( <button onClick={buySku}> Buy SKU </button> ); }
3

Inspect a Transaction By ID

Use the useGetSkuTransaction hook to retrieve and inspect the details of a transaction using its ID.
const { getToken } = useAuth(); const { fetchSkuTransaction, data: skuTransaction, isLoading: isLoadingTransaction, error: transactionError } = useGetSkuTransaction(); const loadTransaction = async () => { try { const token = await getToken(); await fetchSkuTransaction({ id: transactionId, getBearerToken: async () => token || "", }); } catch (error) { console.error('Error loading transaction:', error); } };

Related Actions