{"_id":"@accrupay/react","_rev":"2-6baaa6624cc80ffc207f90ca7cc491d1","name":"@accrupay/react","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.1":{"name":"@accrupay/react","version":"0.0.1","keywords":["accru","accrupay","payment","react","graphql","nuvei"],"author":{"name":"Luiz Felipe Laviola","email":"luiz@laviola.dev"},"license":"MIT","_id":"@accrupay/react@0.0.1","maintainers":[{"name":"luizfelipelaviola","email":"luiz@laviola.dev"},{"name":"justinfyc","email":"justin@fyclabs.com"},{"name":"aaronfyc","email":"aaron@fyclabs.com"}],"homepage":"https://accru.co","bugs":{"url":"https://github.com/accruteam/sdk-accrupay-react/issues"},"dist":{"shasum":"a510cd9d7c666a9afcb2ed84198b8700a391362e","tarball":"https://registry.npmjs.org/@accrupay/react/-/react-0.0.1.tgz","fileCount":9,"integrity":"sha512-lT08n6FyvcS6+UpoMYT6HiSxvOw0suNVp9QIe4zTyrADhWoBXtq3XSm7Udq2mX2vfxIRYqtFj6HVFbUlbRiELg==","signatures":[{"sig":"MEQCIERD1niL9iqHLLys6lmTwzc2EdFsfUWptTs9nn0ahWr0AiBuZhbaF9irZTPjBCvtW7JCUoDhgFiZzUmFAg7TB1ZLOg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7572705},"main":"./dist/index.cjs.js","type":"module","types":"./dist/index.d.ts","unpkg":"./dist/index.umd.js","module":"./dist/index.mjs","engines":{"node":">=18"},"exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"gitHead":"ce0e1fb771f1eac9c323a416097c9cf24ce5ff67","private":false,"scripts":{"dev":"tsup --watch","lint":"tsc --noEmit && eslint . --fix","build":"tsup","clean":"rm -rf dist node_modules","codegen":"graphql-codegen","codegen:watch":"graphql-codegen -w"},"_npmUser":{"name":"luizfelipelaviola","email":"luiz@laviola.dev"},"jsdelivr":"./dist/index.umd.js","repository":{"url":"git+https://github.com/accruteam/sdk-accrupay-react.git","type":"git"},"_npmVersion":"11.6.1","description":"AccruPay React SDK – Payment router platform for React applications","directories":{},"sideEffects":false,"_nodeVersion":"24.11.0","dependencies":{"rxjs":"^7.8.2","graphql":"^16.12.0","@apollo/client":"^4.0.4","graphql-scalars":"^1.24.2","apollo-link-scalars":"^4.0.3"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.1.1","dotenv":"^17.2.2","react-dom":"^19.1.1","typescript":"^5.8.3","@types/node":"^24.3.1","@types/react":"^19.1.10","@types/react-dom":"^19.1.7","@graphql-codegen/cli":"^6.0.0","@graphql-codegen/schema-ast":"^5.0.0","@graphql-codegen/client-preset":"^5.0.0","@graphql-codegen/introspection":"^5.0.0"},"peerDependencies":{"react":">=16.8 <21","react-dom":">=16.8 <21"},"_npmOperationalInternal":{"tmp":"tmp/react_0.0.1_1765214796651_0.43487556960442864","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@accrupay/react","private":false,"version":"0.1.0","description":"AccruPay React SDK – Payment router platform for React applications","license":"MIT","author":{"name":"Luiz Felipe Laviola","email":"luiz@laviola.dev"},"homepage":"https://accru.co","repository":{"type":"git","url":"git+https://github.com/accruteam/sdk-accrupay-react.git"},"bugs":{"url":"https://github.com/accruteam/sdk-accrupay-react/issues"},"keywords":["accru","accrupay","payment","react","graphql","nuvei","stripe"],"type":"module","main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","unpkg":"./dist/index.global.js","jsdelivr":"./dist/index.global.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./package.json":"./package.json"},"sideEffects":false,"engines":{"node":">=18"},"scripts":{"build":"tsup","dev":"tsup --watch","start":"./scripts/run.sh","lint":"tsc --noEmit && eslint . --fix","codegen":"graphql-codegen","codegen:update":"graphql-codegen && yalc publish","codegen:watch":"graphql-codegen -w","yalc:publish":"yarn build && yalc publish","yalc:push":"yarn build && yalc push","clean":"rm -rf dist node_modules","changeset":"changeset","version-packages":"changeset version","release":"yarn build && changeset publish","prepare":"husky"},"dependencies":{"@apollo/client":"^4.1.6","@stripe/react-stripe-js":"^5.6.1","@stripe/stripe-js":"^8.11.0","apollo-link-scalars":"^4.0.3","graphql":"^16.12.0","graphql-scalars":"^1.24.2","rxjs":"^7.8.2"},"peerDependencies":{"react":">=16.8 <21","react-dom":">=16.8 <21"},"devDependencies":{"@changesets/cli":"^2.30.0","@commitlint/cli":"^20.5.0","@commitlint/config-conventional":"^20.5.0","@eslint/js":"^10.0.1","@graphql-codegen/cli":"^6.2.1","@graphql-codegen/client-preset":"^5.2.4","@graphql-codegen/introspection":"^5.0.1","@graphql-codegen/schema-ast":"^5.0.1","@types/node":"^25.5.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","commitizen":"^4.3.0","cz-conventional-changelog":"^3.3.0","dotenv":"^17.3.1","eslint":"^10.1.0","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.5","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.5.2","globals":"^17.4.0","husky":"^9.1.6","lint-staged":"^16.4.0","prettier":"^3.8.1","react":"^19.2.4","react-dom":"^19.2.4","slackify-markdown":"^5.0.0","tsup":"^8.5.1","typescript":"~5.9.3","typescript-eslint":"^8.57.1","yalc":"^1.0.0-pre.53"},"lint-staged":{"**/*.{ts,tsx}":["eslint --fix"]},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"commitlint":{"extends":["@commitlint/config-conventional"]},"gitHead":"7dbd58fed1af4be2d827cacc2688920867a7144f","_id":"@accrupay/react@0.1.0","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-JxR3xFK505X5N4jgZFs5FTX8rgQPgc7P+zrKq4m2qmDydrPdvIHnT9I97Mxrsn8usUcmZq+r7S8n2r6CoWSFQQ==","shasum":"93793ce9c4ded4c600d2a8d5f546dab09e520a51","tarball":"https://registry.npmjs.org/@accrupay/react/-/react-0.1.0.tgz","fileCount":11,"unpackedSize":8267269,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCeDox15GZebfywvKBxCVmI8u30PHf0rxohJGK3YUEL0QIgLcHORE38TxH4RoqQJhtlc7j6m/7dK+9f57/PsSPqx18="}]},"_npmUser":{"name":"luizfelipelaviola","email":"luiz@laviola.dev"},"directories":{},"maintainers":[{"name":"luizfelipelaviola","email":"luiz@laviola.dev"},{"name":"justinfyc","email":"justin@fyclabs.com"},{"name":"aaronfyc","email":"aaron@fyclabs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.1.0_1774645778606_0.6134830198166414"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-08T17:26:36.466Z","modified":"2026-03-27T21:09:38.999Z","0.0.1":"2025-12-08T17:26:36.882Z","0.1.0":"2026-03-27T21:09:38.826Z"},"bugs":{"url":"https://github.com/accruteam/sdk-accrupay-react/issues"},"author":{"name":"Luiz Felipe Laviola","email":"luiz@laviola.dev"},"license":"MIT","homepage":"https://accru.co","keywords":["accru","accrupay","payment","react","graphql","nuvei","stripe"],"repository":{"type":"git","url":"git+https://github.com/accruteam/sdk-accrupay-react.git"},"description":"AccruPay React SDK – Payment router platform for React applications","maintainers":[{"name":"luizfelipelaviola","email":"luiz@laviola.dev"},{"name":"justinfyc","email":"justin@fyclabs.com"},{"name":"aaronfyc","email":"aaron@fyclabs.com"}],"readme":"# AccruPay React SDK\n\nReact SDK for loading an AccruPay transaction session, rendering provider-aware payment fields, and submitting payments from React apps.\n\n## Install\n\n```bash\nnpm install @accrupay/react react react-dom\n```\n\n## Quick start\n\n```tsx\nimport {\n  AccruPay,\n  CardholderName,\n  CardNumber,\n  CardExpiry,\n  CardCVC,\n  SubmitButton,\n  useAccruPay,\n} from '@accrupay/react';\n\nexport function PaymentPage() {\n  return (\n    <AccruPay\n      merchantPublicId=\"merchant_public_id\"\n      transactionSessionId=\"client_session_id\"\n      environment=\"sandbox\"\n    >\n      <PaymentForm />\n    </AccruPay>\n  );\n}\n\nfunction PaymentForm() {\n  const { isReady, isProcessing, error } = useAccruPay();\n\n  return (\n    <form>\n      <CardholderName placeholder=\"Name on card\" />\n      <CardNumber />\n      <CardExpiry />\n      <CardCVC />\n\n      {error && <div role=\"alert\">{error}</div>}\n\n      <SubmitButton disabled={!isReady || isProcessing}>\n        {isProcessing ? 'Processing...' : 'Pay now'}\n      </SubmitButton>\n    </form>\n  );\n}\n```\n\n## Public API\n\n### Components\n\n- `AccruPay`\n- `CardholderName`\n- `CardNumber`\n- `CardExpiry`\n- `CardCVC`\n- `SubmitButton`\n\n### Hook\n\n- `useAccruPay()`\n\n### Types\n\n- `AccruPayParams`\n- `AccruPayContextValue`\n- `AccruPayRef`\n- generated GraphQL types re-exported from `@accrupay/react`\n\n## AccruPay\n\n```ts\ntype AccruPayParams = {\n  merchantPublicId: string;\n  transactionSessionId?: string | null;\n  preloadProvider?: TRANSACTION_PROVIDER | null;\n  environment?: 'production' | 'sandbox' | null;\n  url?: string | null;\n  children: ReactNode;\n};\n```\n\nUse one of these modes:\n\n- `transactionSessionId`\n  Use this when your backend already created a client transaction session.\n- `preloadProvider`\n  Use this when you want to preload provider config without loading a session yet.\n\n## Submission modes\n\nAll submission modes call the same provider submit path. The difference is where the trigger lives.\n\n### 1. Direct submit with `SubmitButton`\n\nUse this by default when the submit trigger is inside the payment form.\n\n```tsx\n<SubmitButton onSuccess={(result) => console.log(result)}>\n  Pay now\n</SubmitButton>\n```\n\n### 2. Hook submit with `useAccruPay().submitPayment`\n\nUse this when you need a custom trigger inside the `<AccruPay>` tree.\n\n```tsx\nfunction CustomSubmitButton() {\n  const { submitPayment, isReady, isProcessing } = useAccruPay();\n\n  const handleClick = async () => {\n    if (!isReady || isProcessing) return;\n    await submitPayment();\n  };\n\n  return <button onClick={handleClick}>Submit payment</button>;\n}\n```\n\n### 3. Ref submit with `AccruPayRef`\n\nUse this when the trigger must live outside the `<AccruPay>` children.\n\n```tsx\nimport { useRef } from 'react';\nimport { AccruPay, type AccruPayRef } from '@accrupay/react';\n\nfunction Page() {\n  const accruPayRef = useRef<AccruPayRef>(null);\n\n  return (\n    <>\n      <AccruPay\n        ref={accruPayRef}\n        merchantPublicId=\"merchant_public_id\"\n        transactionSessionId=\"client_session_id\"\n      >\n        <PaymentForm />\n      </AccruPay>\n\n      <button onClick={() => accruPayRef.current?.submitPayment()}>\n        Submit from outside\n      </button>\n    </>\n  );\n}\n```\n\nRecommendation:\n\n- use `SubmitButton` by default\n- use the hook for custom in-tree UI\n- use the ref only when you need imperative external control\n\n## Submit params\n\nThe SDK supports extra submit-time data through:\n\n```ts\ntype AccruPayTransactionSubmitParams = {\n  billing?: BillingDataSchema;\n};\n```\n\nYou can pass submit params through:\n\n- `submitParams` on `SubmitButton`\n- `submitPayment(params)` from `useAccruPay()`\n- `submitPayment(params)` from `AccruPayRef`\n\nExample:\n\n```tsx\nconst submitParams = {\n  billing: {\n    billingFirstName: 'John',\n    billingLastName: 'Doe',\n    billingEmail: 'john@example.com',\n    billingAddressCountry: 'US',\n    billingAddressLine1: '123 Main St',\n    billingAddressCity: 'New York',\n    billingAddressState: 'NY',\n    billingAddressPostalCode: '10001',\n  },\n};\n\n<SubmitButton submitParams={submitParams}>Pay now</SubmitButton>;\n```\n\nSubmit params affect what is sent to the provider during submission. They do not mutate the loaded transaction session.\n\n## Environments\n\n- `production`\n  Uses `https://api.pay.accru.co/graphql`\n- `sandbox`\n  Uses `https://api.qa.pay.accru.co/graphql`\n\nYou can also override the endpoint with the `url` prop.\n\n## Integration with `@accrupay/node`\n\nTypical server/client flow:\n\n1. Backend creates a client transaction session with `@accrupay/node`\n2. Frontend loads that `transactionSessionId` into `<AccruPay>`\n3. Frontend submits card data\n4. Backend verifies the session result\n\nExample server-side session creation:\n\n```ts\nimport AccruPay, {\n  COUNTRY_ISO_2,\n  CURRENCY,\n  TRANSACTION_PROVIDER,\n} from '@accrupay/node';\n\nconst sdk = new AccruPay({\n  apiSecret: process.env.ACCRUPAY_API_SECRET!,\n  environment: 'production',\n});\n\nconst session = await sdk.transactions.clientSessions.payments.start({\n  transactionProvider: TRANSACTION_PROVIDER.NUVEI,\n  data: {\n    amount: 10000n,\n    currency: CURRENCY.USD,\n    merchantInternalCustomerCode: 'customer-123',\n    merchantInternalTransactionCode: 'txn-456',\n    billing: {\n      billingFirstName: 'John',\n      billingLastName: 'Doe',\n      billingEmail: 'john@example.com',\n      billingAddressCountry: COUNTRY_ISO_2.US,\n      billingAddressLine1: '123 Main St',\n      billingAddressCity: 'New York',\n      billingAddressState: 'NY',\n      billingAddressPostalCode: '10001',\n    },\n    storePaymentMethod: false,\n  },\n});\n```\n\n## Error handling\n\nThe SDK exposes:\n\n- `error` from `useAccruPay()`\n- `onError` on `SubmitButton`\n- rejected promises from `submitPayment(...)`\n\nCommon runtime errors:\n\n- `Merchant identifier not provided`\n- `Transaction session ID or provider must be provided`\n- `Payment provider not ready`\n- `Session or client secret not available`\n- provider-specific payment errors returned during submission\n\n## Requirements\n\n- React `>=16.8 <21`\n- React DOM `>=16.8 <21`\n- Node `>=18` for package development/build\n\n## Related package\n\n- `@accrupay/node`\n\n## License\n\nMIT\n","readmeFilename":"README.md"}