Environments

@accrupay/react supports two environments: production (default) and sandbox. The environment controls which AccruPay API endpoint the SDK calls and which mode the payment provider SDK runs in.

environment prop

Value	Description
'production'	(default) Live AccruPay API. Real payment provider in production mode.
'sandbox'	AccruPay sandbox API. Payment provider in test mode — no real charges.

<AccruPay
  merchantPublicId={process.env.NEXT_PUBLIC_ACCRUPAY_MERCHANT_ID!}
  transactionSessionId={sessionId}
  environment="sandbox"
>
  <CheckoutForm />
</AccruPay>

Deriving from an environment variable

Set the environment based on a build-time variable so your staging and production deployments use the correct environment automatically:

const accruPayEnv =
  process.env.NEXT_PUBLIC_ACCRUPAY_ENV === 'sandbox' ? 'sandbox' : 'production';

<AccruPay
  merchantPublicId={process.env.NEXT_PUBLIC_ACCRUPAY_MERCHANT_ID!}
  transactionSessionId={sessionId}
  environment={accruPayEnv}
>
  <CheckoutForm />
</AccruPay>

Environments must match end-to-end

The environment you pass to <AccruPay> must match the environment used by your backend. A session created in sandbox cannot be submitted or verified in production, and vice versa.

Backend	React SDK	Result
sandbox	environment="sandbox"	Correct — test flow
production	environment="production" (or omitted)	Correct — live flow
sandbox	environment="production"	Session not found / verification failure
production	environment="sandbox"	Session not found / verification failure

Sandbox behavior

In sandbox mode, the payment provider runs in its own test mode. Each provider has a set of test card numbers that trigger specific outcomes (success, decline, 3DS challenge, etc.). Refer to the Provider Integrations section for the test card numbers and sandbox-specific details for each provider.

No real payment is processed in sandbox mode. Use it for:

• Local development
• CI/CD test runs
• QA and staging environments
• Integration testing before going live

url prop — advanced override

The url prop overrides the AccruPay API base URL entirely, bypassing the environment setting. Use this only in exceptional situations such as routing through a proxy or connecting to a self-hosted AccruPay instance.

<AccruPay
  merchantPublicId={merchantId}
  transactionSessionId={sessionId}
  url="https://api.your-proxy.example.com/accrupay"
>
  <CheckoutForm />
</AccruPay>

warning

Setting url overrides environment. Do not set both unless you understand which takes precedence for your deployment.