Card+ Pay SDK

Installation

To install Card+ Pay, run the following command in your project directory:

npm install @cardware/cardplus-pay

Configuration

Before using Card+ Pay, you need to set up your account and obtain an API key from the Card+ Pay dashboard. Once you have your API key, you can configure the library in your application.

Usage

CardplusPayProvider

Wrap your application or the component tree that needs access to Card+ Pay with the CardplusPayProvider:

import { CardplusPayProvider } from "@cardware/cardplus-pay";
 
function App() {
  return (
    <CardplusPayProvider apiKey={process.env.REACT_APP_CARDPLUS_PAY_API_KEY}>
      {/* Your app components */}
    </CardplusPayProvider>
  );
}

useCardplusPay Hook

Use the useCardplusPay hook to initialize a payment and get the necessary data:

import { useCardplusPay } from "@cardware/cardplus-pay";
 
function PaymentComponent() {
  const { token, status, error } = useCardplusPay({
    payment_mode: "qr_code",
    amount: 1000, // Amount in cents
    currency: "USD",
    description: "Purchase of Product XYZ",
  });
 
  // Use token, status, and error in your component
}

QRCodePayment Component

To display a QR code for payment:

import { QRCodePayment } from "@cardware/cardplus-pay";
 
function QRPaymentComponent({ token }) {
  return (
    <QRCodePayment
      token={token}
      callbackUrl="/payment-complete"
      onSuccess={(result) => console.log("Payment successful", result)}
      onError={(error) => console.error("Payment failed", error)}
    />
  );
}

CreditCardPayment Component

To display a credit card payment form:

import { CreditCardPayment } from "@cardware/cardplus-pay";
 
function CreditCardComponent({ token }) {
  return (
    <CreditCardPayment
      token={token}
      onSuccess={(result) => console.log("Payment successful", result)}
      onError={(error) => console.error("Payment failed", error)}
    />
  );
}

Webhooks

Card+ Pay uses webhooks to notify your server about events that happen in your account. You'll need to set up a webhook endpoint in your server to receive these notifications.

To configure webhooks:

1. Go to the Card+ Pay dashboard
2. Navigate to the Webhooks section
3. Add a new webhook endpoint URL
4. Select the events you want to receive notifications for

Error Handling

Card+ Pay throws errors in various situations. It's important to handle these errors gracefully in your application. Here are some common error scenarios:

• Invalid API key
• Insufficient funds
• Invalid payment information
• Network errors

Always wrap your Card+ Pay API calls in try-catch blocks and display appropriate error messages to your users.

Security Considerations

• Never expose your API key on the client-side. Always use environment variables to store sensitive information.
• Use HTTPS for all communications.
• Validate and sanitize all user inputs before sending them to the Card+ Pay API.
• Implement proper authentication and authorization in your application.

Troubleshooting

If you encounter any issues while integrating Card+ Pay, please check the following:

1. Ensure you're using the latest version of the library.
2. Double-check your API key and make sure it's valid.
3. Check the Card+ Pay status page for any ongoing service issues.
4. Review the error messages and stack traces for clues about what might be going wrong.