Quick Start

From integration to your first test payment in 5 minutes.

1. Create an Account & Get API Keys

Sign up at crypax.io/register, log into the dashboard, and go to API Keys to create a key pair. You'll receive a publishable key (pk_live_) and a secret key (sk_live_). Secret keys are only shown once — save them securely.

2. Install SDK

Choose your platform and install the corresponding package.

$ npm install @crypax/react @crypax/node

3. Create a Payment (Server-side)

Use your secret key on the server to create a payment. The response includes a <code>clientSecret</code> — pass it securely to your frontend.

server.ts

import { Crypax } from '@crypax/node';

const crypax = new Crypax('sk_live_...');

// Create a payment
const payment = await crypax.payments.create({
  amount: '10.00',
  chainId: 41956,
  currency: 'native',
  description: 'Pro Plan',
});

// Send payment.clientSecret to frontend
// payment.clientSecret = "cs_live_..."

QR mode — skip wallet selection and show QR code directly:

const payment = await crypax.payments.create({
  amount: '10.00',
  chainId: 41956,
  qrMode: true, // Skip wallet selection, show QR directly
});

4. Confirm Payment (Client-side)

Use the <code>clientSecret</code> from your server to open the payment modal and let the user confirm with their wallet.

App.tsx

import { CrypaxProvider, CheckoutButton } from '@crypax/react';

function App({ clientSecret }: { clientSecret: string }) {
  return (
    <CrypaxProvider publishableKey="pk_live_...">
      <CheckoutButton
        clientSecret={clientSecret}
        onSuccess={(result) => console.log('Paid!', result.txHash)}
        onCancel={() => console.log('Cancelled')}
        onError={(err) => console.error(err)}
      >
        Pay Now
      </CheckoutButton>
    </CrypaxProvider>
  );
}

Or use useConfirmPayment for custom UI:

Checkout.tsx

import { CrypaxProvider, useConfirmPayment } from '@crypax/react';

function App() {
  return (
    <CrypaxProvider publishableKey="pk_live_...">
      <Checkout />
    </CrypaxProvider>
  );
}

function Checkout() {
  const { confirmPayment, status } = useConfirmPayment();

  const handlePay = async () => {
    const result = await confirmPayment('cs_live_...');
    if (result.status === 'confirmed') {
      console.log('Payment confirmed!', result.txHash);
    }
  };

  return (
    <button onClick={handlePay} disabled={status !== 'idle'}>
      {status === 'idle' ? 'Pay 10 PLM' : status}
    </button>
  );
}

5. Handle Webhooks

Set up a webhook endpoint to receive real-time events when payment status changes. Always verify the signature to ensure authenticity.

webhooks.ts

import { Crypax } from '@crypax/node';
import express from 'express';

const app = express();
const crypax = new Crypax('sk_live_...');

app.post('/webhooks/crypax', express.raw({ type: 'application/json' }), (req, res) => {
  const signature = req.headers['x-crypax-signature'] as string;

  try {
    const event = crypax.webhooks.constructEvent(
      req.body,           // raw body string
      signature,
      'whsec_...',        // webhook signing secret
    );

    switch (event.type) {
      case 'payment.confirmed':
        // Handle confirmed payment
        console.log('Payment confirmed:', event.data.id);
        break;
      case 'payment.expired':
        console.log('Payment expired:', event.data.id);
        break;
    }

    res.json({ received: true });
  } catch (err) {
    res.status(400).json({ error: 'Invalid signature' });
  }
});

6. Test Your Integration

Use chainId 419561 (Plumise Testnet) during development. Create payments with chainId: 419561 and test with testnet funds. Switch to chainId: 41956 (Plumise Mainnet) when going live.

Overview →React SDK Reference →API Reference →