1. Configure payment notifications

Choose how you want to be notified when payments are received. Configure a webhook to receive real-time updates on payment status. This is ideal for automated systems and immediate order fulfillment.
  1. Go to your Webhook Configuration page
  2. Add your endpoint URL
  3. Select the events you want to receive
  4. Save your configuration

Option B: Email notifications

Set up email notifications for manual order processing and simple setups.
  1. Visit the Notification Settings page
  2. Enter your email address
  3. Save your settings

2. Get your merchant wallet address

Your merchant wallet address is where all payments will be sent.
  1. Navigate to the Merchant Configuration page in your dashboard
  2. Copy your Merchant Wallet Address:
0x1234567890123456789012345678901234567890
Keep your wallet address secure and only share it through your payment button implementation.

3. Add the payment button to your website

Choose your preferred implementation method:
Perfect for Next.js applications.
import Link from 'next/link'

export function PayCryptoButton({ usdAmount }: { usdAmount: number }) {
  const merchantWallet = "0x15c12db2334063aefae3b348487aba02d159471b3294065a8f5879dd9e73e24";

  return (
    <Link
      target="_blank"
      rel="noopener noreferrer"
      className="inline-block w-fit transform rounded-xl border-2 border-black bg-white px-6 py-3 text-center text-lg font-semibold text-black shadow-[4px_4px_0px_rgba(251,146,60,1)] transition-all duration-200 ease-in-out hover:-translate-y-1 hover:shadow-[6px_6px_0px_rgba(251,146,60,1)]"
      href={`https://pay.chipipay.com?starknetWallet=${merchantWallet}&usdAmount=${usdAmount}`}
    >
      💰 Pay with Crypto
    </Link>
  );
}
The usdAmount parameter is optional. If you don’t include it, customers can choose how much they want to pay, making it perfect for donations or flexible pricing.

4. Test your integration

Currently, ChipiPay only supports USDC payments on the Starknet network. Make sure your users have USDC tokens in their Starknet wallet.
  1. Click your newly added payment button
  2. You’ll be redirected to pay.chipipay.com
  3. Complete a transaction using USDC on Starknet
  4. Verify you receive the payment notification (webhook or email)

5. Handle webhook notifications

When a payment is successful, you’ll receive a webhook notification with the transaction details.

Webhook payload schema

event
string
required
The event type. Currently only "transaction.sent" is supported.
data
object
required
Container object for the transaction data.

Webhook signature verification

For security, all webhooks include an HMAC signature in the chipi-signature header. You should verify this signature to ensure the webhook is from ChipiPay.
  1. Get your webhook signing secret from your webhook configuration page (it looks like whsec_****)
  2. Create a webhook handler in your Next.js app:
// app/api/webhooks/route.ts
import { createHmac, timingSafeEqual } from 'crypto';
import { NextRequest, NextResponse } from 'next/server';

function verifyWebhookSignature(
  payload: string,
  receivedSignature: string,
  secretKey: string
): boolean {
  try {
    const expectedSignature = createHmac("sha256", secretKey)
      .update(payload)
      .digest("hex");

    // Use timing-safe comparison to prevent timing attacks
    return timingSafeEqual(
      Buffer.from(expectedSignature, "hex"),
      Buffer.from(receivedSignature, "hex")
    );
  } catch (error) {
    return false;
  }
}

export async function POST(request: NextRequest) {
  const payload = await request.text();
  const signature = request.headers.get('chipi-signature');
  const webhookSecret = process.env.CHIPI_WEBHOOK_SECRET!; // Your whsec_**** key

  if (!signature || !verifyWebhookSignature(payload, signature, webhookSecret)) {
    return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
  }

  const event = JSON.parse(payload);

  if (event.event === 'transaction.sent' && event.data.transaction.status === 'SUCCESS') {
    // Handle successful payment
    const transaction = event.data.transaction;
    
    // Update your database, send confirmation emails, fulfill orders, etc.
    console.log(`Payment received: ${transaction.amount} USDC from ${transaction.senderAddress}`);
  }

  return NextResponse.json({ received: true });
}

6. Celebrate

Your integration is now ready for production!