Setup

prerequisites & installation prerequisites please reach out directly to someone at jetpay if you are interested in using the payment iframe, as there is additional configuration that must be set up for you before you begin, ensure you have a jetpay account with api access if not, please follow the instructions in the getting started node js and npm/yarn/pnpm installed basic familiarity with javascript/typescript an active jetpay api token obtaining your api token step 1 access jetpay dashboard log in to your jetpay dashboard navigate to settings → integration → create token generate and securely store your api token add the token to your environment variables as api token step 2 environment configuration create a env file in your project root \# jetpay api configuration api token=your jetpay api token here external api base url=https //api jetpay com bank account=your bank account identifier \# for vite projects, use vite prefix vite api token=your jetpay api token here vite external api base url=https //api jetpay com vite bank account=your bank account identifier security note never commit api tokens to version control always use environment variables for sensitive configuration installation required dependencies install the necessary packages for making api requests \# using npm npm install axios nanoid \# using yarn yarn add axios nanoid \# using pnpm pnpm add axios nanoid package overview package purpose required axios http client for api requests ✅ yes nanoid generate unique identifiers ⚠️ optional note the nanoid package is optional but recommended for generating unique identifiers when customer data isn't immediately available if you already have unique user/customer ids, you can skip this dependency typescript support if you're using typescript, you may want to install type definitions \# type definitions (optional) npm install save dev @types/node \# for react projects npm install save dev @types/react @types/react dom project structure organize your jetpay integration files in a logical structure src/ ├── data/ │ └── create iframe link ts # main integration function ├── components/ │ └── paymentcomponent tsx # payment ui component ├── types/ │ └── jetpay ts # typescript interfaces └── utils/ └── api client ts # axios configuration verification test api connection create a simple test to verify your api token works import axios from "axios"; // quick api test async function testconnection() { try { const response = await axios get("/health", { headers { authorization `bearer ${process env api token}`, "content type" "application/json", }, }); console log("✅ api connection successful"); return true; } catch (error) { console error("❌ api connection failed ", error); return false; } } environment check verify your environment variables are loaded correctly // environment validation function validateenvironment() { const required = \["api token", "external api base url", "bank account"]; const missing = required filter((key) => !process env\[key]); if (missing length > 0) { console error("missing environment variables ", missing); return false; } console log("✅ environment configuration valid"); return true; } next steps now that you have everything set up, you're ready to implement the core integration continue to docid\ ijsfua5zwmlv65j9qqjyf >