New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
frames-react
Advanced tools
frames-react - npm Package Compare versions
Comparing version 1.1.2 to 1.2.0
| { | ||
| "name": "frames-react", | ||
| "version": "1.1.2", | ||
| "peerDependencies": { | ||
| "react": ">=16.8" | ||
| }, | ||
| "scripts": { | ||
| "start": "react-scripts start", | ||
| "test": "react-scripts test a", | ||
| "build": "tsc" | ||
| }, | ||
| "eslintConfig": { | ||
| "extends": "react-app" | ||
| }, | ||
| "browserslist": { | ||
| "production": [ | ||
| ">0.2%", | ||
| "not dead", | ||
| "not op_mini all" | ||
| ], | ||
| "development": [ | ||
| "last 1 chrome version", | ||
| "last 1 firefox version", | ||
| "last 1 safari version" | ||
| ] | ||
| }, | ||
| "devDependencies": { | ||
| "@testing-library/jest-dom": "^6.4.2", | ||
| "@testing-library/react": "^14.3.0", | ||
| "@testing-library/user-event": "^14.5.2", | ||
| "@types/node": "^20.12.6", | ||
| "@types/react": "^18.2.75", | ||
| "@types/react-dom": "^18.2.24", | ||
| "classnames": "^2.5.1", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0", | ||
| "react-scripts": "^5.0.1", | ||
| "typescript": "^5.4.4" | ||
| }, | ||
| "dependencies": { | ||
| "classnames": "^2.5.1" | ||
| } | ||
| "name": "frames-react", | ||
| "version": "1.2.0", | ||
| "main": "dist/cjs/index.js", | ||
| "scripts": { | ||
| "build": "rollup -c", | ||
| "test": "jest", | ||
| "dev": "npm run build && rm -rf example/src/dist && cp -R dist example/src/dist && cd example && npm install && npm start" | ||
| }, | ||
| "keywords": [], | ||
| "license": "MIT", | ||
| "description": "", | ||
| "dependencies": { | ||
| "classnames": "^2.5.1", | ||
| "react": "^17.0.0 || ^18.0.0", | ||
| "react-dom": "^17.0.0 || ^18.0.0", | ||
| "tslib": "^2.8.1" | ||
| }, | ||
| "devDependencies": { | ||
| "@rollup/plugin-commonjs": "^28.0.1", | ||
| "@rollup/plugin-node-resolve": "^15.3.0", | ||
| "@rollup/plugin-typescript": "^12.1.1", | ||
| "@testing-library/jest-dom": "^6.6.3", | ||
| "@testing-library/react": "^16.0.1", | ||
| "@types/classnames": "^2.3.4", | ||
| "@types/jest": "^29.5.14", | ||
| "@types/react": "^18.3.12", | ||
| "@types/react-dom": "^18.3.1", | ||
| "jest": "^29.7.0", | ||
| "jest-environment-jsdom": "^29.7.0", | ||
| "rollup": "^2.79.2", | ||
| "rollup-plugin-peer-deps-external": "^2.2.4", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "ts-jest": "^29.2.5", | ||
| "typescript": "^5.6.3" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^17.0.0 || ^18.0.0", | ||
| "react-dom": "^17.0.0 || ^18.0.0" | ||
| }, | ||
| "module": "dist/esm/index.js", | ||
| "types": "dist/index.d.ts", | ||
| "files": [ | ||
| "dist" | ||
| ] | ||
| } |
234
README.md
@@ -1,3 +0,9 @@ | ||
| This project is a minimalistic React wrapper of [Checkout.com Frames](https://www.checkout.com/docs/integrate/frames). | ||
| # ⚠️ Deprecation Notice | ||
| > This project will soon be deprecated. We recommend exploring [Checkout.com Flow](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website) for your payment solution. A React wrapper for Flow is also in development, so stay tuned for updates. | ||
| --- | ||
| This project is a minimalistic React wrapper of [Checkout.com Frames](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website-with-frames). | ||
| # :rocket: Install | ||
@@ -9,22 +15,6 @@ | ||
| # :globe_with_meridians: Load the CDN | ||
| Make sure that you load the CDN before you mount the Frames components. You can add it for example in your _index.html_ file. | ||
| ```html | ||
| <script src="https://cdn.checkout.com/js/framesv2.min.js"></script> | ||
| ``` | ||
| If you use server side rendering like _Next_ you can add it in the Head: | ||
| ```jsx | ||
| <Head> | ||
| <script src="https://cdn.checkout.com/js/framesv2.min.js"></script> | ||
| </Head> | ||
| ``` | ||
| # :sparkles: Import the components | ||
| ```js | ||
| import { Frames, CardNumber, ExpiryDate, Cvv } from 'frames-react'; | ||
| import { Frames, CardNumber, ExpiryDate, Cvv } from "frames-react"; | ||
| ``` | ||
@@ -38,32 +28,32 @@ | ||
| <Frames | ||
| config={{ | ||
| debug: true, | ||
| publicKey: 'pk_test_6e40a700-d563-43cd-89d0-f9bb17d35e73', | ||
| localization: { | ||
| cardNumberPlaceholder: 'Card number', | ||
| expiryMonthPlaceholder: 'MM', | ||
| expiryYearPlaceholder: 'YY', | ||
| cvvPlaceholder: 'CVV', | ||
| }, | ||
| style: { | ||
| base: { | ||
| fontSize: '17px', | ||
| }, | ||
| }, | ||
| }} | ||
| ready={() => {}} | ||
| frameActivated={(e) => {}} | ||
| frameFocus={(e) => {}} | ||
| frameBlur={(e) => {}} | ||
| frameValidationChanged={(e) => {}} | ||
| paymentMethodChanged={(e) => {}} | ||
| cardValidationChanged={(e) => {}} | ||
| cardSubmitted={() => {}} | ||
| cardTokenized={(e) => {}} | ||
| cardTokenizationFailed={(e) => {}} | ||
| cardBinChanged={(e) => {}} | ||
| config={{ | ||
| debug: true, | ||
| publicKey: "pk_XXX", | ||
| localization: { | ||
| cardNumberPlaceholder: "Card number", | ||
| expiryMonthPlaceholder: "MM", | ||
| expiryYearPlaceholder: "YY", | ||
| cvvPlaceholder: "CVV", | ||
| }, | ||
| style: { | ||
| base: { | ||
| fontSize: "17px", | ||
| }, | ||
| }, | ||
| }} | ||
| ready={() => {}} | ||
| frameActivated={(e) => {}} | ||
| frameFocus={(e) => {}} | ||
| frameBlur={(e) => {}} | ||
| frameValidationChanged={(e) => {}} | ||
| paymentMethodChanged={(e) => {}} | ||
| cardValidationChanged={(e) => {}} | ||
| cardSubmitted={() => {}} | ||
| cardTokenized={(e) => {}} | ||
| cardTokenizationFailed={(e) => {}} | ||
| cardBinChanged={(e) => {}} | ||
| > | ||
| <CardNumber /> | ||
| <ExpiryDate /> | ||
| <Cvv /> | ||
| <CardNumber /> | ||
| <ExpiryDate /> | ||
| <Cvv /> | ||
| </Frames> | ||
@@ -79,20 +69,20 @@ ``` | ||
| <Frames | ||
| config={{ | ||
| publicKey: 'pk_test_6e40a700-d563-43cd-89d0-f9bb17d35e73', | ||
| }} | ||
| cardTokenized={(e) => { | ||
| alert(e.token); | ||
| }} | ||
| config={{ | ||
| publicKey: "pk_XXX", | ||
| }} | ||
| cardTokenized={(e) => { | ||
| alert(e.token); | ||
| }} | ||
| > | ||
| <CardNumber /> | ||
| <ExpiryDate /> | ||
| <Cvv /> | ||
| <CardNumber /> | ||
| <ExpiryDate /> | ||
| <Cvv /> | ||
| <button | ||
| onClick={() => { | ||
| Frames.submitCard(); | ||
| }} | ||
| > | ||
| PAY GBP 25.00 | ||
| </button> | ||
| <button | ||
| onClick={() => { | ||
| Frames.submitCard(); | ||
| }} | ||
| > | ||
| PAY GBP 25.00 | ||
| </button> | ||
| </Frames> | ||
@@ -107,18 +97,18 @@ ``` | ||
| <Frames | ||
| config={{ | ||
| publicKey: 'pk_test_6e40a700-d563-43cd-89d0-f9bb17d35e73', | ||
| }} | ||
| cardTokenized={(e) => { | ||
| alert(e.token); | ||
| }} | ||
| config={{ | ||
| publicKey: "pk_XXX", | ||
| }} | ||
| cardTokenized={(e) => { | ||
| alert(e.token); | ||
| }} | ||
| > | ||
| <CardFrame /> | ||
| <CardFrame /> | ||
| <button | ||
| onClick={() => { | ||
| Frames.submitCard(); | ||
| }} | ||
| > | ||
| PAY GBP 25.00 | ||
| </button> | ||
| <button | ||
| onClick={() => { | ||
| Frames.submitCard(); | ||
| }} | ||
| > | ||
| PAY GBP 25.00 | ||
| </button> | ||
| </Frames> | ||
@@ -134,39 +124,39 @@ ``` | ||
| ```js | ||
| import React from 'react'; | ||
| import { Frames, CardNumber, ExpiryDate, Cvv, CardFrame } from 'frames-react'; | ||
| import React from "react"; | ||
| import { Frames, CardNumber, ExpiryDate, Cvv, CardFrame } from "frames-react"; | ||
| import './App.css'; | ||
| import "./App.css"; | ||
| function App() { | ||
| return ( | ||
| <div className="App"> | ||
| <Frames | ||
| config={{ | ||
| publicKey: 'pk_sbox_ogynfaoply5o6ksuw3d3hcee3ez', | ||
| schemeChoice: true, | ||
| }} | ||
| cardTokenized={(e) => { | ||
| alert(e.token); | ||
| }} | ||
| > | ||
| <CardNumber /> | ||
| <div className="date-and-code"> | ||
| <ExpiryDate /> | ||
| <Cvv /> | ||
| </div> | ||
| return ( | ||
| <div className="App"> | ||
| <Frames | ||
| config={{ | ||
| publicKey: "pk_XXX", | ||
| schemeChoice: true, | ||
| }} | ||
| cardTokenized={(e) => { | ||
| alert(e.token); | ||
| }} | ||
| > | ||
| <CardNumber /> | ||
| <div className="date-and-code"> | ||
| <ExpiryDate /> | ||
| <Cvv /> | ||
| </div> | ||
| {/* Or if you want to use single frames: */} | ||
| {/* <CardFrame /> */} | ||
| {/* Or if you want to use single frames: */} | ||
| {/* <CardFrame /> */} | ||
| <button | ||
| id="pay-button" | ||
| onClick={() => { | ||
| Frames.submitCard(); | ||
| }} | ||
| > | ||
| PAY GBP 25.00 | ||
| </button> | ||
| </Frames> | ||
| </div> | ||
| ); | ||
| <button | ||
| id="pay-button" | ||
| onClick={() => { | ||
| Frames.submitCard(); | ||
| }} | ||
| > | ||
| PAY GBP 25.00 | ||
| </button> | ||
| </Frames> | ||
| </div> | ||
| ); | ||
| } | ||
@@ -218,15 +208,15 @@ | ||
| | prop | description | | ||
| | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| | config | The config is an object following the reference of [Checkout.com Frames](https://www.checkout.com/docs/integrate/frames/frames-reference). | | ||
| | ready | Triggered when Frames is registered on the global namespace and safe to use. | | ||
| | frameActivated | Triggered when the form is rendered. | | ||
| | frameFocus | Triggered when an input field receives focus. Use it to check the validation status and apply the wanted UI changes. | | ||
| | frameBlur | Triggered after an input field loses focus. Use it to check the validation status and apply the wanted UI changes. | | ||
| | frameValidationChanged | Triggered when a field's validation status has changed. Use it to show error messages or update the UI. | | ||
| | paymentMethodChanged | Triggered when a valid payment method is detected based on the card number being entered. Use this event to change the card icon. | | ||
| | cardValidationChanged | Triggered when the state of the card validation changes. | | ||
| | cardSubmitted | Triggered when the card form has been submitted. | | ||
| | cardTokenized | Triggered after a card is tokenized. | | ||
| | cardBinChanged | Triggered when the user inputs or changes the first 8 digits of a card. | | ||
| | prop | description | | ||
| | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | config | The config is an object following the reference of [Checkout.com Frames](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website-with-frames/frames-reference). | | ||
| | ready | Triggered when Frames is registered on the global namespace and safe to use. | | ||
| | frameActivated | Triggered when the form is rendered. | | ||
| | frameFocus | Triggered when an input field receives focus. Use it to check the validation status and apply the wanted UI changes. | | ||
| | frameBlur | Triggered after an input field loses focus. Use it to check the validation status and apply the wanted UI changes. | | ||
| | frameValidationChanged | Triggered when a field's validation status has changed. Use it to show error messages or update the UI. | | ||
| | paymentMethodChanged | Triggered when a valid payment method is detected based on the card number being entered. Use this event to change the card icon. | | ||
| | cardValidationChanged | Triggered when the state of the card validation changes. | | ||
| | cardSubmitted | Triggered when the card form has been submitted. | | ||
| | cardTokenized | Triggered after a card is tokenized. | | ||
| | cardBinChanged | Triggered when the user inputs or changes the first 8 digits of a card. | | ||
@@ -233,0 +223,0 @@ ## Static `functions` |
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by75.16%
107350
Worsened metrics
- Dependency count
- increased by200%
6
- Dev dependency count
- increased by45.45%
16
- Number of package files
- decreased by-84.44%
7
- Lines of code
- decreased by-92.96%
65
- Number of low quality alerts
- increased by100%
2
- Number of lines in readme file
- decreased by-4.2%
228
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addedreact@^17.0.0 || ^18.0.0
+ Addedreact-dom@^17.0.0 || ^18.0.0
+ Addedtslib@^2.8.1
+ Addedjs-tokens@4.0.0(transitive)
+ Addedloose-envify@1.4.0(transitive)
+ Addedreact@18.3.1(transitive)
+ Addedreact-dom@18.3.1(transitive)
+ Addedscheduler@0.23.2(transitive)
+ Addedtslib@2.8.1(transitive)
- Removedreact@19.0.0(transitive)