> ## Documentation Index > Fetch the complete documentation index at: https://www.cashfree.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # SDK Libraries > JS, React and Svelte component libraries for seamless integration of Cashfree Payment Gateway into your applications. Integrate Cashfree Payment Gateway into your web applications using our JS, React and Svelte SDKs. These component libraries simplify the payment workflow with prebuilt UI components and event handling. You can customise styling to match your app’s design and handle multiple payment methods with ease. Use these SDKs to build a secure, seamless, and developer-friendly payment experience. ### JS library Offers a flexible and efficient payment experience with support for multiple payment methods, customisable styling, and robust event handling. The following payment methods are supported: * Card payment * EMI * UPI QR code * UPI app intent * UPI collect * Netbanking * Wallets * BNPL * Cashfree hosted checkout **To install the package use:** ```javascript CDN theme={"dark"} ``` ```javascript NPM theme={"dark"} npm install @cashfreepayments/cashfree-js ``` **Import and set up the Cashfree card component** **To install the package use:** ```javascript HTML theme={"dark"} Cashfree V3 Card

``` ```javascript ReactJS theme={"dark"} import { useRef } from "react"; import { load } from "@cashfreepayments/cashfree-js"; function V3Card() { let cashfree, cardComponent, cvvComponent, cardHolder, cardExpiry, save; let paymentBtn = useRef(null), paymentMessage = useRef(null); const renderCard = async () => { cashfree = await load({ mode: "sandbox", }); let styleObject = { fonts: [{ cssSrc: "https://fonts.googleapis.com/css2?family=Lato" }], base: { fontSize: "16px", fontFamily: "Lato", backgroundColor: "#FFFFFF", ":focus": { border: "1px solid #2361d5", }, border: "1px solid #e6e6e6", borderRadius: "5px", padding: "16px", color: "#000000", }, invalid: { color: "#df1b41", }, }; let cardOptions = { values: { placeholder: "Enter Card Number", }, style: styleObject, }; cardComponent = cashfree.create("cardNumber", cardOptions); cardComponent.mount("#cardNumber"); let cvvOptions = { style: styleObject, }; cvvComponent = cashfree.create("cardCvv", cvvOptions); cvvComponent.mount("#cardCvv"); let cardHolderOptions = { values: { placeholder: "Enter Card Holder Name", }, style: styleObject, }; cardHolder = cashfree.create("cardHolder", cardHolderOptions); cardHolder.mount("#cardHolder"); let cardExpiryOptions = { style: styleObject, }; cardExpiry = cashfree.create("cardExpiry", cardExpiryOptions); cardExpiry.mount("#cardExpiry"); let saveOptions = { values: { label: "Save Card for later", }, style: styleObject, }; save = cashfree.create("savePaymentInstrument", saveOptions); save.mount("#save"); cardExpiry.on("change", function (data) { toggleBtn(); }); cardHolder.on("change", function (data) { toggleBtn(); }); cardComponent.on("change", function (data) { cvvComponent.update({ cvvLength: data.value.cvvLength }); toggleBtn(); }); cvvComponent.on("change", function (data) { toggleBtn(); }); }; renderCard(); const toggleBtn = () => { if ( cardExpiry.isComplete() && cardHolder.isComplete() && cardComponent.isComplete() && cvvComponent.isComplete() ) { paymentBtn.current.disabled = false; } else { paymentBtn.current.disabled = true; } }; const doPayment = () => { paymentBtn.current.disabled = true; cashfree.pay({ paymentMethod: cardComponent, paymentSessionId: "your-payment-session-id", savePaymentInstrument: save, }) .then(function (data) { if (data != null && data.error) { paymentMessage.current.innerHTML = data.error.message; } paymentBtn.current.disabled = false; }); }; return (

); } export default V3Card; ``` ### Svelte library Supports multiple payment methods, event handling, and customisable styling for a flexible and efficient payment experience. We support the following payment methods: * Card Payment * UPI QR Code * UPI App Intent * UPI Collect * Netbanking * Wallets * Cashfree hosted checkout **To install the package use:** ```Text Shell theme={"dark"} npm install @cashfreepayments/pg-svelte ``` **Import and set up the Cashfree card component** ```html theme={"dark"}
``` To learn more about this library, refer to [Svelte GitHub repository](https://github.com/cashfree/pg-svelte). ### React library A lightweight and modular React component library for integrating Cashfree Payment Gateway built on top of the Cashfree JS SDK with full support for card input fields like Card Number, Expiry and more. **To install the package use:** ```Text Shell theme={"dark"} npm install @cashfreepayments/pg-react ``` **Import and set up the Cashfree Card component** ```html theme={"dark"} import React, { useState } from "react"; import { Cashfree, CardNumber, CardHolder, CardExpiry, CardCVV, SaveInstrument, } from "@cashfreepayments/pg-react"; const App: React.FC = () => { const [isComplete, setIsComplete] = useState(false); const handlePay = () => { alert("Payment processing..."); // Trigger your payment logic here }; return ( { setIsComplete(status); // this is your local app state }} >
); }; export default App; ``` To learn more about this library, refer to [React GitHub repository](https://github.com/cashfree/pg-react).