Charge in stablecoins. Unlock on-chain.

import { useTokenPayment, usePayment, DropdownBuyButton } from "@payxor/react";
import { useSessionStatus } from "@payxor/react";

// wallet = { address, chainId, publicClient, walletClient } from wagmi
export function BuySession({ wallet }) {
  const tokens = useTokenPayment({
    appId: APP_ID,
    productId: PRODUCT_ID,
    ...wallet,
  });
  const payment = usePayment({
    appId: APP_ID,
    productId: PRODUCT_ID,
    ...wallet,
    tokenAddress: tokens.selectedToken,
  });
  const { isActive } = useSessionStatus({ appId: APP_ID, productId: PRODUCT_ID, ...wallet });
  if (isActive) return <p>Pro is active</p>;

  return (
    <DropdownBuyButton
      stablecoins={tokens.stablecoins}
      selectedToken={tokens.selectedToken}
      onSelect={tokens.setSelectedToken}
      needsApproval={tokens.needsApproval}
      onApprove={tokens.approve}
      approving={tokens.approving}
      onBuy={payment.executePayment}
      loading={payment.loading}
    />
  );
}