{"id":27151385,"url":"https://github.com/checkout/frames-react","last_synced_at":"2025-04-08T14:40:12.893Z","repository":{"id":37779523,"uuid":"281703029","full_name":"checkout/frames-react","owner":"checkout","description":"React wrapper of Checkout.com Frames.","archived":false,"fork":false,"pushed_at":"2024-11-26T11:36:30.000Z","size":1132,"stargazers_count":32,"open_issues_count":1,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-26T12:30:53.441Z","etag":null,"topics":["credit-card","payments","react","secure-payments"],"latest_commit_sha":null,"homepage":"https://docs.checkout.com/integrate/frames","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/checkout.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-22T14:40:50.000Z","updated_at":"2024-11-26T11:36:33.000Z","dependencies_parsed_at":"2024-11-19T23:16:18.248Z","dependency_job_id":null,"html_url":"https://github.com/checkout/frames-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkout%2Fframes-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkout%2Fframes-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkout%2Fframes-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/checkout%2Fframes-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/checkout","download_url":"https://codeload.github.com/checkout/frames-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247863744,"owners_count":21008963,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["credit-card","payments","react","secure-payments"],"created_at":"2025-04-08T14:40:12.202Z","updated_at":"2025-04-08T14:40:12.887Z","avatar_url":"https://github.com/checkout.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚠️ Deprecation Notice\n\n\u003e 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.\n\n---\n\nThis 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).\n\n# :rocket: Install\n\n```bash\nnpm install frames-react\n```\n\n# :sparkles: Import the components\n\n```js\nimport { Frames, CardNumber, ExpiryDate, Cvv } from \"frames-react\";\n```\n\n# :muscle: Example Usage\n\nMake sure you wrap the card input components inside Frames wrapper component.\n\n```js\n\u003cFrames\n  config={{\n    debug: true,\n    publicKey: \"pk_XXX\",\n    localization: {\n      cardNumberPlaceholder: \"Card number\",\n      expiryMonthPlaceholder: \"MM\",\n      expiryYearPlaceholder: \"YY\",\n      cvvPlaceholder: \"CVV\",\n    },\n    style: {\n      base: {\n        fontSize: \"17px\",\n      },\n    },\n  }}\n  ready={() =\u003e {}}\n  frameActivated={(e) =\u003e {}}\n  frameFocus={(e) =\u003e {}}\n  frameBlur={(e) =\u003e {}}\n  frameValidationChanged={(e) =\u003e {}}\n  paymentMethodChanged={(e) =\u003e {}}\n  cardValidationChanged={(e) =\u003e {}}\n  cardSubmitted={() =\u003e {}}\n  cardTokenized={(e) =\u003e {}}\n  cardTokenizationFailed={(e) =\u003e {}}\n  cardBinChanged={(e) =\u003e {}}\n\u003e\n  \u003cCardNumber /\u003e\n  \u003cExpiryDate /\u003e\n  \u003cCvv /\u003e\n\u003c/Frames\u003e\n```\n\n## Trigger tokenisation\n\nTo trigger the tokenisation, this wrapper has a static methods called `submitCard()`\nHere is a full example of the full flow:\n\n```js\n\u003cFrames\n  config={{\n    publicKey: \"pk_XXX\",\n  }}\n  cardTokenized={(e) =\u003e {\n    alert(e.token);\n  }}\n\u003e\n  \u003cCardNumber /\u003e\n  \u003cExpiryDate /\u003e\n  \u003cCvv /\u003e\n\n  \u003cbutton\n    onClick={() =\u003e {\n      Frames.submitCard();\n    }}\n  \u003e\n    PAY GBP 25.00\n  \u003c/button\u003e\n\u003c/Frames\u003e\n```\n\n# Single Line component\n\nIf you want to use Frame in single frame mode you cna do it like this:\n\n```js\n\u003cFrames\n  config={{\n    publicKey: \"pk_XXX\",\n  }}\n  cardTokenized={(e) =\u003e {\n    alert(e.token);\n  }}\n\u003e\n  \u003cCardFrame /\u003e\n\n  \u003cbutton\n    onClick={() =\u003e {\n      Frames.submitCard();\n    }}\n  \u003e\n    PAY GBP 25.00\n  \u003c/button\u003e\n\u003c/Frames\u003e\n```\n\n# For Carte Bancaire\n\nIf you want to accept Carte Bancaire you can pass the schemeChoice parameter in the config.\nThis will render the scheme icon with a dropdown, and customers will be able to select their scheme.\nMake sure your CSS is not interfering with the display of the dropdown.\n\n```js\nimport React from \"react\";\nimport { Frames, CardNumber, ExpiryDate, Cvv, CardFrame } from \"frames-react\";\n\nimport \"./App.css\";\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cFrames\n        config={{\n          publicKey: \"pk_XXX\",\n          schemeChoice: true,\n        }}\n        cardTokenized={(e) =\u003e {\n          alert(e.token);\n        }}\n      \u003e\n        \u003cCardNumber /\u003e\n        \u003cdiv className=\"date-and-code\"\u003e\n          \u003cExpiryDate /\u003e\n          \u003cCvv /\u003e\n        \u003c/div\u003e\n\n        {/* Or if you want to use single frames: */}\n        {/* \u003cCardFrame /\u003e */}\n\n        \u003cbutton\n          id=\"pay-button\"\n          onClick={() =\u003e {\n            Frames.submitCard();\n          }}\n        \u003e\n          PAY GBP 25.00\n        \u003c/button\u003e\n      \u003c/Frames\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n# :credit_card: Cardholder\n\nIf you need to inject the cardholder name on go, for cases where you render the payment form\nat the same time as the input for the billing and cardholder name, you can simply update\nthe props and Frames will reflect the latest changes\n\n```js\nconst [cardholder, setCardholder] = useState({\n   name: '',\n   phone: '',\n   billingAddress: {\n       addressLine1: '',\n   },\n});\n...\n\u003cFrames\n   config={{\n       cardholder: {\n           name: cardholder.name,\n           phone: cardholder.phone,\n           billingAddress: cardholder.billingAddress,\n       }\n   }}\n   ...\n/\u003e\n...\n\u003cExampleInput\n   onChange={(e) =\u003e {\n       setCardholder({\n           name: e.target.value,\n           phone: '7123456789',\n           billingAddress: {\n               addressLine1: 'London Street',\n           },\n       });\n   }}\n/\u003e\n```\n\n## The `props`\n\n| prop                   | description                                                                                                                                                                                     |\n| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 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). |\n| ready                  | Triggered when Frames is registered on the global namespace and safe to use.                                                                                                                    |\n| frameActivated         | Triggered when the form is rendered.                                                                                                                                                            |\n| frameFocus             | Triggered when an input field receives focus. Use it to check the validation status and apply the wanted UI changes.                                                                            |\n| frameBlur              | Triggered after an input field loses focus. Use it to check the validation status and apply the wanted UI changes.                                                                              |\n| frameValidationChanged | Triggered when a field's validation status has changed. Use it to show error messages or update the UI.                                                                                         |\n| paymentMethodChanged   | Triggered when a valid payment method is detected based on the card number being entered. Use this event to change the card icon.                                                               |\n| cardValidationChanged  | Triggered when the state of the card validation changes.                                                                                                                                        |\n| cardSubmitted          | Triggered when the card form has been submitted.                                                                                                                                                |\n| cardTokenized          | Triggered after a card is tokenized.                                                                                                                                                            |\n| cardBinChanged         | Triggered when the user inputs or changes the first 8 digits of a card.                                                                                                                         |\n\n## Static `functions`\n\n| function               | description                                                                                                          |\n| ---------------------- | -------------------------------------------------------------------------------------------------------------------- |\n| init                   | Initializes (or re-initializes) Frames.                                                                              |\n| isCardValid            | Returns the state of the card form validation.                                                                       |\n| submitCard             | Submits the card form if all form values are valid.                                                                  |\n| addEventHandler        | Adds a handler that is called when the specified event is triggered.                                                 |\n| removeEventHandler     | Removes a previously added handler from an event by providing the event name and handler as arguments in the method. |\n| removeAllEventHandlers | Removes all handlers added to the event specified.                                                                   |\n| enableSubmitForm       | Retains the entered card details and allows you to resubmit the payment form.                                        |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheckout%2Fframes-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcheckout%2Fframes-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheckout%2Fframes-react/lists"}