Environments

The SDK connects to different API and iframe domains based on the environment option.

Configuration

const bahn = new Bahn({
  pk: "pk_test_...",
  environment: "sandbox",   // or "production"
});

Environment	Use Case
"sandbox"	Testing and development. Uses .tech domains.
"production"	Live payments. Uses .vn domains.

---

Domain Mapping

The SDK resolves the environment to specific domains at construction time. These are hardcoded — you cannot override them:

Component	Sandbox	Production
Iframe domain	https://bn.cakedigibank.tech/bn-sdk/v2/components	https://bn.cake.vn/bn-sdk/v2/components
API domain	https://bn.cakedigibank.tech	https://bn.cake.vn

Script bundle (CDN): https://bn.cake.vn/bn-sdk/v<version>/index.js — there's only one script host, used for both environments. The environment option you pass to new Bahn() is what controls which iframe/API domains it talks to at runtime, not which script URL you load.

Script Bundle Versioning & Integrity

Each release of the Bahn Web SDK is published to its own path, keyed by the SDK version — e.g. v2.4.0:

https://bn.cake.vn/bn-sdk/v2.4.0/index.js

A file never changes once published under a given version, so pin the exact version you tested against rather than a moving alias. Every bundle ships with a sibling Subresource Integrity hash at index.js.sha384:

https://bn.cake.vn/bn-sdk/v2.4.0/index.js.sha384

Use it with the integrity + crossorigin attributes so the browser verifies the file hasn't been altered in transit:

<script
  src="https://bn.cake.vn/bn-sdk/v2.4.0/index.js"
  integrity="sha384-jBbonUZLgKU82F+X/ITqcmeInXYYwZYdmCDoPFX8wkWL9dCkeUHyi0Fs1EUnkeDS"
  crossorigin="anonymous"
></script>

Note: crossorigin="anonymous" makes this a CORS request — the response must include an Access-Control-Allow-Origin header for the browser to allow the script to run. Confirm this is enabled on the hosting domain before relying on integrity in production.

The same iframe domain serves:

• Card input iframes (card-number-iframe.html, expiry-iframe.html, cvc-iframe.html)
• QR iframe (qr-iframe.html)
• 3DS iframe (3ds.html)

The API domain serves:

• POST /bn/sdk/payment_intents/confirm
• POST /bn/sdk/confirmation_token
• Payment intent retrieval and polling

---

SDKEnvironment Type

type SDKEnvironment = "sandbox" | "production";

---

Testing vs Production

Sandbox

Use "sandbox" for development and testing:

• All API calls go to the sandbox environment
• No real payments are processed
• Use the sandbox test cards below
• 3DS challenges use the sandbox ACS

const bahn = new Bahn({
  pk: "pk_test_abc123",
  environment: "sandbox",
});

Production

Use "production" for live payments:

• All API calls go to the production environment
• Real payments are processed
• 3DS challenges use the production ACS

const bahn = new Bahn({
  pk: "pk_live_xyz789",
  environment: "production",
});

---

Sandbox Test Cards

Use these cards with environment: "sandbox" and a sandbox publishable key. They are rejected in production.

Brand	Card number	Expiry	CVC
Visa	4229 9899 9900 0012	12/31	871
Mastercard	5204 5001 3000 0005	12/35	112

Whether a sandbox payment is frictionless, challenged, or declined by 3DS depends on the amount, not the card. See the sandbox 3DS thresholds on the 3DS page to test all three outcomes.

---

Content Security Policy

If your checkout page sends a Content-Security-Policy header, allow the Bahn hosts for the environment you use. The SDK script always loads from https://bn.cake.vn. The iframes and the API run on the environment's own host.

Directive	Sandbox	Production	Why
script-src	https://bn.cake.vn	https://bn.cake.vn	The SDK bundle
frame-src	https://bn.cakedigibank.tech	https://bn.cake.vn	Card, QR, Apple Pay, Google Pay and 3DS iframes
connect-src	https://bn.cakedigibank.tech	https://bn.cake.vn	getConfig(), bahn.applePay.*, and the 3DS outcome update, which the SDK sends from your page

A production policy looks like this:

Content-Security-Policy:
  script-src 'self' https://bn.cake.vn;
  frame-src https://bn.cake.vn;
  connect-src 'self' https://bn.cake.vn

If you call bahn.isGooglePayAvailable(), the SDK also loads Google's https://pay.google.com/gp/p/js/pay.js into your page. Add https://pay.google.com to script-src, and follow Google's own CSP guidance for anything else pay.js needs.

Card data never reaches your page, so you don't need to allow any other Bahn origin. Everything else, such as the Apple Pay script, reCAPTCHA and the 3DS challenge page, runs inside the Bahn iframes.

---

Browser Support

The card, QR and 3DS iframes are built for these browsers and newer:

Browser	Minimum version
Chrome / Edge	111
Firefox	111
Safari (macOS)	13
Safari (iOS / iPadOS)	13

• The SDK bundle targets ES2020.
• On Safari older than 15.4, which has no BroadcastChannel, the card fields fall back to messaging each other directly. You don't need to do anything.
• Wallets have stricter requirements. See Apple Pay → Browser support and Google Pay → Browser support.