What problem does it solve? Integrating Cashfree Payments into a browser-based checkout requires choosing between Drop-in, Elements/Headless, and redirect modes, handling three-state Promise resolutions, and avoiding common mistakes like trusting client-side payment results or mixing Elements with checkout(). This Skill provides the decision matrices, code patterns, and security rules to wire cashfree.js v3 correctly the first time. ## Core Features & Use Cases - Three Checkout Modes: Guidance for Drop-in (cashfree.checkout with _modal/_self/_top/_blank), Elements/Headless (cashfree.create + cashfree.pay with cardNumber, cardCvv, cardExpiry, cardHolder components), and pure redirect flows. - SPA & Framework Wiring: React, Vue, Next.js, and Angular integration patterns covering script loading, mount/unmount lifecycle, CSP configuration, and SSR boundaries. - Saved Cards & OneClick: Token Vault integration using instrument_id with cashfree.pay for returning-customer checkout. - Use Case: A React storefront needs a custom-designed card form. Mount Cashfree Elements components in useEffect, submit via cashfree.pay with the paymentSessionId, then backend-verify the order status before fulfilling. ## Quick Start Ask the AI to integrate Cashfree Drop-in checkout into your web page using a paymentSessionId from your backend, with proper handling of the error, redirect, and paymentDetails result states.
