{"repo":"checkout/frames-react","free":true,"listed":false,"github":"https://github.com/checkout/frames-react","clone":"git clone https://github.com/checkout/frames-react.git","description":"React wrapper of Checkout.com Frames.","language":"TypeScript","stars":37,"topics":["payments","react","secure-payments","credit-card"],"license":"MIT","category":"auth-billing-email","readme_excerpt":"ℹ️ Information We are not onboarding new merchants to Frames. Upgrade to Flow instead, our pre-built, customizable payment user interface. Flow provides a more flexible, scalable, and feature-rich integration. 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. :rocket: Install :sparkles: Import the components :muscle: Example Usage Make sure you wrap the card input components inside Frames wrapper component. Trigger tokenisation To trigger the tokenisation, this wrapper has a static methods called submitCard() Here is a full example of the full flow: Single Line component If you want to use Frame in single frame mode you cna do it like this: For Carte Bancaire If you want to accept Carte Bancaire you can pass the schemeChoice parameter in the config. This will render the scheme icon with a dropdown, and customers will be able to select their scheme. Make sure your CSS is not interfering with the display of the dropdown. :credit card: Cardholder If you need to inject the cardholder name on go, for cases where you render the payment form at the same time as the input for the billing and cardholder name, you can simply update the props and Frames will reflect the latest changes The props prop description ---------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------","default_branch":null,"files":null,"tree":[],"storefront":"/r/checkout","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/checkout/frames-react/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}