> ## Documentation Index > Fetch the complete documentation index at: https://docs.yourflexpay.com/llms.txt > Use this file to discover all available pages before exploring further. # Web SDK > Add FLEX as a payment option on your website with the FLEX One Tap web SDK, with React and Next.js examples The FLEX Web SDK (`FlexOneTap`) drops a FLEX payment option into any website. You load one script, initialize it with your merchant credentials, and call `open()` when the customer is ready to pay — FLEX renders the checkout experience and hands control back to your callbacks when the customer finishes, fails, or closes it. The SDK runs entirely in the browser. You only need your merchant ID and API key. Plain HTML, React, and Next.js examples are all covered below. **Estimated Time**: 10-15 minutes **Prerequisites**: * A FLEX business account at [business.yourflexpay.com](https://business.yourflexpay.com) * A settlement bank added to that account * A frontend you can add a ` ``` Once it loads, the SDK is available on `window.FlexOneTap`. The script must finish loading before you call `new window.FlexOneTap(...)`. In plain HTML, put the tag in `` or before your own script. In React and Next.js, use the patterns in the [React](#react-example) and [Next.js](#nextjs-example) sections below, which wait for the load event. *** ## Step 3: Initialize the SDK ```javascript theme={null} const sdk = new window.FlexOneTap({ merchantId: 'your_merchant_id', apiKey: 'your_api_key', debug: false, }); ``` ### Constructor options Your merchant ID from the **API Keys** tab of the business portal. The API key you generated in the **API Keys** tab. Enables verbose SDK logging in the browser console. Turn it on while integrating, off in production. Create the instance once and reuse it for every checkout rather than constructing a new one per click. *** ## Step 4: Open the Checkout Call `open()` when the customer clicks your pay button: ```javascript theme={null} sdk.open({ reference: 'ORDER-1042', amount: 5000, comment: 'Order #1042', duration: 30, onSuccess: () => { // Payment completed }, onError: () => { // Payment failed }, onClose: () => { // Customer dismissed the checkout }, }); ``` ### `open()` options Your own unique reference for this transaction. Use it to match the payment back to an order on your side — generate a fresh one per attempt and keep it unique. Amount to collect, in NGN. A short description shown to the customer during checkout, e.g. the order or invoice number. How long the payment stays valid, in **minutes**. After it elapses the payment expires and the customer has to start again. Called when the payment completes successfully. Use it to show a confirmation and update your UI. Called when the payment fails. Use it to show an error and let the customer retry. Called when the customer dismisses the checkout without completing payment. Use it to re-enable your pay button. *** ## Plain HTML Example The smallest complete integration: ```html index.html theme={null} ``` *** ## React Example In React, the script has to be loaded before the first `open()` call, and the component tree may mount before the script does. A small hook handles both: it injects the tag once, waits for `load`, and hands back a ready-to-use instance. ```jsx useFlexOneTap.js theme={null} import { useEffect, useRef, useState } from 'react'; const SDK_URL = 'https://cdn.yourflexpay.com/v1/sdk.min.js'; export function useFlexOneTap({ merchantId, apiKey, debug = false }) { const sdkRef = useRef(null); const [ready, setReady] = useState(false); useEffect(() => { let cancelled = false; function init() { if (cancelled || !window.FlexOneTap) return; sdkRef.current = new window.FlexOneTap({ merchantId, apiKey, debug }); setReady(true); } if (window.FlexOneTap) { init(); return; } // Reuse the tag if another component already added it let script = document.querySelector(`script[src="${SDK_URL}"]`); if (!script) { script = document.createElement('script'); script.src = SDK_URL; script.async = true; document.body.appendChild(script); } script.addEventListener('load', init); return () => { cancelled = true; script.removeEventListener('load', init); }; }, [merchantId, apiKey, debug]); return { sdk: sdkRef.current, ready }; } ``` ```jsx CheckoutButton.jsx theme={null} import { useState } from 'react'; import { useFlexOneTap } from './useFlexOneTap'; export function CheckoutButton({ orderId, amount }) { const { sdk, ready } = useFlexOneTap({ merchantId: process.env.REACT_APP_FLEX_MERCHANT_ID, apiKey: process.env.REACT_APP_FLEX_API_KEY, debug: process.env.NODE_ENV !== 'production', }); const [status, setStatus] = useState('idle'); const pay = () => { if (!sdk) return; setStatus('pending'); sdk.open({ reference: `ORDER-${orderId}`, amount, comment: `Order #${orderId}`, duration: 30, onSuccess: () => setStatus('success'), onError: () => setStatus('error'), onClose: () => setStatus((s) => (s === 'pending' ? 'idle' : s)), }); }; return (
{status === 'success' &&

Payment received. Confirming your order…

} {status === 'error' &&

Payment failed. Please try again.

}
); } ``` `onClose` fires when the customer dismisses the checkout, including right after a successful payment in some flows. Guarding it with `status === 'pending'` keeps a close event from wiping out a success state you already set. *** ## Next.js Example Next.js ships `next/script`, which loads the SDK once per page and gives you an `onLoad` hook — no manual DOM injection needed. The checkout itself touches `window`, so it has to live in a Client Component. ```jsx app/checkout/FlexCheckout.jsx (App Router) theme={null} 'use client'; import { useRef, useState } from 'react'; import Script from 'next/script'; export default function FlexCheckout({ orderId, amount }) { const sdkRef = useRef(null); const [ready, setReady] = useState(false); const [status, setStatus] = useState('idle'); const handleLoad = () => { sdkRef.current = new window.FlexOneTap({ merchantId: process.env.NEXT_PUBLIC_FLEX_MERCHANT_ID, apiKey: process.env.NEXT_PUBLIC_FLEX_API_KEY, debug: process.env.NODE_ENV !== 'production', }); setReady(true); }; const pay = () => { if (!sdkRef.current) return; setStatus('pending'); sdkRef.current.open({ reference: `ORDER-${orderId}`, amount, comment: `Order #${orderId}`, duration: 30, onSuccess: () => setStatus('success'), onError: () => setStatus('error'), onClose: () => setStatus((s) => (s === 'pending' ? 'idle' : s)), }); }; return ( <>