{"_id":"@cashfreepayments/pg-svelte","_rev":"3-26387a7dce41fb9a1f9fe90cb9a64ec2","name":"@cashfreepayments/pg-svelte","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.4":{"name":"@cashfreepayments/pg-svelte","version":"1.0.4","keywords":["svelte"],"license":"Apache-2.0","_id":"@cashfreepayments/pg-svelte@1.0.4","maintainers":[{"name":"cashfree-payments","email":"raj@cashfree.com"},{"name":"kishan.cashfree","email":"kishan.maurya@cashfree.com"},{"name":"nikhilkushwah18","email":"nikhil.kushwah@cashfree.com"}],"homepage":"https://github.com/cashfree/pg-svelte#readme","bugs":{"url":"https://github.com/cashfree/pg-svelte/issues"},"dist":{"shasum":"7e320ee155c831a32d80ca5540456bfc4b7e1419","tarball":"https://registry.npmjs.org/@cashfreepayments/pg-svelte/-/pg-svelte-1.0.4.tgz","fileCount":37,"integrity":"sha512-nTXvH18BsgzgMxf5iHYSy5s+FlQ1Ttl+qP5lL1/OX17BihFop9JDMAG6DKrzueTYdLFeaA/STlFXzT9jsRBGew==","signatures":[{"sig":"MEUCIQCWt7qbrJz5WJnmgJz8iyRm3VWYmSVzyLzIzy8kZ3EwvAIgMz8qsgi6QBFnpb8Zbp/9gLjDZZLGmJlEj6YcGQQyKBs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":73285},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"gitHead":"bc6842e0301c2a03dd38ba319e28cbbdc2f250b6","scripts":{"dev":"vite dev","lint":"prettier --check .","build":"vite build && npm run prepack","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepack":"svelte-kit sync && svelte-package && publint","prepare":"svelte-kit sync || echo ''","preview":"vite preview","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"},"_npmUser":{"name":"cashfree-payments","email":"raj@cashfree.com"},"repository":{"url":"git+https://github.com/cashfree/pg-svelte.git","type":"git"},"_npmVersion":"10.8.2","description":"A Svelte component library for integrating Cashfree Payment Gateway in your Svelte applications.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"18.20.8","dependencies":{"@cashfreepayments/cashfree-js":"^1.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","svelte":"^5.0.0","postcss":"^8.5.3","publint":"^0.3.2","prettier":"^3.4.2","typescript":"^5.0.0","tailwindcss":"^3.4.1","autoprefixer":"^10.4.21","svelte-check":"^4.0.0","@sveltejs/kit":"^2.16.0","@sveltejs/package":"^2.0.0","@sveltejs/adapter-auto":"^4.0.0","prettier-plugin-svelte":"^3.3.3","@sveltejs/vite-plugin-svelte":"^5.0.0"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/pg-svelte_1.0.4_1744895957269_0.6045935054196074","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@cashfreepayments/pg-svelte","version":"1.0.5","keywords":["svelte"],"license":"Apache-2.0","_id":"@cashfreepayments/pg-svelte@1.0.5","maintainers":[{"name":"cashfree-payments","email":"raj@cashfree.com"},{"name":"kishan.cashfree","email":"kishan.maurya@cashfree.com"},{"name":"nikhilkushwah18","email":"nikhil.kushwah@cashfree.com"}],"homepage":"https://github.com/cashfree/pg-svelte#readme","bugs":{"url":"https://github.com/cashfree/pg-svelte/issues"},"dist":{"shasum":"aae2fe227057653d8582a4a8e18d25b04f385138","tarball":"https://registry.npmjs.org/@cashfreepayments/pg-svelte/-/pg-svelte-1.0.5.tgz","fileCount":37,"integrity":"sha512-H3easC4dSgII7amjVxTcraM2/AbRihdO156NA0SYru5dbkms+IT6b4jaAV9OOWtX/DKJfN3fAcEgizTyQQMCww==","signatures":[{"sig":"MEYCIQChkZb/rVdsk4xoGGTRDXLlGJ7dgN5zajIkNboE4N94dAIhAJLda4zCHkxJhB98SkBHqr5901pPaML1wyaQj8UZCXO/","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":74847},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"gitHead":"51104cfe2e4a7d1a8a8080cbca217f6a007dcec2","scripts":{"dev":"vite dev","lint":"prettier --check .","build":"vite build && npm run prepack","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","format":"prettier --write .","prepack":"svelte-kit sync && svelte-package && publint","prepare":"svelte-kit sync || echo ''","preview":"vite preview","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"},"_npmUser":{"name":"cashfree-payments","email":"raj@cashfree.com"},"repository":{"url":"git+https://github.com/cashfree/pg-svelte.git","type":"git"},"_npmVersion":"10.8.2","description":"A Svelte component library for integrating Cashfree Payment Gateway in your Svelte applications.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"18.20.8","dependencies":{"@cashfreepayments/cashfree-js":"^1.0.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","svelte":"^5.0.0","postcss":"^8.5.3","publint":"^0.3.2","prettier":"^3.4.2","typescript":"^5.0.0","tailwindcss":"^3.4.1","autoprefixer":"^10.4.21","svelte-check":"^4.0.0","@sveltejs/kit":"^2.16.0","@sveltejs/package":"^2.0.0","@sveltejs/adapter-auto":"^4.0.0","prettier-plugin-svelte":"^3.3.3","@sveltejs/vite-plugin-svelte":"^5.0.0"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/pg-svelte_1.0.5_1747811983591_0.6177779394592187","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-04-17T13:19:17.179Z","modified":"2026-01-08T12:35:58.881Z","1.0.4":"2025-04-17T13:19:17.504Z","1.0.5":"2025-05-21T07:19:43.819Z"},"bugs":{"url":"https://github.com/cashfree/pg-svelte/issues"},"license":"Apache-2.0","homepage":"https://github.com/cashfree/pg-svelte#readme","keywords":["svelte"],"repository":{"url":"git+https://github.com/cashfree/pg-svelte.git","type":"git"},"description":"A Svelte component library for integrating Cashfree Payment Gateway in your Svelte applications.","maintainers":[{"email":"raj@cashfree.com","name":"cashfree-payments"},{"email":"kishan.maurya@cashfree.com","name":"kishan.cashfree"},{"email":"vibhor.jain@cashfree.com","name":"vibhorohbiv"}],"readme":"# Cashfree Payments for Svelte\n\nA Svelte component library for integrating Cashfree Payment Gateway in your Svelte applications.\n\n## Quick Start Guide\n\n1. **Install the package**\n\n   ```bash\n   npm install @cashfreepayments/pg-svelte\n   ```\n\n2. **Import and set up the Cashfree component**\n\n```svelte\n<script>\n\timport { Cashfree, CardNumber } from '@cashfreepayments/pg-svelte';\n\n\tlet cashfreeComponent;\n\tlet mode = 'sandbox';\n\tlet paymentSessionId = 'your-payment-session-id'; // Get this from your backend\n\tlet isReadyForPayment = false;\n\n\tfunction checkState(e) {\n\t\tisReadyForPayment = e.detail.isComplete;\n\t}\n\n\tasync function handlePayment() {\n\t\tconst result = await cashfreeComponent.pay({\n\t\t\tpaymentSessionId\n\t\t});\n\n\t\tif (result.error) {\n\t\t\t//there is an error\n\t\t\t//message at result.error.message\n\t\t}\n\t\tif (result.redirect) {\n\t\t\t//console.log(\"User would be redirected\");\n\t\t}\n\t\tif (result.paymentDetails) {\n\t\t\t//only when redirect = 'if_required' for UPI payment\n\t\t\t//payment is successful\n\t\t\t//message is at result.paymentDetails.paymentMessage\n\t\t}\n\t}\n</script>\n\n<Cashfree bind:this={cashfreeComponent} {mode} on:complete={checkState}>\n\t<!-- Add payment component here -->\n\t<CardNumber class=\"input\" placeholder=\"Card number\" />\n\t<CardHolder id=\"card-holder\" class=\"input\" />\n\t<CardExpiry id=\"card-expiry\" class=\"input\" />\n\t<CardCVV id=\"card-cvv\" class=\"input\" />\n\t<button disabled={!isReadyForPayment} on:click={handlePayment}>Pay Now</button>\n</Cashfree>\n```\n\nThere are lot of other configurations that you can use. You can read them [here](https://www.cashfree.com/docs/payments/online/element/payment-options)\n\n3. **Run your app** and test the integration!\n\n## Table of Contents\n\n1. Installation\n2. Basic Setup\n3. Payment Methods\n   - Card Payment\n   - UPI QR Code\n   - UPI App Intent\n   - UPI Collect\n   - Netbanking\n   - Wallets\n4. Event Handling\n5. Styling Components\n\n## Installation\n\nInstall the package using npm:\n\n```bash\nnpm install @cashfreepayments/pg-svelte\n```\n\n## Basic Setup\n\nThe first step is to import the Cashfree components and set up a `Cashfree` component that will host your payment method.\n\n```svelte\n<script>\n\timport { Cashfree } from '@cashfreepayments/pg-svelte';\n\timport { onMount } from 'svelte';\n\n\tlet mode = 'sandbox'; // or 'production' for live payments\n\tlet cashfreeComponent;\n\tlet paymentSessionId = 'your-payment-session-id';\n\n\tlet paymentOptions = {\n\t\tpaymentSessionId: paymentSessionId,\n\t\tredirectTarget: '_self',\n\t\tredirect: 'if_required'\n\t};\n\n\tasync function doPayment() {\n\t\ttry {\n\t\t\tconst result = await cashfreeComponent.pay(paymentOptions);\n\t\t\tif (result.error) {\n\t\t\t\tthrow new Error(result.error.message);\n\t\t\t}\n\t\t\t// Handle success\n\t\t} catch (error) {\n\t\t\t// Handle error\n\t\t\tconsole.error('Payment failed:', error);\n\t\t}\n\t}\n</script>\n\n<Cashfree bind:this={cashfreeComponent} {mode}>\n\t<!-- Payment components go here -->\n</Cashfree>\n```\n\n## Payment Methods\n\n### Card Payment\n\nCard payment requires four components: CardNumber, CardHolder, CardExpiry, and CardCVV. Optionally, you can include SaveInstrument to let users save their card.\n\n```svelte\n<script>\n\timport {\n\t\tCashfree,\n\t\tCardNumber,\n\t\tCardHolder,\n\t\tCardExpiry,\n\t\tCardCVV,\n\t\tSaveInstrument\n\t} from '@cashfreepayments/pg-svelte';\n\n\t// Track payment component state\n\tlet isReadyForPayment = false;\n\n\tfunction checkState(e) {\n\t\t// Check if all required fields are complete\n\t\tisReadyForPayment = e.detail.isComplete;\n\t}\n</script>\n\n<Cashfree bind:this={cashfreeCard} {mode} on:complete={checkState}>\n\t<div class=\"form-container\">\n\t\t<div>\n\t\t\t<label>Card Number</label>\n\t\t\t<CardNumber class=\"input-text\" placeholder=\"4111 XXXX XXXX 1111\" />\n\t\t</div>\n\t\t<div>\n\t\t\t<label>Card Holder Name</label>\n\t\t\t<CardHolder class=\"input-text\" />\n\t\t</div>\n\t\t<div class=\"expiry-cvv-container\">\n\t\t\t<div>\n\t\t\t\t<label>Expiry</label>\n\t\t\t\t<CardExpiry class=\"input-text\" />\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<label>CVV</label>\n\t\t\t\t<CardCVV class=\"input-text\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<div>\n\t\t\t<SaveInstrument label=\"Save this card for future payments\" />\n\t\t</div>\n\t\t<button on:click={doPayment} disabled={!isReadyForPayment}>Pay Now</button>\n\t</div>\n</Cashfree>\n```\n\n### UPI QR Code\n\nDisplay a QR code that customers can scan with any UPI-enabled app.\n\n```svelte\n<script>\n\timport { Cashfree, UPIQRCode } from '@cashfreepayments/pg-svelte';\n\n\tlet isReadyForPayment = false;\n\n\tfunction ready(e) {\n\t\tconsole.log('Component ready');\n\t}\n\n\tfunction complete(e) {\n\t\tisReadyForPayment = e.detail.isComplete;\n\t}\n\n\tfunction handlePaymentRequested(e) {\n\t\tconsole.log('Payment requested', e.detail);\n\t}\n</script>\n\n<Cashfree\n\tbind:this={cashfreeQr}\n\t{mode}\n\ton:complete={complete}\n\ton:paymentrequested={handlePaymentRequested}\n\ton:ready={ready}\n>\n\t<div>\n\t\t<label>Scan the QR Code</label>\n\t\t<UPIQRCode size=\"275px\" class=\"qr-code\" />\n\t\t<button on:click={doPayment} disabled={!isReadyForPayment}>Pay Now</button>\n\t</div>\n</Cashfree>\n```\n\n### UPI App Intent\n\nShow UPI app icons for mobile users to select their preferred UPI app.\n\n```svelte\n<script>\n\timport { Cashfree, UPIAPP } from '@cashfreepayments/pg-svelte';\n\n\t// Define available UPI apps\n\tlet upiApps = [\n\t\t{ type: 'gpay', name: 'Google Pay', component: null, selected: false },\n\t\t{ type: 'phonepe', name: 'PhonePe', component: null, selected: false },\n\t\t{ type: 'paytm', name: 'Paytm', component: null, selected: false }\n\t];\n\n\tlet selectedUPIApp = null;\n\n\tfunction selectUPIApp(app) {\n\t\t// Clear previous selections\n\t\tupiApps.forEach((a) => {\n\t\t\ta.selected = false;\n\t\t});\n\n\t\t// Set new selection\n\t\tapp.selected = true;\n\t\tselectedUPIApp = app;\n\t\tupiApps = [...upiApps]; // Trigger reactivity\n\t}\n</script>\n\n<div class=\"upi-apps-container\">\n\t{#each upiApps as app}\n\t\t<div class={app.selected ? 'selected-app' : 'app'}>\n\t\t\t<Cashfree bind:this={app.component} {mode} on:click={() => selectUPIApp(app)}>\n\t\t\t\t<UPIAPP upiApp={app.type} class=\"app-icon\" />\n\t\t\t\t<label>{app.name}</label>\n\t\t\t</Cashfree>\n\t\t</div>\n\t{/each}\n</div>\n\n{#if selectedUPIApp}\n\t<button on:click={doPayment}>Continue with {selectedUPIApp.name}</button>\n{/if}\n```\n\n### UPI Collect\n\nAllow customers to enter their UPI ID for direct payment collection.\n\n```svelte\n<script>\n\timport { Cashfree, UPICollect } from '@cashfreepayments/pg-svelte';\n\n\tlet isReadyForPayment = false;\n\n\tfunction checkState(e) {\n\t\tisReadyForPayment = e.detail.isComplete;\n\t}\n</script>\n\n<Cashfree bind:this={cashfreeUPICollect} {mode} on:complete={checkState}>\n\t<div>\n\t\t<label>UPI ID</label>\n\t\t<UPICollect class=\"input-text\" placeholder=\"yourname@upi\" />\n\t\t<button on:click={doPayment} disabled={!isReadyForPayment}>Pay Now</button>\n\t</div>\n</Cashfree>\n```\n\n### Netbanking\n\nDisplay a list of banks for netbanking payment.\n\n```svelte\n<script>\n\timport { Cashfree, Netbanking } from '@cashfreepayments/pg-svelte';\n\timport netbankingBanksList from '@cashfreepayments/pg-svelte/netbanking-list';\n\n\t// Import bank list or define your own\n\tlet netbankingBanks = netbankingBanksList.map((bank) => ({\n\t\t...bank,\n\t\tcomponent: null,\n\t\tselected: false\n\t}));\n\n\tlet selectedBank = null;\n\n\tfunction selectBank(bank) {\n\t\t// Clear previous selection\n\t\tnetbankingBanks.forEach((b) => {\n\t\t\tb.selected = false;\n\t\t});\n\n\t\t// Set new selection\n\t\tbank.selected = true;\n\t\tselectedBank = bank;\n\t\tnetbankingBanks = [...netbankingBanks]; // Trigger reactivity\n\t}\n</script>\n\n<div class=\"netbanking-container\">\n\t{#each netbankingBanks as bank}\n\t\t<div class={bank.selected ? 'selected-bank' : 'bank'}>\n\t\t\t<Cashfree bind:this={bank.component} {mode} on:click={() => selectBank(bank)}>\n\t\t\t\t<Netbanking netbankingBankName={bank.netbankingBankName} class=\"bank-icon\" />\n\t\t\t\t<label>{bank.netbankingBankDisplay}</label>\n\t\t\t</Cashfree>\n\t\t</div>\n\t{/each}\n</div>\n\n{#if selectedBank}\n\t<button on:click={doPayment}>Continue with {selectedBank.netbankingBankDisplay}</button>\n{/if}\n```\n\n### Wallets\n\nImplement wallet payment options with phone number input.\n\n```svelte\n<script>\n\timport { Cashfree, Wallet } from '@cashfreepayments/pg-svelte';\n\n\t// Define available wallet providers\n\tlet walletProviders = [\n\t\t{ provider: 'amazonpay', buttonText: 'Amazon Pay', component: null, selected: false },\n\t\t{ provider: 'phonepe', buttonText: 'PhonePe', component: null, selected: false },\n\t\t{ provider: 'paytm', buttonText: 'Paytm', component: null, selected: false }\n\t];\n\n\tlet phone = '';\n\tlet selectedWallet = null;\n\n\tfunction selectWallet(wallet) {\n\t\tif (!phone) {\n\t\t\talert('Please enter phone number first');\n\t\t\treturn;\n\t\t}\n\n\t\t// Clear previous selection\n\t\twalletProviders.forEach((w) => {\n\t\t\tw.selected = false;\n\t\t});\n\n\t\t// Set new selection\n\t\twallet.selected = true;\n\t\tselectedWallet = wallet;\n\t\twalletProviders = [...walletProviders]; // Trigger reactivity\n\t}\n</script>\n\n<div>\n\t<label for=\"phone\">Enter Phone number</label>\n\t<input type=\"text\" bind:value={phone} class=\"input-text\" id=\"phone\" />\n</div>\n\n<div class=\"wallets-container\">\n\t{#each walletProviders as wallet}\n\t\t<div class={wallet.selected ? 'selected-wallet' : 'wallet'}>\n\t\t\t<Cashfree bind:this={wallet.component} {mode} on:click={() => selectWallet(wallet)}>\n\t\t\t\t<Wallet provider={wallet.provider} {phone} class=\"wallet-icon\" />\n\t\t\t\t<label>{wallet.buttonText}</label>\n\t\t\t</Cashfree>\n\t\t</div>\n\t{/each}\n</div>\n\n{#if selectedWallet}\n\t<button on:click={doPayment}>Continue with {selectedWallet.buttonText}</button>\n{/if}\n```\n\n### Hosted Checkout Page\n\n```svelte\n<script>\n\timport { Cashfree } from '@cashfreepayments/pg-svelte';\n\tlet checkoutOptions: Record<string, any> = {\n\t\tredirectTarget: '_modal'\n\t};\n\tlet cashfreeRoot: any;\n\tlet mode: 'sandbox' | 'production';\n\tmode = 'sandbox';\n\tasync function doCheckout(e: Event) {\n\t\tcheckoutOptions.paymentSessionId = $paymentSessionIdStore;\n\t\ttry {\n\t\t\tlet res = await cashfreeRoot.checkout(checkoutOptions);\n\t\t\tif (!!res.error) {\n\t\t\t\tthrow new Error(res.error.message);\n\t\t\t}\n\t\t\tif (res.redirect) {\n\t\t\t\t// This will be true when the payment redirection page couldnt be opened in the same window\n\t\t\t\t// This is an exceptional case only when the page is opened inside an inAppBrowser\n\t\t\t\t// In this case the customer will be redirected to return url once payment is completed\n\t\t\t\tconsole.log('Payment will be redirected');\n\t\t\t}\n\t\t\tif (res.paymentDetails) {\n\t\t\t\t// This will be called whenever the payment is completed irrespective of transaction status\n\t\t\t\tconsole.log('Payment has been completed, Check for Payment Status');\n\t\t\t\tconsole.log(res.paymentDetails.paymentMessage);\n\t\t\t}\n\t\t} catch (error: any) {\n\t\t\terrorMsg = error.message;\n\t\t\tconsole.error('Payment failed:', error);\n\t\t}\n\t}\n</script>\n\n<Cashfree bind:this={cashfreeRoot} {mode}></Cashfree>\n```\n\n## Event Handling\n\nCashfree components emit various events you can listen to:\n\n```svelte\n<script>\n\timport { Cashfree } from '@cashfreepayments/pg-svelte';\n\n\tlet isReadyForPayment = false;\n\n\tfunction handleComplete(e) {\n\t\t// e.detail contains information about the state\n\t\t// For example, e.detail.isComplete indicates if all required fields are filled\n\t\tisReadyForPayment = e.detail.isComplete;\n\t}\n\n\tfunction handlePaymentRequested(e) {\n\t\t// This event fires when payment is requested\n\t\tconsole.log('Payment requested');\n\t}\n\n\tfunction handleReady(e) {\n\t\t// Component is ready to accept input\n\t\tconsole.log('Component ready');\n\t}\n\n\tfunction handleChange(e) {\n\t\t// Field value has changed\n\t\tconsole.log('Value changed', e.detail);\n\t}\n\n\tfunction handleLoadError(e) {\n\t\t// Handle any loading errors\n\t\tconsole.error('Load error', e.detail);\n\t}\n</script>\n\n<Cashfree\n\tbind:this={component}\n\t{mode}\n\ton:ready={handleReady}\n\ton:complete={handleComplete}\n\ton:change={handleChange}\n\ton:paymentrequested={handlePaymentRequested}\n\ton:loaderror={handleLoadError}\n>\n\t<!-- Components -->\n</Cashfree>\n```\n\n## Styling Components\n\nYou can style components using Tailwind classes or custom CSS:\n\n```svelte\n<script>\n\timport { Cashfree, CardNumber } from '@cashfreepayments/pg-svelte';\n\n\tconst customStyles = {\n\t\tclasses: {\n\t\t\tbase: 'my-input',\n\t\t\tfocus: 'input-focused',\n\t\t\tinvalid: 'input-error',\n\t\t\tcomplete: 'input-complete'\n\t\t},\n\t\tfonts: [\n\t\t\t{\n\t\t\t\tfamily: 'Roboto',\n\t\t\t\tsrc: 'https://fonts.googleapis.com/css2?family=Roboto'\n\t\t\t}\n\t\t],\n\t\tstyle: {\n\t\t\tbase: {\n\t\t\t\tcolor: '#333',\n\t\t\t\tfontSize: '16px',\n\t\t\t\tfontFamily: 'Roboto, sans-serif',\n\t\t\t\tpadding: '12px',\n\t\t\t\tbackgroundColor: '#fff',\n\t\t\t\tborder: '1px solid #ccc',\n\t\t\t\tborderRadius: '4px'\n\t\t\t},\n\t\t\tfocus: {\n\t\t\t\tborderColor: '#0066cc'\n\t\t\t},\n\t\t\tinvalid: {\n\t\t\t\tborderColor: '#ff3333',\n\t\t\t\tcolor: '#ff3333'\n\t\t\t}\n\t\t},\n\t\tdisabled: false,\n\t\tloader: true\n\t};\n</script>\n\n<!-- Using Tailwind classes -->\n<CardNumber class=\"w-full rounded-md border border-gray-300 px-3 py-2\" />\n\n<!-- Using custom styles -->\n<Cashfree {mode} styles={customStyles}>\n\t<CardNumber class=\"custom-input\" />\n</Cashfree>\n\n<style>\n\t.custom-input {\n\t\twidth: 100%;\n\t\tpadding: 8px 12px;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid #ccc;\n\t}\n\n\t.custom-input:focus-within {\n\t\tbox-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);\n\t}\n</style>\n```\n","readmeFilename":"README.md"}