{"_id":"@butterpayments/butter-vaulting-react","name":"@butterpayments/butter-vaulting-react","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@butterpayments/butter-vaulting-react","private":false,"version":"1.0.0","type":"module","main":"dist/index.cjs.js","module":"dist/index.es.js","types":"dist/index.d.ts","dependencies":{"@basis-theory/basis-theory-react":"^1.15.0","jotai":"^2.6.4","react":"^18.2.0","react-dom":"^18.2.0"},"exports":{".":{"require":"./dist/index.cjs.js","import":"./dist/index.es.js"}},"sideEffects":false,"devDependencies":{"@types/node":"^20.11.16","@types/react":"^18.2.43","@types/react-dom":"^18.2.17","@typescript-eslint/eslint-plugin":"^6.14.0","@typescript-eslint/parser":"^6.14.0","@vitejs/plugin-react":"^4.2.1","eslint":"^8.55.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.5","typescript":"^5.2.2","vite":"^5.0.8"},"peerDependencies":{"react":"^16.8.0"},"scripts":{"dev":"vite","build":"tsc && vite build","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview"},"description":"","_id":"@butterpayments/butter-vaulting-react@1.0.0","_integrity":"sha512-+ljMAQ7/Cpmjm+ooOrW2/k90uVEjK6dMZmiIH8ZZD5gXzZ02Q9f3TOLLRoO2D4Qilh7UHyTY15+TrmdCU9PHAA==","_resolved":"/private/var/folders/hn/h7d8s21j3nn9q_22dy_2lx600000gq/T/15d2170ddd4368e72b2fd59e5f0c59d8/butterpayments-butter-vaulting-react-1.0.0.tgz","_from":"file:butterpayments-butter-vaulting-react-1.0.0.tgz","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-+ljMAQ7/Cpmjm+ooOrW2/k90uVEjK6dMZmiIH8ZZD5gXzZ02Q9f3TOLLRoO2D4Qilh7UHyTY15+TrmdCU9PHAA==","shasum":"ef3350cfb61abe642bfc8058c52cd59b471b27d3","tarball":"https://registry.npmjs.org/@butterpayments/butter-vaulting-react/-/butter-vaulting-react-1.0.0.tgz","fileCount":6,"unpackedSize":181934,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA3f31mr/jOYw2xwMPunMVclM8OCYyAkPsJSQY2HEOTNAiEAoEXbV0MUV6Oihiy03smkQm2kGjQmr88b5k6RrcKAe4U="}]},"_npmUser":{"name":"asmith-butter","email":"asmith@butterpayments.com"},"directories":{},"maintainers":[{"name":"asmith-butter","email":"asmith@butterpayments.com"},{"name":"butter_8080","email":"kperko@butterpayments.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/butter-vaulting-react_1.0.0_1708720147362_0.5201828501280117"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-23T20:29:07.361Z","1.0.0":"2024-02-23T20:29:07.518Z","modified":"2024-02-23T20:29:08.143Z"},"maintainers":[{"name":"asmith-butter","email":"asmith@butterpayments.com"},{"name":"butter_8080","email":"kperko@butterpayments.com"}],"readme":"# Butter Vaulting React\n\n\nA set of React components to integrate Butter Payments vaulting without interrupting the payment flow. \n\n## Installation\n\nUsing [Node Package Manager](https://docs.npmjs.com/)\n\n```sh\nnpm install --save @butter-payments/butter-vaulting-react\n```\n\nUsing [Yarn](https://classic.yarnpkg.com/en/docs/)\n\n```sh\nyarn add @butter-payments/butter-vaulting-react\n```\n\n## Usage\nSimply use the ButterForm component and the CardElement component to get your Stripe payment method. You will be able to grab the Stripe payment method from the onSubmit hook.\n\n\n### ButterForm\n#### Properties\n\n|Property|Required|Type|Description|\n|--------|--------|----|------------|\n|merchantKey|true|string| The merchant key provided by Butter|\n|sourceId|true|string|The sourceId provided by Butter|\n|style|false|object|React style object for inline styling|\n|className|false|string|Classnames to be passed onto the form|\n\nRequires a button component with type submit to trigger the form submission.\n\n\n### Example \n\n```jsx\nimport {\n  ButterForm,\n  CardElement,\n} from '@butter-payments/butter-vaulting-react';\n\nconst App = () => {\n  const handleSubmit = (event, paymentMethod) => {\n    // Handle your business logic and continue the payment here with the newly created payment method\n    console.log(paymentMethod);\n  }\n\n  return (\n    <ButterForm merchantKey='xxx' sourceId='xxx' onSubmit={handleSubmit}>\n      <CardElement />\n      <button type=\"submit\">\n        Submit\n      </button>\n    </ButterForm>\n  );\n};\n```\n\n### Styling\nMinimal styling is applied to the components to make it easier to match your branding.\n\n","readmeFilename":"README.md"}