CCAvenuePayKit

Custom-owned, secure and fully customizable React + TypeScript SDK for connecting a frontend app with your backend-powered CCAvenue payment flow.

Built by Pradeep Kumar Sheoran (Developer) at BSG Technologies.

Official website: https://bsgtechnologies.com
Contact / WhatsApp: +91-8595147850

CCAvenuePayKit is an unofficial integration SDK. Merchant ID, Access Code, Working Key, encryption and final verification must stay on your backend.

Quickstart

npm install ccavenuepaykit

import { AvenuePayButton, AvenueStartProvider } from "ccavenuepaykit";

export function CheckoutPage() {
  return (
    <AvenueStartProvider
      config={{
        environment: "sandbox",
        createOrderUrl: "/api/payments/ccavenue/create-order",
        verifyPaymentUrl: "/api/payments/ccavenue/verify",
        statusUrl: "/api/payments/ccavenue/status",
        mode: "redirect",
        autoVerify: true,
        timeout: 30000,
      }}
    >
      <AvenuePayButton
        payment={{
          orderId: "ORDER_1001",
          amount: 1500,
          currency: "INR",
          customer: {
            name: "Pradeep Kumar",
            email: "[email protected]",
            phone: "9999999999",
          },
          metadata: {
            applicationId: 16871,
            source: "web-checkout",
          },
        }}
        onSuccess={(response) => console.log("success", response)}
        onFailure={(response) => console.log("failed", response)}
        onCancel={(response) => console.log("cancelled", response)}
        onPending={(response) => console.log("pending", response)}
        onError={(error) => console.log("error", error)}
      >
        Pay with CCAvenue
      </AvenuePayButton>
    </AvenueStartProvider>
  );
}

How It Connects

1. React calls your backend createOrderUrl.
2. Your backend validates order ownership and amount from your database.
3. Your backend encrypts CCAvenue merchant data with the Working Key.
4. The SDK opens checkout with redirect, popup, iframe or form-submit mode.
5. CCAvenue posts encrypted response to your backend callback URL.
6. Your backend decrypts, verifies, stores and returns a normalized response.
7. React receives a clean success, failed, cancelled, pending or error response.

See the complete wiring in docs/IMPLEMENTATION_GUIDE.md and docs/LIVE_DEMO.md.

Features

• React provider, hook and customizable payment button.
• Framework-independent core client for custom UI flows.
• Redirect, popup, iframe and form-submit checkout modes.
• Auto verify, manual verify, status polling, timeout and cancellation support.
• Flexible input normalization for different order/customer naming styles.
• Normalized gateway responses for frontend and backend consistency.
• Event emitter for lifecycle monitoring and analytics hooks.
• Custom headers, metadata, debug logging and render-prop button UI.
• Secret-key guardrails to stop accidental frontend leakage.
• ESM, CJS and TypeScript declaration builds.
• Zero runtime dependencies beyond React peer dependencies.
• Compatible with React 18 and React 19.

Full list: FEATURES.md

Customization

Use your own UI, labels, mode, headers, metadata, callbacks and verification strategy.

<AvenuePayButton
  className="primary-pay-button"
  loadingText="Opening secure payment..."
  successText="Payment received"
  failureText="Retry payment"
  payment={payment}
>
  {({ loading, start, error }) => (
    <button disabled={loading} onClick={start}>
      {loading ? "Please wait" : error ? "Try again" : "Pay now"}
    </button>
  )}
</AvenuePayButton>

More options: docs/CUSTOMIZATION.md

Backend

Frontend code should never contain CCAvenue secrets.

CCAVENUE_MERCHANT_ID=
CCAVENUE_ACCESS_CODE=
CCAVENUE_WORKING_KEY=
CCAVENUE_ENV=sandbox
CCAVENUE_REDIRECT_URL=
CCAVENUE_CANCEL_URL=

Examples:

• examples/full-integration.example.tsx
• examples/basic-button.example.tsx
• examples/hook.example.tsx
• examples/custom-button.example.tsx
• examples/backend-node.example.ts
• examples/backend-nestjs.example.ts

Responses

All payment results use one normalized response family:

type AvenuePaymentStatus = "success" | "failed" | "cancelled" | "pending" | "error";

Detailed payloads and examples are in docs/RESPONSE_GUIDE.md.

Donation

If this SDK saves your time, you can support development through UPI.

UPI mobile number: +91-8595147850
Name: Pradeep Kumar Sheoran

More details: DONATION.md

Publish Checks

npm run typecheck
npm run build
npm run pack:dry

Professional Links

• Official website: https://bsgtechnologies.com
• Visit here to meet, learn, contribute and discuss new topics with us.
• Looking for a job change: React.js, React Native, Android Java, Node.js, TypeScript packages and custom scripts.
• Feature requests and updates: leave a comment on the package repository issue tracker.

Documentation

• FEATURES.md
• docs/IMPLEMENTATION_GUIDE.md
• docs/LIVE_DEMO.md
• docs/CUSTOMIZATION.md
• docs/RESPONSE_GUIDE.md
• docs/KEYWORDS_AND_HASHTAGS.md
• DONATION.md
• COPYRIGHT.md
• CHANGELOG.md

License

MIT License. Copyright (c) 2026 Pradeep Kumar Sheoran, BSG Technologies.