Skip to main content

Installation

@accrupay/react is the frontend checkout SDK. It renders payment fields, manages provider-hosted secure inputs, and submits payments without exposing your API secret.

Install​

npm install @accrupay/react

Peer dependency: React 16.8 or later. Hooks are required.

npm install react react-dom

Named exports​

import {
  AccruPay,        // Provider component — wraps your checkout form
  useAccruPay,     // Hook — exposes state and submitPayment()
  CardholderName,  // Text input for cardholder name
  CardNumber,      // Secure embedded card number field
  CardExpiry,      // Secure embedded expiry field
  CardCVC,         // Secure embedded CVC field
  SubmitButton,    // Button that calls submitPayment on click
} from '@accrupay/react';

How card data flows​

Card field values (number, expiry, CVC) travel directly from the browser to the payment provider. They never pass through your server.

Browser (CardNumber, CardExpiry, CardCVC)
  │
  └─▶ Payment provider (secure tokenization)
         │
         └─▶ AccruPay API (token only) ──▶ Your backend

CardholderName is a standard input — its value is included in the payment submission payload but is not considered sensitive PAN data.

Content Security Policy​

The SDK loads JavaScript from the active payment provider's CDN at runtime. If you set Content-Security-Policy headers, add the provider's origins — otherwise the payment fields load blank with no error.

⬡Required CSP origins
Nuvei
script-src 'self' https://cdn.safecharge.com;
frame-src  'self' https://cdn.safecharge.com;

SafeCharge.js renders the 3DS challenge UI as an iframe from the same origin.

Stripe
script-src 'self' https://js.stripe.com;
frame-src  'self' https://js.stripe.com;
connect-src 'self' https://api.stripe.com;

Stripe.js makes browser-side API calls to api.stripe.com — include connect-src or payment confirmations will fail silently.

Other providers

Each payment provider loads its JavaScript SDK from its own CDN. Consult your provider's integration documentation for the exact script-src, frame-src, and connect-src origins to allowlist. A missing entry causes the payment form to render blank with no customer-visible error.

tip

Missing CSP entries cause the payment fields to render blank with no console error visible to the customer. Always test your checkout in an environment that matches your production CSP headers.

Next steps​