"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const DownloadAndOpenButtons = ({downloadUrl, mainAppUrl = "https://sampleapp.ai", className = "", gitUrl}) => { const _components = { button: "button", code: "code", div: "div", img: "img", p: "p", path: "path", svg: "svg", ..._provideComponents() }; const [hasCopied, setHasCopied] = React.useState(false); const [showCommand, setShowCommand] = React.useState(false); const npxCommand = React.useMemo(() => { let apiPath = downloadUrl; if (apiPath.startsWith("http://") || apiPath.startsWith("https://")) { try { const url = new URL(apiPath); apiPath = url.pathname; } catch (e) { console.error("Invalid URL:", apiPath); } } if (apiPath.startsWith("/public/")) { apiPath = apiPath.slice(("/public/").length); } if (apiPath.startsWith("/")) { apiPath = apiPath.slice(1); } if (apiPath.endsWith(".zip")) { apiPath = apiPath.slice(0, -4); } return `npx sampleappai add "${mainAppUrl}/api/code/static/${apiPath}"`; }, [downloadUrl, mainAppUrl]); const handleDownload = () => { window.open(downloadUrl, "_blank"); }; const handleCopyCommand = async () => { try { await navigator.clipboard.writeText(npxCommand); setHasCopied(true); setTimeout(() => setHasCopied(false), 2000); } catch (err) { const textArea = document.createElement("textarea"); textArea.value = npxCommand; document.body.appendChild(textArea); textArea.select(); try { document.execCommand("copy"); setHasCopied(true); setTimeout(() => setHasCopied(false), 2000); } catch (err) { console.error("Failed to copy:", err); } document.body.removeChild(textArea); } }; const handleOpenVSCode = () => { try { window.location.href = `vscode://vscode.git/clone?url=${gitUrl}`; } catch {} }; return _jsxs(_components.div, { className: `mint-flex mint-flex-col mint-gap-3 ${className}`, children: [_jsxs(_components.div, { className: "mint-flex mint-items-center mint-gap-2", children: [_jsxs(_components.button, { type: "button", className: "mint-inline-flex mint-items-center mint-gap-1.5 mint-px-3 mint-py-1.5 mint-text-xs mint-font-medium mint-rounded-md mint-text-white mint-transition-all hover:mint-opacity-90 active:mint-scale-[0.98] bg-primary dark:bg-primary-light", onClick: handleDownload, children: [_jsx(_components.svg, { className: "mint-w-3.5 mint-h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx(_components.path, { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" }) }), "Download example"] }), _jsxs(_components.button, { type: "button", className: "mint-inline-flex mint-items-center mint-h-8 mint-gap-1.5 mint-px-3 mint-py-0.5 mint-text-xs mint-font-medium mint-rounded-md mint-border mint-transition-all hover:mint-bg-zinc-100 dark:hover:mint-bg-zinc-800 active:mint-scale-[0.98] mint-bg-white dark:mint-bg-zinc-900 mint-border-zinc-300 dark:mint-border-zinc-700 mint-text-zinc-900 dark:mint-text-zinc-100", onClick: () => handleOpenVSCode(), children: [_jsx(_components.img, { src: "/assets/vscode.png", alt: "VS Code", className: "mint-w-3.5 mint-h-3.5" }), "Integrate in VS Code"] })] }), showCommand && _jsx(_components.div, { className: "mint-p-4 mint-border mint-border-zinc-300 dark:mint-border-zinc-700 mint-rounded-lg mint-bg-zinc-50 dark:mint-bg-zinc-900/50", children: _jsxs(_components.div, { className: "mint-flex mint-flex-col mint-gap-3", children: [_jsxs(_components.div, { className: "mint-flex mint-flex-col mint-gap-2", children: [_jsxs(_components.div, { className: "mint-flex mint-items-center mint-gap-2", children: [_jsx(_components.div, { className: "mint-flex-shrink-0 mint-w-5 mint-h-5 mint-rounded-full mint-flex mint-items-center mint-justify-center mint-text-[10px] mint-font-bold mint-text-white", style: { backgroundColor: themeColor }, children: "1" }), _jsx(_components.p, { className: "mint-text-sm mint-font-medium mint-text-zinc-900 dark:mint-text-zinc-100", children: "Copy this command" })] }), _jsxs(_components.div, { className: "mint-flex mint-items-center mint-gap-2 mint-overflow-hidden", children: [_jsx(_components.code, { className: "mint-flex-1 mint-bg-white dark:mint-bg-zinc-800 mint-px-3 mint-py-2.5 mint-rounded-md mint-text-xs mint-font-mono mint-truncate mint-block mint-max-w-[calc(100%-3rem)] mint-border mint-border-zinc-200 dark:mint-border-zinc-700 mint-text-zinc-900 dark:mint-text-zinc-100", children: npxCommand }), _jsx(_components.button, { type: "button", onClick: handleCopyCommand, className: "mint-flex-shrink-0 mint-p-2 mint-rounded-md hover:mint-bg-zinc-200 dark:hover:mint-bg-zinc-700 mint-transition-colors mint-border mint-border-zinc-300 dark:mint-border-zinc-600", title: "Copy command", children: hasCopied ? _jsx(_components.svg, { className: "mint-w-4 mint-h-4 mint-text-green-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx(_components.path, { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) : _jsx(_components.svg, { className: "mint-w-4 mint-h-4 mint-text-zinc-600 dark:mint-text-zinc-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx(_components.path, { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }) })] })] }), _jsxs(_components.div, { className: "mint-flex mint-flex-col mint-gap-2", children: [_jsxs(_components.div, { className: "mint-flex mint-items-center mint-gap-2", children: [_jsx(_components.div, { className: "mint-flex-shrink-0 mint-w-5 mint-h-5 mint-rounded-full mint-flex mint-items-center mint-justify-center mint-text-[10px] mint-font-bold mint-text-white", style: { backgroundColor: themeColor }, children: "2" }), _jsx(_components.p, { className: "mint-text-sm mint-font-medium mint-text-zinc-900 dark:mint-text-zinc-100", children: "Open VSCode and paste in terminal" })] }), _jsxs(_components.button, { type: "button", onClick: handleOpenVSCode, className: "mint-w-full mint-inline-flex mint-items-center mint-justify-center mint-gap-2 mint-px-4 mint-py-2.5 mint-text-sm mint-font-medium mint-rounded-md mint-text-white mint-transition-all hover:mint-opacity-90 active:mint-scale-[0.99]", style: { backgroundColor: themeColor }, children: [_jsxs(_components.svg, { className: "mint-w-4 mint-h-4", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [_jsx(_components.path, { d: "M13.3333 0L5 3.33333V16.6667L13.3333 20V0Z", fill: "currentColor" }), _jsx(_components.path, { d: "M13.3333 0L18.3333 3.75V16.25L13.3333 20V0Z", fill: "currentColor", opacity: "0.8" })] }), "Open VSCode"] })] })] }) })] }); }; const FrameworkGuide = ({framework, label, children}) => { return children; }; const Architecture = ({value, label, children}) => { return children; }; const iframeState = { listeners: [], params: {}, subscribe: fn => { iframeState.listeners.push(fn); return () => { iframeState.listeners = iframeState.listeners.filter(l => l !== fn); }; }, setParams: params => { iframeState.params = params; iframeState.listeners.forEach(fn => fn(params)); } }; const CodeFocusSection = ({docs = "mintlify", themeColor, linesStart, linesEnd, activeFilePath, title, description, children}) => { const _components = { div: "div", h4: "h4", p: "p", ..._provideComponents() }; const sectionRef = React.useRef(null); const hasTriggeredRef = React.useRef(false); const [isActive, setIsActive] = React.useState(false); const useProse = docs === "mintlify"; const getParams = React.useCallback(() => { const params = {}; if (docs) params.docs = docs; if (docs === "custom" && themeColor) params.theme = themeColor; if (linesStart !== undefined) params.linesStart = linesStart; if (linesEnd !== undefined) params.linesEnd = linesEnd; if (activeFilePath) params.activeFilePath = activeFilePath; return params; }, [docs, themeColor, linesStart, linesEnd, activeFilePath]); const handleFocus = React.useCallback(() => { iframeState.setParams(getParams()); setIsActive(true); }, [getParams]); React.useEffect(() => { const checkActive = params => { const myParams = getParams(); const isMatch = params.activeFilePath === myParams.activeFilePath && params.linesStart === myParams.linesStart && params.linesEnd === myParams.linesEnd; setIsActive(isMatch); if (params.platform !== undefined || params.framework !== undefined || params.activeFilePath !== myParams.activeFilePath) { hasTriggeredRef.current = false; } }; checkActive(iframeState.params); return iframeState.subscribe(checkActive); }, [getParams]); React.useEffect(() => { const element = sectionRef.current; if (!element) return; const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting && !hasTriggeredRef.current) { hasTriggeredRef.current = true; handleFocus(); } else if (!entry.isIntersecting) { hasTriggeredRef.current = false; } }); }, { threshold: 0, rootMargin: "-40% 0px -40% 0px" }); observer.observe(element); return () => observer.disconnect(); }, [handleFocus]); return _jsxs(_components.div, { ref: sectionRef, onClick: handleFocus, className: "mint-relative mint-py-6 mint-transition-colors mint-cursor-pointer", style: { marginLeft: "-1.5rem", marginRight: "-1.5rem", paddingLeft: "1.5rem", paddingRight: "1.5rem" }, children: [_jsx(_components.div, { className: "mint-absolute mint-top-0 mint-h-px", style: { backgroundColor: "rgba(128,128,128,0.2)", left: "-2rem", right: "-2rem" } }), isActive && _jsx(_components.div, { className: `mint-absolute mint--left-2 mint-top-0 mint-bottom-0 mint-w-1 ${useProse ? "bg-primary dark:bg-primary-light" : ""}`, style: !useProse && themeColor ? { backgroundColor: themeColor } : undefined }), title && _jsx(_components.div, { className: "mint-flex mint-items-center mint-gap-2 mint-mb-2", children: _jsx(_components.h4, { className: `mint-text-base mint-font-semibold mint-m-0 ${useProse && isActive ? "text-primary dark:text-primary-light" : ""}`, style: !useProse && isActive && themeColor ? { color: themeColor } : undefined, children: title }) }), description && _jsx(_components.p, { className: "mint-text-sm mint-text-gray-500 dark:mint-text-gray-400 mint-mt-1 mint-mb-0", children: description }), children && _jsx(_components.div, { className: "mint-mt-3", children: children })] }); }; const SideBySideLayout = ({previewSrc, children}) => { const _components = { button: "button", circle: "circle", div: "div", fieldset: "fieldset", iframe: "iframe", input: "input", label: "label", legend: "legend", option: "option", path: "path", select: "select", span: "span", style: "style", svg: "svg", ..._provideComponents() }; const iframeRef = React.useRef(null); const pendingParams = React.useRef(null); const iframeReady = React.useRef(false); const baseUrlRef = React.useRef(previewSrc); const architectures = React.useMemo(() => { const derived = []; React.Children.forEach(children, child => { if (child?.type === Architecture) { const archValue = child.props.value; const archLabel = child.props.label; const frameworks = []; React.Children.forEach(child.props.children, frameworkChild => { if (frameworkChild?.type === FrameworkGuide) { frameworks.push({ value: frameworkChild.props.framework, label: frameworkChild.props.label || frameworkChild.props.framework }); } }); derived.push({ value: archValue, label: archLabel, frameworks }); } }); return derived; }, [children]); const SettingsNavInternal = () => { const parseFrameworkValue = (archValue, fwValue, fwLabel) => { const archPrefix = archValue.toLowerCase().split(" ")[0]; const archPrefixMap = { javascript: "js", ios: "ios", android: "ad" }; const prefix = archPrefixMap[archPrefix] || archPrefix; let remaining = fwValue; if (fwValue.startsWith(prefix + "-")) { remaining = fwValue.slice(prefix.length + 1); } const labelParts = fwLabel.split(" + "); if (!fwLabel.includes(" + ")) { return { frontend: remaining, frontendLabel: fwLabel, backend: null, backendLabel: null, isFullStack: true }; } const parts = remaining.split("-"); if (parts.length >= 2) { return { frontend: parts[0], frontendLabel: labelParts[0] || parts[0], backend: parts.slice(1).join("-"), backendLabel: labelParts[1] || parts.slice(1).join("-"), isFullStack: false }; } return { frontend: remaining, frontendLabel: fwLabel, backend: null, backendLabel: null, isFullStack: true }; }; const [selections, setSelections] = React.useState(() => { const defaults = {}; if (architectures && architectures.length > 0) { const firstArch = architectures[0]; defaults.platform = firstArch.value; if (firstArch.frameworks && firstArch.frameworks.length > 0) { const firstFw = firstArch.frameworks[0]; const parsed = parseFrameworkValue(firstArch.value, firstFw.value, firstFw.label); defaults.client = parsed.frontend; defaults.server = parsed.backend; defaults.framework = firstFw.value; } } return defaults; }); const getAvailableOptions = React.useMemo(() => { const selectedArch = architectures?.find(arch => arch.value === selections.platform); const frameworks = selectedArch?.frameworks || []; const frontends = new Map(); const backends = new Map(); const fullStackFrameworks = []; frameworks.forEach(fw => { const parsed = parseFrameworkValue(selectedArch?.value || "", fw.value, fw.label); if (parsed.isFullStack) { fullStackFrameworks.push({ value: parsed.frontend, label: parsed.frontendLabel, fullFrameworkValue: fw.value }); } else { if (!frontends.has(parsed.frontend)) { frontends.set(parsed.frontend, { value: parsed.frontend, label: parsed.frontendLabel }); } if (parsed.backend && !backends.has(parsed.backend)) { backends.set(parsed.backend, { value: parsed.backend, label: parsed.backendLabel }); } } }); fullStackFrameworks.forEach(fs => { if (!frontends.has(fs.value)) { frontends.set(fs.value, { value: fs.value, label: fs.label, isFullStack: true, fullFrameworkValue: fs.fullFrameworkValue }); } }); return { frontends: Array.from(frontends.values()), backends: Array.from(backends.values()), fullStackFrameworks }; }, [architectures, selections.platform]); const isFullStackSelected = React.useMemo(() => { const frontend = getAvailableOptions.frontends.find(f => f.value === selections.client); return frontend?.isFullStack || false; }, [getAvailableOptions.frontends, selections.client]); const sections = [{ id: "platform", label: "Architecture:", options: architectures || [] }, { id: "client", label: "Frontend:", options: getAvailableOptions.frontends }, ...isFullStackSelected ? [] : [{ id: "server", label: "Backend:", options: getAvailableOptions.backends }]]; React.useEffect(() => { if (selections.platform || selections.framework) { iframeState.setParams({ ...iframeState.params, ...selections }); } }, []); const handleSelect = (sectionId, value) => { let newSelections = { ...selections, [sectionId]: value }; const getArchPrefix = archValue => { const archPrefix = archValue.toLowerCase().split(" ")[0]; const archPrefixMap = { javascript: "js", ios: "ios", android: "ad" }; return archPrefixMap[archPrefix] || archPrefix; }; const getBackendsForArch = archValue => { const arch = architectures?.find(a => a.value === archValue); const backends = new Map(); arch?.frameworks?.forEach(fw => { const parsed = parseFrameworkValue(arch.value, fw.value, fw.label); if (!parsed.isFullStack && parsed.backend) { backends.set(parsed.backend, parsed.backendLabel); } }); return Array.from(backends.keys()); }; if (sectionId === "platform") { const newArch = architectures?.find(arch => arch.value === value); if (newArch?.frameworks && newArch.frameworks.length > 0) { const firstFw = newArch.frameworks[0]; const parsed = parseFrameworkValue(newArch.value, firstFw.value, firstFw.label); newSelections.client = parsed.frontend; newSelections.server = parsed.backend; newSelections.framework = firstFw.value; } } if (sectionId === "client") { const selectedArch = architectures?.find(arch => arch.value === newSelections.platform); const frameworks = selectedArch?.frameworks || []; const fullStackFw = frameworks.find(fw => { const parsed = parseFrameworkValue(selectedArch?.value || "", fw.value, fw.label); return parsed.isFullStack && parsed.frontend === value; }); if (fullStackFw) { newSelections.server = null; newSelections.framework = fullStackFw.value; } else { const prefix = getArchPrefix(newSelections.platform); let server = newSelections.server; if (!server) { const availableBackends = getBackendsForArch(newSelections.platform); server = availableBackends[0] || null; newSelections.server = server; } if (server) { newSelections.framework = `${prefix}-${value}-${server}`; } } } if (sectionId === "server") { const prefix = getArchPrefix(newSelections.platform); const client = newSelections.client; newSelections.framework = `${prefix}-${client}-${value}`; } setSelections(newSelections); iframeState.setParams({ ...iframeState.params, ...newSelections }); }; return _jsx(_components.div, { className: "mint-w-full mint-sticky mint-top-0 mint-z-50 lg:mint--mx-8 mint-px-4 lg:mint-px-8 mint-py-6 mint-backdrop-blur-md", children: _jsx(_components.div, { className: "mint-flex mint-flex-wrap mint-items-center mint-justify-between", children: _jsx(_components.div, { className: "mint-flex mint-flex-wrap mint-items-center", style: { marginLeft: "-24px", marginTop: "-24px" }, children: sections.map(section => _jsxs(_components.div, { className: "mint-flex mint-items-center mint-flex-wrap", style: { marginTop: "24px", marginLeft: "24px" }, children: [_jsx(_components.span, { className: "mint-text-sm mint-font-semibold mint-text-gray-700 dark:mint-text-gray-300 mint-whitespace-nowrap mint-mr-3", children: section.label }), _jsxs(_components.fieldset, { className: "mint-hidden 2xl:mint-block mint-border-0 mint-p-0 mint-m-0", children: [_jsx(_components.legend, { className: "mint-sr-only", children: section.label }), _jsx(_components.div, { className: "mint-flex mint-items-center mint-gap-2", children: section.options.map(option => { const isSelected = selections[section.id] === option.value; return _jsxs(_components.div, { className: "mint-relative", children: [_jsx(_components.input, { type: "radio", id: `${section.id}-${option.value}`, name: section.id, value: option.value, checked: isSelected, onChange: () => handleSelect(section.id, option.value), className: "mint-sr-only" }), _jsx(_components.label, { htmlFor: `${section.id}-${option.value}`, className: `mint-inline-flex mint-items-center mint-px-3 mint-py-1.5 mint-text-xs mint-font-medium mint-rounded-md mint-border mint-transition-all mint-cursor-pointer active:mint-scale-[0.98] ${isSelected ? "mint-bg-white dark:mint-bg-zinc-900 border-primary dark:border-primary-light text-primary dark:text-primary-light hover:mint-bg-zinc-100 dark:hover:mint-bg-zinc-800" : "mint-bg-white dark:mint-bg-zinc-900 mint-border-zinc-300 dark:mint-border-zinc-700 mint-text-zinc-900 dark:mint-text-zinc-100 hover:mint-bg-zinc-100 dark:hover:mint-bg-zinc-800"}`, children: option.label })] }, option.value); }) })] }), _jsxs(_components.div, { className: "mint-block 2xl:mint-hidden mint-relative", children: [_jsx(_components.select, { value: selections[section.id], onChange: e => handleSelect(section.id, e.target.value), className: "mint-appearance-none mint-bg-white dark:mint-bg-zinc-900 mint-border mint-border-zinc-300 dark:mint-border-zinc-700 mint-rounded-md mint-px-3 mint-py-1.5 mint-pr-8 mint-text-xs mint-font-medium mint-text-zinc-900 dark:mint-text-zinc-100 focus:mint-outline-none focus:mint-ring-2 focus:ring-primary dark:focus:ring-primary-light focus:mint-border-transparent mint-transition-all hover:mint-bg-zinc-100 dark:hover:mint-bg-zinc-800", children: section.options.map(option => _jsx(_components.option, { value: option.value, children: option.label }, option.value)) }), _jsx(_components.svg, { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", className: "mint-absolute mint-right-2 mint-top-1/2 mint--translate-y-1/2 mint-pointer-events-none mint-text-zinc-400", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M2.35 9.915a.875.875 0 0 1 1.235-.065L8 13.823l4.415-3.973a.875.875 0 0 1 1.17 1.3l-5 4.5a.873.873 0 0 1-1.17 0l-5-4.5a.875.875 0 0 1-.065-1.235ZM7.415.35a.873.873 0 0 1 1.17 0l5 4.5a.875.875 0 1 1-1.17 1.3L8 2.177 3.585 6.15a.875.875 0 0 1-1.17-1.3l5-4.5Z", fill: "currentColor" }) })] })] }, section.id)) }) }) }); }; const getCurrentColor = () => { const temp = document.createElement("div"); temp.className = document.documentElement.classList.contains("dark") ? "dark:bg-primary-light" : "bg-primary"; document.body.appendChild(temp); const bgColor = getComputedStyle(temp).backgroundColor; document.body.removeChild(temp); return bgColor; }; function rgbToHex(rgb) { const match = rgb.match(/\d+/g); if (!match) return null; const [r, g, b] = match.map(Number); return "#" + [r, g, b].map(x => x.toString(16).padStart(2, "0")).join(""); } const getCurrentColorInHexadecimal = () => { return "%23" + rgbToHex(getCurrentColor()).split("#")[1]; }; const updateIframeTheme = React.useCallback(() => { if (iframeRef.current) { const currentParams = iframeState.params; let newSrc = baseUrlRef.current + "&theme=" + getCurrentColorInHexadecimal(); if (currentParams.iframeUrl) { newSrc += "&iframeUrl=" + encodeURIComponent(currentParams.iframeUrl); } iframeRef.current.src = newSrc; } }, []); React.useEffect(() => { const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.attributeName === "class") { updateIframeTheme(); } }); }); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); return () => observer.disconnect(); }, [updateIframeTheme]); React.useEffect(() => { let lastFramework = iframeState.params.framework; let lastFilePath = iframeState.params.activeFilePath; let debounceTimer = null; const handleParamsChange = params => { if (params.framework && params.framework !== lastFramework) { lastFramework = params.framework; if (iframeRef.current) { const url = new URL(iframeRef.current.src); url.searchParams.set("framework", params.framework); iframeRef.current.src = url.toString(); return; } } if (debounceTimer) { clearTimeout(debounceTimer); } const fileChanged = params.activeFilePath && params.activeFilePath !== lastFilePath; if (fileChanged) { lastFilePath = params.activeFilePath; } const delay = fileChanged ? 150 : 0; debounceTimer = setTimeout(() => { const message = { type: "UPDATE_VIEW", ...params }; if (iframeRef.current?.contentWindow) { iframeRef.current.contentWindow.postMessage(message, "*"); } }, delay); }; const unsubscribe = iframeState.subscribe(handleParamsChange); return () => { if (debounceTimer) clearTimeout(debounceTimer); unsubscribe(); }; }, []); const ActiveContent = () => { const [currentState, setCurrentState] = React.useState(() => { const params = iframeState.params; return { platform: params.platform || architectures[0]?.value, framework: params.framework || architectures[0]?.frameworks[0]?.value }; }); const [currentPageId, setCurrentPageId] = React.useState("1"); React.useEffect(() => { const handleUpdate = params => { if (params.platform !== undefined || params.framework !== undefined) { setCurrentState(prev => ({ platform: params.platform ?? prev.platform, framework: params.framework ?? prev.framework })); } }; return iframeState.subscribe(handleUpdate); }, []); let matchedContent = null; React.Children.forEach(children, child => { if (child?.type === Architecture && child.props.value === currentState.platform) { React.Children.forEach(child.props.children, frameworkChild => { if (frameworkChild?.type === FrameworkGuide && frameworkChild.props.framework === currentState.framework) { matchedContent = frameworkChild.props.children; } }); } }); const isPageComponent = child => { if (child?.props?.["data-page-id"]) return true; if (child?.type?.name === "Page") return true; if (typeof child?.type === "function" && child?.props?.id && child?.props?.title) { return true; } return false; }; const pages = React.useMemo(() => { const extracted = []; React.Children.forEach(matchedContent, child => { if (isPageComponent(child)) { let verificationSteps = null; const stepsData = child.props["data-page-verification-steps"] || child.props.verificationSteps; if (stepsData) { try { verificationSteps = typeof stepsData === "string" ? JSON.parse(stepsData) : stepsData; } catch (e) { console.warn("Failed to parse verification steps:", e); } } extracted.push({ id: child.props["data-page-id"] || child.props.id, title: child.props["data-page-title"] || child.props.title, content: child.props.children, verificationSteps }); } }); return extracted; }, [matchedContent]); React.useEffect(() => { if (pages.length > 0 && !pages.find(p => p.id === currentPageId)) { setCurrentPageId(pages[0].id); } }, [pages, currentPageId]); if (pages.length === 0) { return _jsx(_Fragment, { children: matchedContent }); } if (pages.length === 1) { const currentPage = pages[0]; return _jsx(_Fragment, { children: currentPage?.content }); } const currentPageIndex = pages.findIndex(p => p.id === currentPageId); const currentPage = pages[currentPageIndex]; const nextPage = currentPageIndex < pages.length - 1 ? pages[currentPageIndex + 1] : null; const [showStepsPopup, setShowStepsPopup] = React.useState(false); const [showVerificationPopup, setShowVerificationPopup] = React.useState(false); const [verificationSteps, setVerificationSteps] = React.useState([]); const [currentVerificationIndex, setCurrentVerificationIndex] = React.useState(0); const [verificationComplete, setVerificationComplete] = React.useState(false); const getVerificationStepsForPage = pageId => { const page = pages.find(p => p.id === pageId); if (page?.verificationSteps && page.verificationSteps.length > 0) { return page.verificationSteps; } const defaultSteps = [{ id: 1, label: "Checking configuration" }, { id: 2, label: "Validating setup" }, { id: 3, label: "Verifying connection" }, { id: 4, label: "Ready to continue" }]; return defaultSteps; }; const goToPage = pageId => { setCurrentPageId(pageId); setShowStepsPopup(false); window.scrollTo({ top: 0, behavior: "smooth" }); }; const handleNextClick = () => { if (!nextPage) return; const steps = getVerificationStepsForPage(currentPage.id); setVerificationSteps(steps); setCurrentVerificationIndex(0); setVerificationComplete(false); setShowVerificationPopup(true); steps.forEach((_, index) => { setTimeout(() => { setCurrentVerificationIndex(index); if (index === steps.length - 1) { setTimeout(() => { setVerificationComplete(true); }, 600); } }, (index + 1) * 800); }); }; const handleVerificationComplete = () => { setShowVerificationPopup(false); if (nextPage) { goToPage(nextPage.id); } }; const barContainerRef = React.useRef(null); React.useEffect(() => { const handleClickOutside = event => { if (barContainerRef.current && !barContainerRef.current.contains(event.target) && (showStepsPopup || showVerificationPopup)) { if (showVerificationPopup && !verificationComplete) { return; } setShowStepsPopup(false); if (verificationComplete) { setShowVerificationPopup(false); } } }; if (showStepsPopup || showVerificationPopup) { document.addEventListener("mousedown", handleClickOutside); return () => { document.removeEventListener("mousedown", handleClickOutside); }; } }, [showStepsPopup, showVerificationPopup, verificationComplete]); return _jsxs(_components.div, { className: "page-container mint-relative", children: [_jsx(_components.div, { className: "page-content mint-pb-24", children: currentPage?.content }), _jsx(_components.div, { className: "mint-sticky mint-bottom-4 mint-z-40", ref: barContainerRef, children: _jsxs(_components.div, { className: "mint-relative", children: [_jsx(_components.div, { className: "mint-bg-white dark:mint-bg-zinc-900 mint-border mint-border-gray-200 dark:mint-border-zinc-700 mint-shadow-lg mint-rounded-xl mint-px-4 mint-py-3", children: _jsxs(_components.div, { className: "mint-flex mint-items-center mint-justify-between mint-gap-4", children: [_jsxs(_components.button, { onClick: () => setShowStepsPopup(!showStepsPopup), className: "mint-flex mint-items-center mint-gap-3 mint-px-3 mint-py-2 mint-rounded-lg mint-bg-gray-100 dark:mint-bg-zinc-800 hover:mint-bg-gray-200 dark:hover:mint-bg-zinc-700 mint-transition-all", children: [_jsxs(_components.div, { className: "mint-flex mint-items-center mint-gap-2", children: [_jsx(_components.div, { className: "mint-w-6 mint-h-6 mint-rounded-full bg-primary dark:bg-primary-light mint-text-white mint-text-xs mint-font-bold mint-flex mint-items-center mint-justify-center", children: currentPageIndex + 1 }), _jsx(_components.span, { className: "mint-text-sm mint-font-medium mint-text-gray-700 dark:mint-text-gray-300", children: currentPage?.title })] }), _jsx(_components.svg, { className: `mint-w-4 mint-h-4 mint-text-gray-400 mint-transition-transform ${showStepsPopup ? "mint-rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx(_components.path, { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), nextPage ? _jsxs(_components.button, { onClick: handleNextClick, className: "mint-flex mint-items-center mint-gap-2 mint-px-5 mint-py-2 mint-rounded-lg bg-primary dark:bg-primary-light mint-text-white mint-font-medium hover:mint-opacity-90 mint-transition-all", children: [_jsx(_components.span, { children: "Verify" }), _jsx(_components.svg, { className: "mint-w-4 mint-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx(_components.path, { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })] }) : _jsxs(_components.div, { className: "mint-flex mint-items-center mint-gap-2 mint-px-5 mint-py-2 mint-rounded-lg mint-bg-green-500 mint-text-white mint-font-medium", children: [_jsx(_components.svg, { className: "mint-w-4 mint-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx(_components.path, { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }), _jsx(_components.span, { children: "Complete" })] })] }) }), showStepsPopup && _jsx(_components.div, { className: "mint-absolute mint-bottom-full mint-left-0 mint-right-0 mint-mb-2 mint-z-50", children: _jsxs(_components.div, { className: "mint-bg-white dark:mint-bg-zinc-900 mint-border mint-border-gray-200 dark:mint-border-zinc-700 mint-shadow-2xl mint-rounded-xl mint-overflow-hidden animate-expand-up", children: [_jsxs(_components.div, { className: "mint-flex mint-items-center mint-justify-between mint-px-3 mint-py-2 mint-border-b mint-border-gray-200 dark:mint-border-zinc-700 mint-bg-gray-50 dark:mint-bg-zinc-800/50", children: [_jsxs(_components.div, { className: "mint-flex mint-items-center mint-gap-2", children: [_jsx(_components.div, { className: "mint-w-5 mint-h-5 mint-rounded-full bg-primary dark:bg-primary-light mint-text-white mint-text-xs mint-font-bold mint-flex mint-items-center mint-justify-center mint-leading-none", children: pages.length }), _jsx(_components.span, { className: "mint-text-sm mint-font-semibold mint-text-gray-900 dark:mint-text-white mint-leading-none", children: "Steps" })] }), _jsx(_components.button, { onClick: () => setShowStepsPopup(false), className: "mint-p-1 mint-rounded-md hover:mint-bg-gray-200 dark:hover:mint-bg-zinc-700 mint-transition-colors mint-flex-shrink-0", children: _jsx(_components.svg, { className: "mint-w-4 mint-h-4 mint-text-gray-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx(_components.path, { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx(_components.div, { className: "mint-p-3 mint-space-y-1 mint-max-h-80 mint-overflow-y-auto", children: pages.map((page, index) => { const isCompleted = index < currentPageIndex; const isCurrent = page.id === currentPageId; const isDisabled = index > currentPageIndex; return _jsxs(_components.div, { className: "mint-relative mint-group", children: [_jsxs(_components.button, { onClick: () => !isDisabled && goToPage(page.id), disabled: isDisabled, className: `mint-w-full mint-flex mint-items-center mint-gap-3 mint-p-2.5 mint-rounded-lg mint-text-left mint-transition-all ${isCurrent ? "bg-primary/10 dark:bg-primary-light/10 mint-border border-primary/30 dark:border-primary-light/30" : isDisabled ? "mint-opacity-50 mint-cursor-not-allowed" : "hover:mint-bg-gray-100 dark:hover:mint-bg-zinc-800"}`, children: [_jsx(_components.div, { className: `mint-flex-shrink-0 mint-w-7 mint-h-7 mint-rounded-full mint-flex mint-items-center mint-justify-center mint-text-xs mint-font-bold mint-transition-all ${isCompleted ? "bg-primary dark:bg-primary-light mint-text-white" : isCurrent ? "bg-primary dark:bg-primary-light mint-text-white" : isDisabled ? "mint-bg-gray-100 dark:mint-bg-zinc-800 mint-text-gray-400 dark:mint-text-gray-600" : "mint-bg-gray-200 dark:mint-bg-zinc-700 mint-text-gray-500 dark:mint-text-gray-400"}`, children: isCompleted ? _jsx(_components.svg, { className: "mint-w-3.5 mint-h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: _jsx(_components.path, { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }) : index + 1 }), _jsx(_components.span, { className: `mint-text-sm mint-font-medium ${isCurrent ? "text-primary dark:text-primary-light" : isCompleted ? "mint-text-gray-500 dark:mint-text-gray-400" : isDisabled ? "mint-text-gray-400 dark:mint-text-gray-600" : "mint-text-gray-700 dark:mint-text-gray-300"}`, children: page.title })] }), isDisabled && _jsxs(_components.div, { className: "mint-absolute mint-left-0 mint-bottom-full mint-mb-2 mint-w-64 mint-px-3 mint-py-2 mint-bg-gray-900 dark:mint-bg-gray-700 mint-text-white mint-text-xs mint-rounded-lg mint-shadow-lg mint-opacity-0 group-hover:mint-opacity-100 mint-transition-opacity mint-pointer-events-none mint-z-50", children: ["Please complete all steps in this guide and press verify", _jsx(_components.div, { className: "mint-absolute mint-top-full mint-left-4 mint-w-0 mint-h-0 mint-border-l-4 mint-border-r-4 mint-border-t-4 mint-border-transparent mint-border-t-gray-900 dark:mint-border-t-gray-700" })] })] }, page.id); }) })] }) }), showVerificationPopup && _jsx(_components.div, { className: "mint-absolute mint-bottom-full mint-left-0 mint-right-0 mint-mb-2 mint-z-50", children: _jsxs(_components.div, { className: "mint-bg-white dark:mint-bg-zinc-900 mint-border mint-border-gray-200 dark:mint-border-zinc-700 mint-shadow-2xl mint-rounded-xl mint-overflow-hidden animate-expand-up", children: [_jsxs(_components.div, { className: "mint-flex mint-items-center mint-justify-between mint-px-3 mint-py-2 mint-border-b mint-border-gray-200 dark:mint-border-zinc-700 mint-bg-gray-50 dark:mint-bg-zinc-800/50", children: [_jsxs(_components.div, { className: "mint-flex mint-items-center mint-gap-2", children: [_jsx(_components.div, { className: "mint-w-5 mint-h-5 mint-rounded-full bg-primary dark:bg-primary-light mint-text-white mint-text-xs mint-font-bold mint-flex mint-items-center mint-justify-center mint-leading-none", children: verificationSteps.length }), _jsx(_components.span, { className: "mint-text-sm mint-font-semibold mint-text-gray-900 dark:mint-text-white mint-leading-none", children: verificationComplete ? "Verification Complete" : "Verifying..." })] }), verificationComplete && _jsx(_components.button, { onClick: () => setShowVerificationPopup(false), className: "mint-p-1 mint-rounded-md hover:mint-bg-gray-200 dark:hover:mint-bg-zinc-700 mint-transition-colors mint-flex-shrink-0", children: _jsx(_components.svg, { className: "mint-w-4 mint-h-4 mint-text-gray-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx(_components.path, { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx(_components.div, { className: "mint-p-3 mint-space-y-2", children: verificationSteps.map((step, index) => { const isChecked = index <= currentVerificationIndex; const isActive = index === currentVerificationIndex && !verificationComplete; return _jsxs(_components.div, { className: `mint-flex mint-items-center mint-gap-3 mint-p-2 mint-rounded-lg mint-transition-all mint-duration-300 ${isActive ? "bg-primary/5 dark:bg-primary-light/5" : ""}`, children: [_jsx(_components.div, { className: `mint-flex-shrink-0 mint-w-6 mint-h-6 mint-rounded-md mint-border-2 mint-flex mint-items-center mint-justify-center mint-transition-all mint-duration-300 ${isChecked ? "bg-primary dark:bg-primary-light border-primary dark:border-primary-light" : "mint-border-gray-300 dark:mint-border-zinc-600"}`, children: isChecked && _jsx(_components.svg, { className: "mint-w-4 mint-h-4 mint-text-white animate-check", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: _jsx(_components.path, { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }) }), _jsx(_components.span, { className: `mint-text-sm mint-font-medium mint-transition-all mint-duration-300 ${isChecked ? "mint-text-gray-900 dark:mint-text-white" : "mint-text-gray-400 dark:mint-text-gray-500"}`, children: step.label }), isActive && _jsx(_components.div, { className: "mint-ml-auto", children: _jsxs(_components.svg, { className: "mint-w-4 mint-h-4 text-primary dark:text-primary-light mint-animate-spin", fill: "none", viewBox: "0 0 24 24", children: [_jsx(_components.circle, { className: "mint-opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx(_components.path, { className: "mint-opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) })] }, step.id); }) }), verificationComplete && _jsx(_components.div, { className: "mint-px-3 mint-pb-3", children: _jsxs(_components.button, { onClick: handleVerificationComplete, className: "mint-w-full mint-flex mint-items-center mint-justify-center mint-gap-2 mint-px-4 mint-py-2.5 mint-rounded-lg bg-primary dark:bg-primary-light mint-text-white mint-font-medium hover:mint-opacity-90 mint-transition-all mint-text-sm", children: [_jsxs(_components.span, { children: ["Continue to ", nextPage?.title] }), _jsx(_components.svg, { className: "mint-w-4 mint-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx(_components.path, { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })] }) })] }) })] }) }), _jsx(_components.style, { children: ` @keyframes expand-up { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .animate-expand-up { animation: expand-up 0.2s ease-out; } @keyframes check { from { transform: scale(0); } to { transform: scale(1); } } .animate-check { animation: check 0.2s ease-out; } ` })] }); }; return _jsxs(_components.div, { className: "mint-mx-auto mint-px-4 lg:mint-px-8 mint-flex mint-flex-col", children: [_jsx(SettingsNavInternal, {}), _jsx(_components.div, { className: "mint-rounded-2xl mint-shadow-sm mint-flex-1", children: _jsxs(_components.div, { className: "mint-grid mint-gap-8 lg:mint-gap-10 mint-items-start", style: { gridTemplateColumns: "minmax(0, 0.8fr) minmax(0, 1.2fr)" }, children: [_jsx(_components.div, { className: "prose prose-gray dark:prose-invert mint-max-w-none mint-pr-2", children: _jsx(ActiveContent, {}) }), _jsx(_components.div, { className: "mint-sticky mint-top-20", children: _jsx(_components.div, { style: { borderRadius: "0.5rem", overflow: "hidden", background: "#020617", height: "calc(100vh - 180px)" }, children: _jsx(_components.iframe, { ref: iframeRef, src: (() => { const src = previewSrc + "&theme=" + getCurrentColorInHexadecimal() + (iframeState.params.iframeUrl ? "&iframeUrl=" + encodeURIComponent(iframeState.params.iframeUrl) : ""); return src; })(), title: "App preview", style: { width: "100%", height: "calc(100vh - 180px)", border: "0" }, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }) }) })] }) })] }); }; function _createMdxContent(props) { const _components = { a: "a", code: "code", h1: "h1", h3: "h3", h4: "h4", p: "p", pre: "pre", span: "span", strong: "strong", ..._provideComponents(), ...props.components }, {CodeBlock} = _components; if (!CodeBlock) _missingMdxReference("CodeBlock", true); return _jsxs(SideBySideLayout, { previewSrc: "https://stripe-sandbox.sampleapp.ai/accept-payments-with-stripe-checkout?framework=js-html-ruby&isFrame=true", children: [_jsxs(Architecture, { value: "JavaScript SDK", label: "JavaScript SDK", children: [_jsxs(FrameworkGuide, { framework: "js-html-ruby", label: "HTML + Ruby", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-checkout-prebuilt-subscription-ruby/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-checkout-prebuilt-subscription-ruby", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 2, linesEnd: 4, title: "Install the Stripe Ruby library", children: [_jsx(_components.p, { children: "Install the Stripe ruby gem and require it in your code. Alternatively, if you’re starting from scratch and need a Gemfile, download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Terminal:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "gem" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe" })] }), "\n"] }) }) }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Bundler (add to Gemfile):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "ruby", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "ruby", children: _jsxs(_components.code, { language: "ruby", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "gem " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "stripe" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 82, linesEnd: 103, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 89, linesEnd: 91, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout page on the client" }), _jsx(CodeFocusSection, { activeFilePath: "public/checkout.html", linesStart: 9, linesEnd: 9, title: "Load Stripe.js", children: _jsxs(_components.p, { children: ["Use Stripe.js to remain PCI compliant by ensuring that payment details are sent directly to Stripe without hitting your server. Always load Stripe.js from ", _jsx(_components.code, { children: "js.stripe.com" }), " to remain compliant. Don’t include the script in a bundle or host it yourself."] }) }), _jsx(CodeFocusSection, { activeFilePath: "public/checkout.html", linesStart: 14, linesEnd: 24, title: "Define the payment form", children: _jsxs(_components.p, { children: ["Add one empty placeholder ", _jsx(_components.code, { children: "div" }), " to your checkout form for each Element that you’ll mount. Stripe inserts an iframe into each ", _jsx(_components.code, { children: "div" }), " to securely collect the customer’s email address and payment information."] }) }), _jsxs(CodeFocusSection, { activeFilePath: "public/checkout.js", linesStart: 2, linesEnd: 2, title: "Initialize Stripe.js", children: [_jsx(_components.p, { children: "Initialize Stripe.js with your publishable API key. You’ll use Stripe.js to create the Payment Element and complete the payment on the client." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " This is a public sample test API key. Don’t submit any personally identifiable information in requests made with this key."] })] }), _jsx(CodeFocusSection, { activeFilePath: "public/checkout.js", linesStart: 15, linesEnd: 35, title: "Fetch a PaymentIntent", children: _jsxs(_components.p, { children: ["Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The ", _jsx(_components.code, { children: "clientSecret" }), " returned by your endpoint is used to complete the payment."] }) }), _jsx(CodeFocusSection, { activeFilePath: "public/checkout.js", linesStart: 27, linesEnd: 27, title: "Initialize Stripe Elements", children: _jsx(_components.p, { children: "Initialize the Stripe Elements UI library with the client secret. Elements manages the UI components you need to collect payment details." }) }), _jsx(CodeFocusSection, { activeFilePath: "public/checkout.js", linesStart: 33, linesEnd: 34, title: "Create the PaymentElement", children: _jsxs(_components.p, { children: ["Create a ", _jsx(_components.code, { children: "PaymentElement" }), " and mount it to the placeholder ", _jsx(_components.code, { children: "

" }), " in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the PaymentIntent, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type."] }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsx(CodeFocusSection, { activeFilePath: "public/checkout.js", linesStart: 37, linesEnd: 62, title: "Handle the submit event", children: _jsx(_components.p, { children: "Listen to the form’s submit event to know when to confirm the payment through the Stripe API." }) }), _jsx(CodeFocusSection, { activeFilePath: "public/checkout.js", linesStart: 41, linesEnd: 48, title: "Complete the payment", children: _jsxs(_components.p, { children: ["Call ", _jsx(_components.code, { children: "confirmPayment" }), " with the Element instance and a ", _jsx(_components.code, { children: "return_url" }), " to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they’re redirected to the ", _jsx(_components.code, { children: "return_url" }), "."] }) }), _jsx(CodeFocusSection, { activeFilePath: "public/checkout.js", linesStart: 50, linesEnd: 59, title: "Handle errors", children: _jsx(_components.p, { children: "If there are any immediate errors (for example, your customer’s card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again." }) }), _jsx(CodeFocusSection, { activeFilePath: "public/complete.js", linesStart: 72, linesEnd: 86, title: "Show a payment status message", children: _jsxs(_components.p, { children: ["When Stripe redirects the customer to the ", _jsx(_components.code, { children: "return_url" }), ", the ", _jsx(_components.code, { children: "payment_intent_client_secret" }), " query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer."] }) }), _jsx(_components.h3, { children: "❹ Handle post-payment events" }), _jsxs(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 213, title: "Use a webhook", children: [_jsxs(_components.p, { children: ["Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the ", _jsx(_components.code, { children: "payment_intent.succeeded" }), ", ", _jsx(_components.code, { children: "payment_intent.processing" }), ", and ", _jsx(_components.code, { children: "payment_intent.payment_failed" }), " events."] }), _jsx(_components.p, { children: "Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration." })] }), _jsx(_components.h3, { children: "❺ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 213, title: "Run the application", children: [_jsxs(_components.p, { children: ["Run your server and go to ", _jsx(_components.code, { children: "localhost:4242/checkout.html" }), "."] }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "java" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " -cp" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " target/sample-jar-with-dependencies.jar" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " com.stripe.sample.Server" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 213, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 213, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 172, linesEnd: 179, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 188, linesEnd: 203, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Send an email receipt" }), _jsx(_components.p, { children: "Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard." }), _jsx(CodeFocusSection, { activeFilePath: "public/checkout.html", linesStart: 15, linesEnd: 15, title: "Collect the customer's email address", children: _jsx(_components.p, { children: "Add an input field to your payment form to collect the email address." }) }), _jsx(CodeFocusSection, { activeFilePath: "public/checkout.js", linesStart: 46, linesEnd: 46, title: "Provide the email address to Stripe", children: _jsxs(_components.p, { children: ["Pass the provided email address as the ", _jsx(_components.code, { children: "receipt_email" }), " value. Stripe sends an email receipt when the payment succeeds in live mode (but won’t send one in a sandbox)."] }) }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 25, linesEnd: 27, title: "Import additional Stripe resources", children: _jsx(_components.p, { children: "Import the Stripe PaymentMethod and Customer models. Use these models to store information about your Customer." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 146, linesEnd: 169, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 177, linesEnd: 178, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 111, linesEnd: 134, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 213, title: "Collect billing address details", children: _jsx(_components.p, { children: "By default, the Payment Element only collects the necessary billing address details. To collect a customer’s full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 213, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 213, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 213, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "js-react-ruby", label: "React + Ruby", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-js-react-ruby/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-js-react-ruby", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "Gemfile", linesStart: 1, linesEnd: 4, title: "Install the Stripe Ruby library", children: [_jsx(_components.p, { children: "Install the Stripe ruby gem and require it in your code. Alternatively, if you’re starting from scratch and need a Gemfile, download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Terminal:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "gem" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe" })] }), "\n"] }) }) }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Bundler (add to Gemfile):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "ruby", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "ruby", children: _jsxs(_components.code, { language: "ruby", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "gem " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "stripe" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 67, linesEnd: 104, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 88, linesEnd: 91, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout page on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "package.json", linesStart: 5, linesEnd: 11, title: "Add Stripe to your React app", children: [_jsx(_components.p, { children: "Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server." }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --save" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/react-stripe-js" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/stripe-js" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 14, linesEnd: 17, title: "Load Stripe.js", children: _jsxs(_components.p, { children: ["Call ", _jsx(_components.code, { children: "loadStripe()" }), " with your Stripe publishable API key to configure the Stripe library."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 22, linesEnd: 31, title: "Fetch a PaymentIntent", children: _jsxs(_components.p, { children: ["Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The ", _jsx(_components.code, { children: "clientSecret" }), " returned by your endpoint is used to complete the payment."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 39, linesEnd: 52, title: "Initialize Stripe Elements", children: _jsxs(_components.p, { children: ["Pass the resulting promise from ", _jsx(_components.code, { children: "loadStripe" }), " to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 12, linesEnd: 15, title: "Set up the state", children: _jsx(_components.p, { children: "Initialize some state to keep track of the payment, show errors, and manage the user interface." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 8, linesEnd: 10, title: "Store a reference to Stripe", children: _jsxs(_components.p, { children: ["Access the Stripe library in your CheckoutForm component by using the ", _jsx(_components.code, { children: "useStripe()" }), " and ", _jsx(_components.code, { children: "useElements()" }), " hooks. If you need to access Elements with a class component, use the ElementsConsumer instead."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 55, linesEnd: 73, title: "Add the PaymentElement", children: _jsx(_components.p, { children: "Add PaymentElement to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 33, linesEnd: 37, title: "(Optional) Style the Payment Element", children: _jsx(_components.p, { children: "Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company’s colour scheme and font to make it match with the rest of your checkout page." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 17, linesEnd: 49, title: "Complete the payment", children: _jsxs(_components.p, { children: ["When your customer clicks the pay button, call ", _jsx(_components.code, { children: "confirmPayment" }), " with the PaymentElement and pass a ", _jsx(_components.code, { children: "return_url" }), " to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 42, linesEnd: 46, title: "Handle errors", children: _jsx(_components.p, { children: "If there are any immediate errors (for example, your customer’s card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CompletePage.jsx", linesStart: 47, linesEnd: 105, title: "Show a payment status message", children: _jsxs(_components.p, { children: ["When Stripe redirects the customer to the ", _jsx(_components.code, { children: "return_url" }), ", the ", _jsx(_components.code, { children: "payment_intent_client_secret" }), " query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer."] }) }), _jsx(_components.h3, { children: "❹ Handle post-payment events" }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 67, linesEnd: 104, title: "Use a webhook", children: [_jsxs(_components.p, { children: ["Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the ", _jsx(_components.code, { children: "payment_intent.succeeded" }), ", ", _jsx(_components.code, { children: "payment_intent.processing" }), ", and ", _jsx(_components.code, { children: "payment_intent.payment_failed" }), " events."] }), _jsx(_components.p, { children: "Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response." })] }), _jsx(_components.h3, { children: "❺ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 8, title: "Run the server application", children: [_jsx(_components.p, { children: "Run the React app and the server. Go to localhost:3000/checkout to see your checkout page." }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "ruby" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " server.rb" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "package.json", linesStart: 15, linesEnd: 19, title: "Run the application", children: [_jsx(_components.p, { children: "Run the React app and go to localhost:3000/checkout." }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " start" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 1, linesEnd: 75, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 9, linesEnd: 24, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 92, linesEnd: 98, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Send an email receipt" }), _jsx(_components.p, { children: "Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard." }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 57, linesEnd: 63, title: "Collect the customer's email address", children: _jsx(_components.p, { children: "Add an input field to your payment form to collect the email address." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 12, linesEnd: 12, title: "Add email to the state", children: _jsx(_components.p, { children: "Add a variable to keep track of the email the customer enters." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 28, linesEnd: 35, title: "Provide the email address to Stripe", children: _jsxs(_components.p, { children: ["Pass the provided email address as the ", _jsx(_components.code, { children: "receipt_email" }), " value. Stripe sends an email receipt when the payment succeeds in live mode (but won’t send one in a sandbox)."] }) }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 72, linesEnd: 78, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 83, linesEnd: 86, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 41, linesEnd: 64, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "Collect billing address details", children: _jsx(_components.p, { children: "By default, the Payment Element only collects the necessary billing address details. To collect a customer’s full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "js-react-nodejs", label: "React + Node.js", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-js-react-nodejs/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-js-react-nodejs", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 4, title: "Install the Stripe Node library", children: [_jsx(_components.p, { children: "Install the package and import it in your code. Alternatively, if you’re starting from scratch and need a package.json file, download the project files using the Download link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "npm:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --save" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 66, linesEnd: 106, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 91, linesEnd: 93, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout page on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 1, linesEnd: 3, title: "Add Stripe to your React app", children: [_jsx(_components.p, { children: "Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server." }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --save" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/react-stripe-js" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/stripe-js" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 14, linesEnd: 17, title: "Load Stripe.js", children: _jsxs(_components.p, { children: ["Call ", _jsx(_components.code, { children: "loadStripe()" }), " with your Stripe publishable API key to configure the Stripe library."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 22, linesEnd: 31, title: "Fetch a PaymentIntent", children: _jsxs(_components.p, { children: ["Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The ", _jsx(_components.code, { children: "clientSecret" }), " returned by your endpoint is used to complete the payment."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 39, linesEnd: 51, title: "Initialize Stripe Elements", children: _jsxs(_components.p, { children: ["Pass the resulting promise from ", _jsx(_components.code, { children: "loadStripe" }), " to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 12, linesEnd: 15, title: "Set up the state", children: _jsx(_components.p, { children: "Initialize some state to keep track of the payment, show errors, and manage the user interface." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 8, linesEnd: 10, title: "Store a reference to Stripe", children: _jsxs(_components.p, { children: ["Access the Stripe library in your CheckoutForm component by using the ", _jsx(_components.code, { children: "useStripe()" }), " and ", _jsx(_components.code, { children: "useElements()" }), " hooks. If you need to access Elements with a class component, use the ElementsConsumer instead."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 55, linesEnd: 74, title: "Add the PaymentElement", children: _jsxs(_components.p, { children: ["Add ", _jsx(_components.code, { children: "PaymentElement" }), " to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection."] }) }), _jsxs(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 33, linesEnd: 37, title: "(Optional) Style the Payment Element", children: [_jsxs(_components.p, { children: ["Customise the Payment Element UI by creating an ", _jsx(_components.code, { children: "Appearance" }), " object and passing it as an option to the Elements provider. Use your company’s colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set."] }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Make sure to open the preview on the right to see your changes live." }) })] }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 28, linesEnd: 35, title: "Complete the payment", children: _jsxs(_components.p, { children: ["When your customer clicks the pay button, call ", _jsx(_components.code, { children: "confirmPayment" }), " with the PaymentElement and pass a ", _jsx(_components.code, { children: "return_url" }), " to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they’re redirected to the ", _jsx(_components.code, { children: "return_url" }), "."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 37, linesEnd: 48, title: "Handle errors", children: _jsx(_components.p, { children: "If there are any immediate errors (for example, your customer’s card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CompletePage.jsx", linesStart: 47, linesEnd: 104, title: "Show a payment status message", children: _jsxs(_components.p, { children: ["When Stripe redirects the customer to the ", _jsx(_components.code, { children: "return_url" }), ", the ", _jsx(_components.code, { children: "payment_intent_client_secret" }), " query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer."] }) }), _jsx(_components.h3, { children: "❹ Handle post-payment events" }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 66, linesEnd: 106, title: "Use a webhook", children: [_jsxs(_components.p, { children: ["Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the ", _jsx(_components.code, { children: "payment_intent.succeeded" }), ", ", _jsx(_components.code, { children: "payment_intent.processing" }), ", and ", _jsx(_components.code, { children: "payment_intent.payment_failed" }), " events."] }), _jsx(_components.p, { children: "Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration." })] }), _jsx(_components.h3, { children: "❺ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 110, linesEnd: 110, title: "Run the application", children: [_jsx(_components.p, { children: "Run the React app and the server. Go to localhost:3000/checkout to see your checkout page." }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " start" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 9, linesEnd: 26, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 94, linesEnd: 100, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Send an email receipt" }), _jsx(_components.p, { children: "Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard." }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 57, linesEnd: 63, title: "Collect the customer's email address", children: _jsx(_components.p, { children: "Add an input field to your payment form to collect the email address." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 12, linesEnd: 12, title: "Add email to the state", children: _jsx(_components.p, { children: "Add a variable to keep track of the email the customer enters." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 28, linesEnd: 35, title: "Provide the email address to Stripe", children: _jsxs(_components.p, { children: ["Pass the provided email address as the ", _jsx(_components.code, { children: "receipt_email" }), " value. Stripe sends an email receipt when the payment succeeds in live mode (but won’t send one in a sandbox)."] }) }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 70, linesEnd: 78, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 86, linesEnd: 87, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 42, linesEnd: 64, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 1, linesEnd: 75, title: "Collect billing address details", children: _jsx(_components.p, { children: "By default, the Payment Element only collects the necessary billing address details. To collect a customer’s full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "js-react-php", label: "React + PHP", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-js-react-php/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-js-react-php", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "composer.json", linesStart: 1, linesEnd: 7, title: "Install the Stripe PHP library", children: [_jsx(_components.p, { children: "Install the library with composer and initialize with your secret API key. Alternatively, if you’re starting from scratch and need a composer.json file, download the files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Composer:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "composer" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " require" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe/stripe-php" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 64, linesEnd: 80, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 70, linesEnd: 72, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout page on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "package.json", linesStart: 5, linesEnd: 7, title: "Add Stripe to your React app", children: [_jsx(_components.p, { children: "Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "npm:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --save" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/react-stripe-js" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/stripe-js" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 14, linesEnd: 17, title: "Load Stripe.js", children: _jsxs(_components.p, { children: ["Call ", _jsx(_components.code, { children: "loadStripe()" }), " with your Stripe publishable API key to configure the Stripe library."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 22, linesEnd: 31, title: "Fetch a PaymentIntent", children: _jsxs(_components.p, { children: ["Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The ", _jsx(_components.code, { children: "clientSecret" }), " returned by your endpoint is used to complete the payment."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 39, linesEnd: 49, title: "Initialize Stripe Elements", children: _jsxs(_components.p, { children: ["Pass the resulting promise from ", _jsx(_components.code, { children: "loadStripe" }), " to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 12, linesEnd: 15, title: "Set up the state", children: _jsx(_components.p, { children: "Initialize some state to keep track of the payment, show errors, and manage the user interface." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 8, linesEnd: 10, title: "Store a reference to Stripe", children: _jsxs(_components.p, { children: ["Access the Stripe library in your CheckoutForm component by using the ", _jsx(_components.code, { children: "useStripe()" }), " and ", _jsx(_components.code, { children: "useElements()" }), " hooks. If you need to access Elements with a class component, use the ElementsConsumer instead."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 55, linesEnd: 73, title: "Add the PaymentElement", children: _jsxs(_components.p, { children: ["Add ", _jsx(_components.code, { children: "PaymentElement" }), " to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection."] }) }), _jsxs(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 33, linesEnd: 37, title: "(Optional) Style the Payment Element", children: [_jsx(_components.p, { children: "Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company’s colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " Parts of the preview demo might not match your actual checkout page. The above settings represent only a subset of the Appearance object’s variables and the Appearance object only controls certain attributes of Stripe Elements. You’re responsible for styling the rest of your checkout page."] })] }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 28, linesEnd: 35, title: "Complete the payment", children: _jsxs(_components.p, { children: ["When your customer clicks the pay button, call ", _jsx(_components.code, { children: "confirmPayment" }), " with the PaymentElement and pass a ", _jsx(_components.code, { children: "return_url" }), " to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they’re redirected to the ", _jsx(_components.code, { children: "return_url" }), "."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 42, linesEnd: 48, title: "Handle errors", children: _jsx(_components.p, { children: "If there are any immediate errors (for example, your customer’s card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CompletePage.jsx", linesStart: 53, linesEnd: 74, title: "Show a payment status message", children: _jsxs(_components.p, { children: ["When Stripe redirects the customer to the ", _jsx(_components.code, { children: "return_url" }), ", the ", _jsx(_components.code, { children: "payment_intent_client_secret" }), " query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer."] }) }), _jsx(_components.h3, { children: "❹ Handle post-payment events" }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 42, linesEnd: 90, title: "Use a webhook", children: [_jsxs(_components.p, { children: ["Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the ", _jsx(_components.code, { children: "payment_intent.succeeded" }), ", ", _jsx(_components.code, { children: "payment_intent.processing" }), ", and ", _jsx(_components.code, { children: "payment_intent.payment_failed" }), " events."] }), _jsx(_components.p, { children: "Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration." })] }), _jsx(_components.h3, { children: "❺ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 1, linesEnd: 92, title: "Run the server application", children: [_jsxs(_components.p, { children: ["Run the React app and the server. Go to ", _jsx(_components.code, { children: "localhost:3000/checkout" }), " to see your checkout page."] }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Terminal:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "php" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " -S" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " 127.0.0.1:4242" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --docroot=public" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 1, linesEnd: 53, title: "Run the application", children: [_jsxs(_components.p, { children: ["Run the React app and go to ", _jsx(_components.code, { children: "localhost:3000/checkout" }), "."] }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Terminal:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " start" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 1, linesEnd: 75, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "src/CompletePage.jsx", linesStart: 76, linesEnd: 105, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 8, linesEnd: 25, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 73, linesEnd: 79, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Send an email receipt" }), _jsx(_components.p, { children: "Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard." }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 57, linesEnd: 63, title: "Collect the customer's email address", children: _jsx(_components.p, { children: "Add an input field to your payment form to collect the email address." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 12, linesEnd: 12, title: "Add email to the state", children: _jsx(_components.p, { children: "Add a variable to keep track of the email the customer enters." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 30, linesEnd: 34, title: "Provide the email address to Stripe", children: _jsxs(_components.p, { children: ["Pass the provided email address as the ", _jsx(_components.code, { children: "receipt_email" }), " value. Stripe sends an email receipt when the payment succeeds in live mode (but won’t send one in a sandbox)."] }) }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 49, linesEnd: 59, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 65, linesEnd: 66, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "charge.php", linesStart: 21, linesEnd: 28, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h3, { children: "Next steps" }), _jsx(_components.h4, { children: "Collect billing address details" }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 65, linesEnd: 65, title: "Collect billing address details", children: _jsx(_components.p, { children: "By default, the Payment Element only collects the necessary billing address details. To collect a customer’s full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element." }) }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 1, linesEnd: 92, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 1, linesEnd: 92, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 1, linesEnd: 92, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "js-react-python", label: "React + Python", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-js-react-python/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-js-react-python", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 5, linesEnd: 7, title: "Install the Stripe Python package", children: [_jsx(_components.p, { children: "Install the Stripe package and import it in your code. Alternatively, if you’re starting from scratch and need a requirements.txt file, download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "pip:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "pip3" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 78, linesEnd: 117, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 101, linesEnd: 104, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout page on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 1, linesEnd: 12, title: "Add Stripe to your React app", children: [_jsx(_components.p, { children: "Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "npm:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --save" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/react-stripe-js" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/stripe-js" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 14, linesEnd: 17, title: "Load Stripe.js", children: _jsxs(_components.p, { children: ["Call ", _jsx(_components.code, { children: "loadStripe()" }), " with your Stripe publishable API key to configure the Stripe library."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 22, linesEnd: 31, title: "Fetch a PaymentIntent", children: _jsxs(_components.p, { children: ["Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The ", _jsx(_components.code, { children: "clientSecret" }), " returned by your endpoint is used to complete the payment."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 39, linesEnd: 52, title: "Initialize Stripe Elements", children: _jsxs(_components.p, { children: ["Pass the resulting promise from ", _jsx(_components.code, { children: "loadStripe" }), " to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 12, linesEnd: 15, title: "Set up the state", children: _jsx(_components.p, { children: "Initialize some state to keep track of the payment, show errors, and manage the user interface." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 8, linesEnd: 10, title: "Store a reference to Stripe", children: _jsxs(_components.p, { children: ["Access the Stripe library in your CheckoutForm component by using the ", _jsx(_components.code, { children: "useStripe()" }), " and ", _jsx(_components.code, { children: "useElements()" }), " hooks. If you need to access Elements with a class component, use the ElementsConsumer instead."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 55, linesEnd: 73, title: "Add the PaymentElement", children: _jsxs(_components.p, { children: ["Add ", _jsx(_components.code, { children: "PaymentElement" }), " to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection."] }) }), _jsxs(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 33, linesEnd: 37, title: "(Optional) Style the Payment Element", children: [_jsx(_components.p, { children: "Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company’s colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " Parts of the preview demo might not match your actual checkout page. The above settings represent only a subset of the Appearance object’s variables and the Appearance object only controls certain attributes of Stripe Elements. You’re responsible for styling the rest of your checkout page."] })] }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 17, linesEnd: 35, title: "Complete the payment", children: _jsxs(_components.p, { children: ["When your customer clicks the pay button, call ", _jsx(_components.code, { children: "confirmPayment" }), " with the PaymentElement and pass a ", _jsx(_components.code, { children: "return_url" }), " to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they’re redirected to the ", _jsx(_components.code, { children: "return_url" }), "."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 42, linesEnd: 48, title: "Handle errors", children: _jsx(_components.p, { children: "If there are any immediate errors (for example, your customer’s card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CompletePage.jsx", linesStart: 47, linesEnd: 104, title: "Show a payment status message", children: _jsxs(_components.p, { children: ["When Stripe redirects the customer to the ", _jsx(_components.code, { children: "return_url" }), ", the ", _jsx(_components.code, { children: "payment_intent_client_secret" }), " query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer."] }) }), _jsx(_components.h3, { children: "❹ Handle post-payment events" }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 78, linesEnd: 117, title: "Use a webhook", children: [_jsxs(_components.p, { children: ["Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the ", _jsx(_components.code, { children: "payment_intent.succeeded" }), ", ", _jsx(_components.code, { children: "payment_intent.processing" }), ", and ", _jsx(_components.code, { children: "payment_intent.payment_failed" }), " events."] }), _jsx(_components.p, { children: "Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration." })] }), _jsx(_components.h3, { children: "❺ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 119, linesEnd: 120, title: "Run the server application", children: [_jsxs(_components.p, { children: ["Run the React app and the server. Go to ", _jsx(_components.code, { children: "localhost:3000/checkout" }), " to see your checkout page."] }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Terminal:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "python3" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " -m" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " flask" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " run" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --port=4242" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "src/index.js", linesStart: 1, linesEnd: 10, title: "Run the application", children: [_jsxs(_components.p, { children: ["Run the React app and go to ", _jsx(_components.code, { children: "localhost:3000/checkout" }), "."] }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Terminal:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " start" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 18, linesEnd: 34, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 105, linesEnd: 111, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Send email receipts" }), _jsx(_components.p, { children: "Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard." }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 57, linesEnd: 63, title: "Collect the customer's email address", children: _jsx(_components.p, { children: "Add an input field to your payment form to collect the email address." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 12, linesEnd: 12, title: "Add email to the state", children: _jsx(_components.p, { children: "Add a variable to keep track of the email the customer enters." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 28, linesEnd: 35, title: "Provide the email address to Stripe", children: _jsxs(_components.p, { children: ["Pass the provided email address as the ", _jsx(_components.code, { children: "receipt_email" }), " value. Stripe sends an email receipt when the payment succeeds in live mode (but won’t send one in a sandbox)."] }) }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 82, linesEnd: 88, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 96, linesEnd: 98, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 54, linesEnd: 76, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Collect billing address details", children: _jsx(_components.p, { children: "By default, the Payment Element only collects the necessary billing address details. To collect a customer’s full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "js-react-go", label: "React + Go", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-js-react-go/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-js-react-go", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "go.mod", linesStart: 1, linesEnd: 6, title: "Set up your server", children: [_jsx(_components.p, { children: "Add the dependency to your build and import the library. Alternatively, if you’re starting from scratch and need a go.mod file, download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Go:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "go" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " get" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " -u" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " github.com/stripe/stripe-go/v84" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 111, linesEnd: 178, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 150, linesEnd: 154, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout page on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "package.json", linesStart: 5, linesEnd: 11, title: "Add Stripe to your React app", children: [_jsx(_components.p, { children: "Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "npm:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --save" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/react-stripe-js" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/stripe-js" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 1, linesEnd: 17, title: "Load Stripe.js", children: _jsxs(_components.p, { children: ["Call ", _jsx(_components.code, { children: "loadStripe()" }), " with your Stripe publishable API key to configure the Stripe library."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 22, linesEnd: 31, title: "Fetch a PaymentIntent", children: _jsxs(_components.p, { children: ["Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The ", _jsx(_components.code, { children: "clientSecret" }), " returned by your endpoint is used to complete the payment."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 39, linesEnd: 52, title: "Initialize Stripe Elements", children: _jsxs(_components.p, { children: ["Pass the resulting promise from ", _jsx(_components.code, { children: "loadStripe" }), " to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 12, linesEnd: 15, title: "Set up the state", children: _jsx(_components.p, { children: "Initialize some state to keep track of the payment, show errors, and manage the user interface." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 8, linesEnd: 10, title: "Store a reference to Stripe", children: _jsxs(_components.p, { children: ["Access the Stripe library in your CheckoutForm component by using the ", _jsx(_components.code, { children: "useStripe()" }), " and ", _jsx(_components.code, { children: "useElements()" }), " hooks. If you need to access Elements with a class component, use the ElementsConsumer instead."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 55, linesEnd: 73, title: "Add the PaymentElement", children: _jsxs(_components.p, { children: ["Add ", _jsx(_components.code, { children: "PaymentElement" }), " to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 33, linesEnd: 37, title: "(Optional) Style the Payment Element", children: _jsx(_components.p, { children: "Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company’s colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 28, linesEnd: 35, title: "Complete the payment", children: _jsxs(_components.p, { children: ["When your customer clicks the pay button, call ", _jsx(_components.code, { children: "confirmPayment" }), " with the PaymentElement and pass a ", _jsx(_components.code, { children: "return_url" }), " to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they’re redirected to the return_url."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 42, linesEnd: 48, title: "Handle errors", children: _jsx(_components.p, { children: "If there are any immediate errors (for example, your customer’s card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CompletePage.jsx", linesStart: 47, linesEnd: 104, title: "Show a payment status message", children: _jsxs(_components.p, { children: ["When Stripe redirects the customer to the return_url, the ", _jsx(_components.code, { children: "payment_intent_client_secret" }), " query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer."] }) }), _jsx(_components.h3, { children: "❹ Handle post-payment events" }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 111, linesEnd: 178, title: "Use a webhook", children: [_jsx(_components.p, { children: "Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow." }), _jsxs(_components.p, { children: ["Stripe recommends handling the ", _jsx(_components.code, { children: "payment_intent.succeeded" }), ", ", _jsx(_components.code, { children: "payment_intent.processing" }), ", and ", _jsx(_components.code, { children: "payment_intent.payment_failed" }), " events."] }), _jsx(_components.p, { children: "Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration." })] }), _jsx(_components.h3, { children: "❺ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 19, linesEnd: 28, title: "Run the server application", children: [_jsx(_components.p, { children: "Run the React app and the server. Go to localhost:3000/checkout to see your checkout page." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Run the server:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "go" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " run" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " server.go" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "package.json", linesStart: 15, linesEnd: 19, title: "Run the application", children: [_jsx(_components.p, { children: "Run the React app and go to localhost:3000/checkout." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Run the client:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " start" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 1, linesEnd: 192, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 1, linesEnd: 192, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 35, linesEnd: 58, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 156, linesEnd: 162, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Send an email receipt" }), _jsx(_components.p, { children: "Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard." }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 57, linesEnd: 63, title: "Collect the customer's email address", children: _jsx(_components.p, { children: "Add an input field to your payment form to collect the email address." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 12, linesEnd: 12, title: "Add email to the state", children: _jsx(_components.p, { children: "Add a variable to keep track of the email the customer enters." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 28, linesEnd: 35, title: "Provide the email address to Stripe", children: _jsxs(_components.p, { children: ["Pass the provided email address as the ", _jsx(_components.code, { children: "receipt_email" }), " value. Stripe sends an email receipt when the payment succeeds in live mode (but won’t send one in a sandbox)."] }) }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 11, linesEnd: 14, title: "Import additional Stripe resources", children: _jsx(_components.p, { children: "Import the Stripe customer and paymentmethod packages. Use these packages to store information about your customer." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 128, linesEnd: 139, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 145, linesEnd: 154, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 74, linesEnd: 109, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "README.md", linesStart: 1, linesEnd: 1, title: "Collect billing address details", children: _jsx(_components.p, { children: "By default, the Payment Element only collects the necessary billing address details. To collect a customer’s full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element." }) }), _jsx(CodeFocusSection, { activeFilePath: "README.md", linesStart: 1, linesEnd: 1, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "README.md", linesStart: 1, linesEnd: 1, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "README.md", linesStart: 1, linesEnd: 1, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "js-react-net", label: "React + .NET", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-js-react-net/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-js-react-net", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 29, linesEnd: 36, title: "Install the Stripe.net library", children: [_jsx(_components.p, { children: "Install the package with .NET or NuGet. Alternatively, if you’re starting from scratch, download the files which contains a configured .csproj file." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "dotnet:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "dotnet" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " add" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " package" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " Stripe.net" })] }), "\n"] }) }) }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "NuGet:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "Install-Package" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " Stripe.net" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 82, linesEnd: 100, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 88, linesEnd: 92, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout page on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "package.json", linesStart: 5, linesEnd: 7, title: "Add Stripe to your React app", children: [_jsx(_components.p, { children: "Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "npm:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --save" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/react-stripe-js" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/stripe-js" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 14, linesEnd: 17, title: "Load Stripe.js", children: _jsxs(_components.p, { children: ["Call ", _jsx(_components.code, { children: "loadStripe()" }), " with your Stripe publishable API key to configure the Stripe library."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 22, linesEnd: 31, title: "Fetch a PaymentIntent", children: _jsxs(_components.p, { children: ["Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The ", _jsx(_components.code, { children: "clientSecret" }), " returned by your endpoint is used to complete the payment."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 39, linesEnd: 49, title: "Initialize Stripe Elements", children: _jsxs(_components.p, { children: ["Pass the resulting promise from ", _jsx(_components.code, { children: "loadStripe" }), " to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 12, linesEnd: 15, title: "Set up the state", children: _jsx(_components.p, { children: "Initialize some state to keep track of the payment, show errors, and manage the user interface." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 8, linesEnd: 10, title: "Store a reference to Stripe", children: _jsxs(_components.p, { children: ["Access the Stripe library in your CheckoutForm component by using the ", _jsx(_components.code, { children: "useStripe()" }), " and ", _jsx(_components.code, { children: "useElements()" }), " hooks. If you need to access Elements with a class component, use the ", _jsx(_components.code, { children: "ElementsConsumer" }), " instead."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 55, linesEnd: 73, title: "Add the PaymentElement", children: _jsxs(_components.p, { children: ["Add ", _jsx(_components.code, { children: "PaymentElement" }), " to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 33, linesEnd: 37, title: "(Optional) Style the Payment Element", children: _jsx(_components.p, { children: "Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company’s colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 17, linesEnd: 35, title: "Complete the payment", children: _jsxs(_components.p, { children: ["When your customer clicks the pay button, call ", _jsx(_components.code, { children: "confirmPayment" }), " with the PaymentElement and pass a ", _jsx(_components.code, { children: "return_url" }), " to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they’re redirected to the ", _jsx(_components.code, { children: "return_url" }), "."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 42, linesEnd: 48, title: "Handle errors", children: _jsx(_components.p, { children: "If there are any immediate errors (for example, your customer’s card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CompletePage.jsx", linesStart: 53, linesEnd: 74, title: "Show a payment status message", children: _jsxs(_components.p, { children: ["When Stripe redirects the customer to the ", _jsx(_components.code, { children: "return_url" }), ", the ", _jsx(_components.code, { children: "payment_intent_client_secret" }), " query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer."] }) }), _jsx(_components.h3, { children: "❹ Handle post-payment events" }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 47, linesEnd: 56, title: "Use a webhook", children: [_jsxs(_components.p, { children: ["Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the ", _jsx(_components.code, { children: "payment_intent.succeeded" }), ", ", _jsx(_components.code, { children: "payment_intent.processing" }), ", and ", _jsx(_components.code, { children: "payment_intent.payment_failed" }), " events."] }), _jsx(_components.p, { children: "Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration." })] }), _jsx(_components.h3, { children: "❺ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 18, linesEnd: 26, title: "Run the server application", children: [_jsx(_components.p, { children: "Run the React app and the server. Go to localhost:3000/checkout to see your checkout page." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "dotnet:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "dotnet" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " run" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "package.json", linesStart: 15, linesEnd: 16, title: "Run the application", children: [_jsx(_components.p, { children: "Run the React app and go to localhost:3000/checkout." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "npm:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " start" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 1, linesEnd: 6, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "src/CompletePage.jsx", linesStart: 76, linesEnd: 103, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 111, linesEnd: 136, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 93, linesEnd: 97, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Send email receipts" }), _jsx(_components.p, { children: "Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard." }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 57, linesEnd: 63, title: "Collect the customer's email address", children: _jsx(_components.p, { children: "Add an input field to your payment form to collect the email address." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 12, linesEnd: 12, title: "Add email to the state", children: _jsx(_components.p, { children: "Add a variable to keep track of the email the customer enters." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 28, linesEnd: 35, title: "Provide the email address to Stripe", children: _jsxs(_components.p, { children: ["Pass the provided email address as the ", _jsx(_components.code, { children: "receipt_email" }), " value. Stripe sends an email receipt when the payment succeeds in live mode (but won’t send one in a sandbox)."] }) }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 62, linesEnd: 78, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 84, linesEnd: 85, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 149, linesEnd: 187, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 51, linesEnd: 53, title: "Collect billing address details", children: _jsx(_components.p, { children: "By default, the Payment Element only collects the necessary billing address details. To collect a customer’s full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element." }) }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 1, linesEnd: 27, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 1, linesEnd: 27, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 47, linesEnd: 56, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "js-react-java", label: "React + Java", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "/guardian/stripe-sandbox/stripe-accept-payments-with-stripe-checkout-js-react-java.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-js-react-java", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "pom.xml", linesStart: 33, linesEnd: 39, title: "Install the Stripe Java library", children: [_jsx(_components.p, { children: "Add the dependency to your build and import the library. Alternatively, if you’re starting from scratch and need a sample pom.xml file (for Maven), download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Maven:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "5", language: "xml", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "xml", children: _jsxs(_components.code, { language: "xml", numberOfLines: "5", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#13BBB7", "--shiki-dark": "#569CD6" }, children: "dependency" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#13BBB7", "--shiki-dark": "#569CD6" }, children: "groupId" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "com.stripe" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#13BBB7", "--shiki-dark": "#569CD6" }, children: "artifactId" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "stripe-java" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#13BBB7", "--shiki-dark": "#569CD6" }, children: "version" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "{VERSION}" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: "" })] }), "\n"] }) }) }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "2", language: "text", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "text", children: _jsxs(_components.code, { language: "text", numberOfLines: "2", children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "implementation \"com.stripe:stripe-java:{VERSION}\"" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, {}) })] }) }) }), _jsxs(_components.p, { children: ["Add the following dependency to your POM and replace ", " with the version number you want to use."] })] }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 144, linesEnd: 211, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 182, linesEnd: 187, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout page on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 1, linesEnd: 3, title: "Add Stripe to your React app", children: [_jsx(_components.p, { children: "Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server." }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --save" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/react-stripe-js" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/stripe-js" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 14, linesEnd: 17, title: "Load Stripe.js", children: _jsxs(_components.p, { children: ["Call ", _jsx(_components.code, { children: "loadStripe()" }), " with your Stripe publishable API key to configure the Stripe library."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 22, linesEnd: 31, title: "Fetch a PaymentIntent", children: _jsxs(_components.p, { children: ["Immediately make a request to the endpoint on your server to create a new PaymentIntent as soon as your checkout page loads. The ", _jsx(_components.code, { children: "clientSecret" }), " returned by your endpoint is used to complete the payment."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 39, linesEnd: 52, title: "Initialize Stripe Elements", children: _jsxs(_components.p, { children: ["Pass the resulting promise from ", _jsx(_components.code, { children: "loadStripe" }), " to the Elements provider. This allows the child components to access the Stripe service with the Elements consumer. Additionally, pass the client secret as an option to the Elements provider."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 12, linesEnd: 15, title: "Set up the state", children: _jsx(_components.p, { children: "Initialize some state to keep track of the payment, show errors, and manage the user interface." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 8, linesEnd: 10, title: "Store a reference to Stripe", children: _jsxs(_components.p, { children: ["Access the Stripe library in your CheckoutForm component by using the ", _jsx(_components.code, { children: "useStripe()" }), " and ", _jsx(_components.code, { children: "useElements()" }), " hooks. If you need to access Elements with a class component, use the ", _jsx(_components.code, { children: "ElementsConsumer" }), " instead."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 55, linesEnd: 73, title: "Add the PaymentElement", children: _jsxs(_components.p, { children: ["Add ", _jsx(_components.code, { children: "PaymentElement" }), " to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection."] }) }), _jsxs(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 33, linesEnd: 37, title: "(Optional) Style the Payment Element", children: [_jsxs(_components.p, { children: ["Customise the Payment Element UI by creating an ", _jsx(_components.code, { children: "Appearance" }), " object and passing it as an option to the Elements provider. Use your company’s colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set."] }), _jsx(_components.p, { children: "Make sure to open the preview on the right to see your changes live." })] }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 28, linesEnd: 35, title: "Complete the payment", children: _jsxs(_components.p, { children: ["When your customer clicks the pay button, call ", _jsx(_components.code, { children: "confirmPayment" }), " with the PaymentElement and pass a ", _jsx(_components.code, { children: "return_url" }), " to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they’re redirected to the ", _jsx(_components.code, { children: "return_url" }), "."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 42, linesEnd: 48, title: "Handle errors", children: _jsx(_components.p, { children: "If there are any immediate errors (for example, your customer’s card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CompletePage.jsx", linesStart: 53, linesEnd: 74, title: "Show a payment status message", children: _jsxs(_components.p, { children: ["When Stripe redirects the customer to the ", _jsx(_components.code, { children: "return_url" }), ", the ", _jsx(_components.code, { children: "payment_intent_client_secret" }), " query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer."] }) }), _jsx(_components.h3, { children: "❹ Handle post-payment events" }), _jsxs(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 144, linesEnd: 211, title: "Use a webhook", children: [_jsxs(_components.p, { children: ["Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the ", _jsx(_components.code, { children: "payment_intent.succeeded" }), ", ", _jsx(_components.code, { children: "payment_intent.processing" }), ", and ", _jsx(_components.code, { children: "payment_intent.payment_failed" }), " events."] }), _jsx(_components.p, { children: "Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration." })] }), _jsx(_components.h3, { children: "❺ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 137, linesEnd: 142, title: "Run the server application", children: [_jsx(_components.p, { children: "Run the React app and the server. Go to localhost:3000/checkout to see your checkout page." }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "java" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " -cp" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " target/sample-jar-with-dependencies.jar" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " com.stripe.sample.Server" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "src/App.jsx", linesStart: 1, linesEnd: 53, title: "Run the application", children: [_jsx(_components.p, { children: "Run the React app and go to localhost:3000/checkout." }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " start" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 137, linesEnd: 138, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 40, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 75, linesEnd: 95, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 188, linesEnd: 203, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Send an email receipt" }), _jsx(_components.p, { children: "Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard." }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 57, linesEnd: 63, title: "Collect the customer's email address", children: _jsx(_components.p, { children: "Add an input field to your payment form to collect the email address." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 12, linesEnd: 12, title: "Add email to the state", children: _jsx(_components.p, { children: "Add a variable to keep track of the email the customer enters." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 30, linesEnd: 34, title: "Provide the email address to Stripe", children: _jsxs(_components.p, { children: ["Pass the provided email address as the ", _jsx(_components.code, { children: "receipt_email" }), " value. Stripe sends an email receipt when the payment succeeds in live mode (but won’t send one in a sandbox)."] }) }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 23, linesEnd: 27, title: "Import additional Stripe resources", children: _jsx(_components.p, { children: "Import the Stripe PaymentMethod and Customer models. Use these models to store information about your Customer." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 148, linesEnd: 169, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 177, linesEnd: 178, title: "Add the customer to the PaymentIntent", children: _jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 111, linesEnd: 134, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "src/CheckoutForm.jsx", linesStart: 1, linesEnd: 75, title: "Collect billing address details", children: _jsx(_components.p, { children: "By default, the Payment Element only collects the necessary billing address details. To collect a customer’s full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 40, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 40, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 40, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "js-nextjs", label: "Next.js", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "/guardian/stripe-sandbox/stripe-accept-payments-with-stripe-checkout-js-nextjs.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-js-nextjs", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "package.json", linesStart: 8, linesEnd: 17, title: "Install the Stripe libraries", children: [_jsx(_components.p, { children: "Install the packages and import them in your code. Alternatively, if you’re starting from scratch and need a package.json file, download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Install the libraries:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --save" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/stripe-js" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " next" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "app/page.jsx", linesStart: 76, linesEnd: 88, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "app/page.jsx", linesStart: 81, linesEnd: 84, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout page on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "package.json", linesStart: 8, linesEnd: 10, title: "Add Stripe to your React app", children: [_jsx(_components.p, { children: "Use the Stripe.js and the Stripe Elements UI library to stay PCI compliant by ensuring that payment details go directly to Stripe and never reach your server." }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --save" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/react-stripe-js" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " @stripe/stripe-js" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "components/checkout.jsx", linesStart: 14, linesEnd: 15, title: "Load Stripe.js", children: _jsxs(_components.p, { children: ["Call ", _jsx(_components.code, { children: "loadStripe()" }), " with your Stripe publishable API key to configure the Stripe library."] }) }), _jsx(CodeFocusSection, { activeFilePath: "components/checkout.jsx", linesStart: 85, linesEnd: 93, title: "Initialize Stripe Elements", children: _jsxs(_components.p, { children: ["Pass the resulting promise from ", _jsx(_components.code, { children: "loadStripe" }), " to the Elements provider. This allows the child components to access the Stripe service through the Elements consumer. Additionally, pass the client secret as an option to the Elements provider."] }) }), _jsx(CodeFocusSection, { activeFilePath: "components/checkout.jsx", linesStart: 21, linesEnd: 24, title: "Set up the state", children: _jsx(_components.p, { children: "Initialize some state to keep track of the payment, show errors, and manage the user interface." }) }), _jsx(CodeFocusSection, { activeFilePath: "components/checkout.jsx", linesStart: 18, linesEnd: 19, title: "Store a reference to Stripe", children: _jsxs(_components.p, { children: ["Access the Stripe library in your CheckoutForm component by using the ", _jsx(_components.code, { children: "useStripe()" }), " and ", _jsx(_components.code, { children: "useElements()" }), " hooks. If you need to access Elements through a class component, use the ElementsConsumer instead."] }) }), _jsx(CodeFocusSection, { activeFilePath: "components/checkout.jsx", linesStart: 64, linesEnd: 82, title: "Add the PaymentElement", children: _jsx(_components.p, { children: "Add the PaymentElement to your payment form. It embeds an iframe with a dynamic form that collects payment details for a variety of payment methods. Your customer can pick a payment method type, and the form automatically collects all necessary payments details for their selection." }) }), _jsxs(CodeFocusSection, { activeFilePath: "components/checkout.jsx", linesStart: 86, linesEnd: 88, title: "(Optional) Style the Payment Element", children: [_jsx(_components.p, { children: "Customise the Payment Element UI by creating an Appearance object and passing it as an option to the Elements provider. Use your company’s colour scheme and font to make it match with the rest of your checkout page. Use custom fonts (for example, from Google Fonts) by initialising Elements with a font set." }), _jsx(_components.p, { children: "Make sure to open the preview on the right to see your changes live." })] }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsx(CodeFocusSection, { activeFilePath: "components/checkout.jsx", linesStart: 37, linesEnd: 44, title: "Complete the payment", children: _jsxs(_components.p, { children: ["When your customer clicks the pay button, call ", _jsx(_components.code, { children: "confirmPayment" }), " with the PaymentElement and pass a ", _jsx(_components.code, { children: "return_url" }), " to indicate where Stripe redirects the customer after they complete the payment. For payments that require authentication, Stripe displays a modal for 3D Secure authentication or redirects the customer to an authentication page, depending on the payment method. After the customer completes the authentication process, they’re redirected to the ", _jsx(_components.code, { children: "return_url" }), "."] }) }), _jsx(CodeFocusSection, { activeFilePath: "components/checkout.jsx", linesStart: 46, linesEnd: 57, title: "Handle errors", children: _jsx(_components.p, { children: "If there are any immediate errors (for example, your customer’s card is declined), Stripe.js returns an error. Show that error message to your customer so they can try again." }) }), _jsx(CodeFocusSection, { activeFilePath: "app/success/page.jsx", linesStart: 45, linesEnd: 84, title: "Show a payment status message", children: _jsxs(_components.p, { children: ["When Stripe redirects the customer to the ", _jsx(_components.code, { children: "return_url" }), ", the ", _jsx(_components.code, { children: "payment_intent" }), " query parameter is appended by Stripe.js. Use this to retrieve the PaymentIntent status update and determine what to show to your customer."] }) }), _jsx(_components.h3, { children: "❹ Handle post-payment events" }), _jsxs(CodeFocusSection, { activeFilePath: "app/api/webhooks/route.js", linesStart: 1, linesEnd: 50, title: "Use a webhook", children: [_jsxs(_components.p, { children: ["Stripe sends multiple events during the payment process and after the payment is complete. Create an event destination for a webhook endpoint to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow. Stripe recommends handling the ", _jsx(_components.code, { children: "payment_intent.succeeded" }), ", ", _jsx(_components.code, { children: "payment_intent.processing" }), ", and ", _jsx(_components.code, { children: "payment_intent.payment_failed" }), " events."] }), _jsx(_components.p, { children: "Listen for these events rather than waiting for a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration." })] }), _jsx(_components.h3, { children: "❺ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "package.json", linesStart: 3, linesEnd: 6, title: "Run the application", children: [_jsx(_components.p, { children: "Run the Next.js app. Go to localhost:3000 to see your checkout page." }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " run" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " dev" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "app/page.jsx", linesStart: 1, linesEnd: 95, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "app/page.jsx", linesStart: 1, linesEnd: 95, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "app/page.jsx", linesStart: 5, linesEnd: 22, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "app/page.jsx", linesStart: 85, linesEnd: 87, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Send an email receipt" }), _jsx(_components.p, { children: "Stripe can send an email receipt to your customer using your brand logo and colour theme, which are configurable in the Dashboard." }), _jsx(CodeFocusSection, { activeFilePath: "components/checkout.jsx", linesStart: 66, linesEnd: 72, title: "Collect the customer's email address", children: _jsx(_components.p, { children: "Add an input field to your payment form to collect the email address." }) }), _jsx(CodeFocusSection, { activeFilePath: "components/checkout.jsx", linesStart: 21, linesEnd: 21, title: "Add email to the state", children: _jsx(_components.p, { children: "Add a variable to keep track of the email the customer enters." }) }), _jsx(CodeFocusSection, { activeFilePath: "components/checkout.jsx", linesStart: 42, linesEnd: 42, title: "Provide the email address to Stripe", children: _jsxs(_components.p, { children: ["Pass the provided email address as the ", _jsx(_components.code, { children: "receipt_email" }), " value. Stripe sends an email receipt when the payment succeeds in live mode (but won’t send one in a sandbox)."] }) }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "app/page.jsx", linesStart: 67, linesEnd: 67, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "app/page.jsx", linesStart: 77, linesEnd: 78, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "app/page.jsx", linesStart: 42, linesEnd: 64, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "app/page.jsx", linesStart: 1, linesEnd: 95, title: "Collect billing address details", children: _jsx(_components.p, { children: "By default, the Payment Element only collects the necessary billing address details. To collect a customer’s full billing address (to calculate the tax for digital goods and services, for example) or shipping address, use the Address Element." }) }), _jsx(CodeFocusSection, { activeFilePath: "app/page.jsx", linesStart: 1, linesEnd: 95, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "app/page.jsx", linesStart: 1, linesEnd: 95, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "app/api/webhooks/route.js", linesStart: 1, linesEnd: 50, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] })] }), _jsxs(Architecture, { value: "iOS SDK", label: "iOS SDK", children: [_jsxs(FrameworkGuide, { framework: "ios-swift-ruby", label: "Swift + Ruby", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ios-swift-ruby-minimal/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ios-swift-ruby-minimal", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 4, title: "Install the Stripe Ruby library", children: [_jsx(_components.p, { children: "Install the Stripe ruby gem and require it in your code. Alternatively, if you’re starting from scratch and need a Gemfile, download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Terminal:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "gem" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe" })] }), "\n"] }) }) }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Bundler (add to Gemfile):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "ruby", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "ruby", children: _jsxs(_components.code, { language: "ruby", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "gem " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "stripe" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 67, linesEnd: 104, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 88, linesEnd: 91, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 1, linesEnd: 2, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen’s View Controller." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Swift Package Manager:" }) }), _jsxs(_components.p, { children: ["In Xcode, select File > Add Package Dependencies… and enter ", _jsx(_components.code, { children: "https://github.com/stripe/stripe-ios-spm" }), " as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app’s target."] })] }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 42, linesEnd: 44, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 66, linesEnd: 102, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 112, linesEnd: 134, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "PaymentSheet.Configuration" }), " struct for customising the Payment Sheet."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 135, linesEnd: 145, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 9, linesEnd: 24, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 92, linesEnd: 98, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 118, linesEnd: 121, title: "Enable delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 122, linesEnd: 125, title: "Enable Apple Pay", children: _jsx(_components.p, { children: "To enable Apple Pay, provide your Apple Pay Merchant ID and your Stripe account’s country code." }) }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 121, linesEnd: 121, title: "Use a custom primary button color", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsxs(CodeFocusSection, { activeFilePath: "ios/Info.plist", linesStart: 1, linesEnd: 1, title: "Enable card scanning", children: [_jsxs(_components.p, { children: ["Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set ", _jsx(_components.code, { children: "NSCameraUsageDescription" }), " in your application’s Info.plist, and provide a reason for accessing the camera (for example, “To scan cards”)."] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " Card scanning is only supported on devices running iOS 13 or higher."] })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 72, linesEnd: 78, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 83, linesEnd: 86, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 41, linesEnd: 64, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect shipping or billing addresses" }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 147, linesEnd: 160, title: "Collect local and international addresses", children: _jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }) }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ios-swift-nodejs", label: "Swift + Node.js", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ios-swift-nodejs/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ios-swift-nodejs", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 3, linesEnd: 4, title: "Install the Stripe Node library", children: [_jsx(_components.p, { children: "Install the package and import it in your code. Alternatively, if you’re starting from scratch and need a package.json file, download the project files using the Download link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "npm:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --save" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 66, linesEnd: 106, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 91, linesEnd: 93, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 1, linesEnd: 2, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen’s View Controller." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Swift Package Manager:" }) }), _jsxs(_components.p, { children: ["In Xcode, select File > Add Package Dependencies… and enter ", _jsx(_components.code, { children: "https://github.com/stripe/stripe-ios-spm" }), " as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app’s target."] })] }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 42, linesEnd: 44, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 66, linesEnd: 102, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 112, linesEnd: 134, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "PaymentSheet.Configuration" }), " struct for customising the Payment Sheet."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 135, linesEnd: 145, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 9, linesEnd: 26, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 94, linesEnd: 100, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 120, linesEnd: 120, title: "Enable delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 122, linesEnd: 125, title: "Enable Apple Pay", children: _jsx(_components.p, { children: "To enable Apple Pay, provide your Apple Pay Merchant ID and your Stripe account’s country code." }) }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 121, linesEnd: 121, title: "Customise the primary button colour", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsxs(CodeFocusSection, { activeFilePath: "ios/Info.plist", linesStart: 1, linesEnd: 8, title: "Enable card scanning", children: [_jsxs(_components.p, { children: ["Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set ", _jsx(_components.code, { children: "NSCameraUsageDescription" }), " in your application’s Info.plist, and provide a reason for accessing the camera (for example, “To scan cards”)."] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " Card scanning is only supported on devices running iOS 13 or higher."] })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 70, linesEnd: 78, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 86, linesEnd: 87, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 42, linesEnd: 64, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect shipping or billing addresses" }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 9, linesEnd: 17, title: "Collect local and international addresses", children: _jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }) }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ios-swift-php", label: "Swift + PHP", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ios-swift-php/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ios-swift-php", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 3, linesEnd: 6, title: "Install the Stripe PHP library", children: [_jsx(_components.p, { children: "Install the library with composer and initialize with your secret API key. Alternatively, if you’re starting from scratch and need a composer.json file, download the files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Composer:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "composer" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " require" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe/stripe-php" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 64, linesEnd: 80, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 69, linesEnd: 72, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 1, linesEnd: 2, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen’s View Controller." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Swift Package Manager:" }) }), _jsxs(_components.p, { children: ["In Xcode, select File > Add Package Dependencies… and enter ", _jsx(_components.code, { children: "https://github.com/stripe/stripe-ios-spm" }), " as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app’s target."] })] }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 42, linesEnd: 44, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 66, linesEnd: 102, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 112, linesEnd: 134, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "PaymentSheet.Configuration" }), " struct for customising the Payment Sheet."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 135, linesEnd: 145, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 1, linesEnd: 91, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 1, linesEnd: 91, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 8, linesEnd: 25, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 73, linesEnd: 79, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 118, linesEnd: 121, title: "Enable delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 122, linesEnd: 125, title: "Enable Apple Pay", children: _jsx(_components.p, { children: "To enable Apple Pay, provide your Apple Pay Merchant ID and your Stripe account’s country code." }) }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 121, linesEnd: 121, title: "Use a custom primary button color", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsxs(CodeFocusSection, { activeFilePath: "ios/Info.plist", linesStart: 6, linesEnd: 7, title: "Enable card scanning", children: [_jsxs(_components.p, { children: ["Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set ", _jsx(_components.code, { children: "NSCameraUsageDescription" }), " in your application’s Info.plist, and provide a reason for accessing the camera (for example, “To scan cards”)."] }), _jsx(_components.p, { children: "Note: Card scanning is only supported on devices running iOS 13 or higher." })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 49, linesEnd: 59, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 65, linesEnd: 66, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "charge.php", linesStart: 14, linesEnd: 28, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect shipping or billing addresses" }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 147, linesEnd: 160, title: "Collect local and international addresses", children: _jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }) }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 1, linesEnd: 91, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 1, linesEnd: 91, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 1, linesEnd: 91, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ios-swift-python", label: "Swift + Python", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ios-swift-python/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ios-swift-python", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 5, linesEnd: 7, title: "Install the Stripe Python package", children: [_jsx(_components.p, { children: "Install the Stripe package and import it in your code. Alternatively, if you’re starting from scratch and need a requirements.txt file, download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "pip:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "pip3" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 78, linesEnd: 117, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 101, linesEnd: 104, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 1, linesEnd: 2, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen’s View Controller." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Swift Package Manager:" }) }), _jsxs(_components.p, { children: ["In Xcode, select File > Add Package Dependencies… and enter ", _jsx(_components.code, { children: "https://github.com/stripe/stripe-ios-spm" }), " as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app’s target."] })] }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 42, linesEnd: 44, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 66, linesEnd: 102, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 112, linesEnd: 145, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "PaymentSheet.Configuration" }), " struct for customising the Payment Sheet."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 135, linesEnd: 144, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Run the application", children: [_jsx(_components.p, { children: "Run your Python server and go to your iOS simulator or device." }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "python3" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " -m" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " flask" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " run" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --port=4242" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 18, linesEnd: 34, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 105, linesEnd: 111, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Delayed payment methods" }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 118, linesEnd: 120, title: "Enable delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(_components.h4, { children: "Apple Pay" }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 122, linesEnd: 125, title: "Enable Apple Pay", children: _jsx(_components.p, { children: "To enable Apple Pay, provide your Apple Pay Merchant ID and your Stripe account’s country code." }) }), _jsx(_components.h4, { children: "Custom primary button color" }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 121, linesEnd: 121, title: "Customize the primary button", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsx(_components.h4, { children: "Card scanning" }), _jsxs(CodeFocusSection, { activeFilePath: "ios/Info.plist", linesStart: 1, linesEnd: 9, title: "Enable card scanning", children: [_jsxs(_components.p, { children: ["Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set ", _jsx(_components.code, { children: "NSCameraUsageDescription" }), " in your application’s Info.plist, and provide a reason for accessing the camera (for example, “To scan cards”)."] }), _jsx(_components.p, { children: "Note: Card scanning is only supported on devices running iOS 13 or higher." })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 82, linesEnd: 88, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 96, linesEnd: 98, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 54, linesEnd: 76, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect shipping or billing addresses" }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 9, linesEnd: 17, title: "Configure Address Element", children: _jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }) }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ios-swift-go", label: "Swift + Go", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ios-swift-go/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ios-swift-go", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 1, linesEnd: 6, title: "Set up your server", children: [_jsx(_components.p, { children: "Add the dependency to your build and import the library. Alternatively, if you’re starting from scratch and need a go.mod file, download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Go:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "go" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " get" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " -u" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " github.com/stripe/stripe-go/v84" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 144, linesEnd: 177, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 150, linesEnd: 153, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 1, linesEnd: 2, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen’s View Controller." }), _jsxs(_components.p, { children: ["In Xcode, select File > Add Package Dependencies… and enter ", _jsx(_components.a, { href: "https://github.com/stripe/stripe-ios-spm", children: "https://github.com/stripe/stripe-ios-spm" }), " as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app’s target."] })] }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 42, linesEnd: 44, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 66, linesEnd: 102, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 112, linesEnd: 145, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsx(_components.p, { children: "Use the PaymentSheet.Configuration struct for customising the Payment Sheet." })] }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 135, linesEnd: 144, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 1, linesEnd: 192, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 1, linesEnd: 192, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 35, linesEnd: 58, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 156, linesEnd: 162, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Payment customization options" }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 120, linesEnd: 120, title: "Enable delayed payment methods", children: _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." }) }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 122, linesEnd: 125, title: "Enable Apple Pay", children: _jsx(_components.p, { children: "Configure Apple Pay by setting the merchant ID and country code in the PaymentSheet configuration." }) }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 121, linesEnd: 121, title: "Custom primary button color", children: _jsx(_components.p, { children: "Set a custom color for the primary button in the PaymentSheet configuration." }) }), _jsxs(CodeFocusSection, { activeFilePath: "ios/Info.plist", linesStart: 1, linesEnd: 9, title: "Enable card scanning", children: [_jsx(_components.p, { children: "Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set NSCameraUsageDescription in your application’s Info.plist, and provide a reason for accessing the camera (for example, “To scan cards”)." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " Card scanning is only supported on devices running iOS 13 or higher."] })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 11, linesEnd: 14, title: "Import additional Stripe resources", children: _jsx(_components.p, { children: "Import the Stripe customer and paymentmethod packages. Use these packages to store information about your customer." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 128, linesEnd: 139, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 145, linesEnd: 154, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 74, linesEnd: 109, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 127, linesEnd: 129, title: "Collect shipping or billing addresses", children: _jsx(_components.p, { children: "Configure the shipping details in the PaymentSheet configuration to collect addresses from your customers." }) }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 1, linesEnd: 192, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 1, linesEnd: 192, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 1, linesEnd: 192, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ios-swift-net", label: "Swift + .NET", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ios-swift-net/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ios-swift-net", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 29, linesEnd: 36, title: "Install the Stripe.net library", children: [_jsx(_components.p, { children: "Install the package with .NET or NuGet. Alternatively, if you’re starting from scratch, download the files which contains a configured .csproj file." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "dotnet:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "dotnet" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " add" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " package" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " Stripe.net" })] }), "\n"] }) }) }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "NuGet:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "Install-Package" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " Stripe.net" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 82, linesEnd: 99, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 88, linesEnd: 92, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 1, linesEnd: 2, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe iOS SDK is open source, fully documented, and compatible with apps supporting iOS 13 or above. Import the Stripe SDK into your checkout screen’s View Controller." }), _jsxs(_components.p, { children: ["In Xcode, select File > Add Package Dependencies… and enter ", _jsx(_components.a, { href: "https://github.com/stripe/stripe-ios-spm", children: "https://github.com/stripe/stripe-ios-spm" }), " as the repository URL. Select the latest version number from our releases page, and add the StripePaymentSheet module to your app’s target."] })] }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 42, linesEnd: 44, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 66, linesEnd: 102, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 112, linesEnd: 134, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsx(_components.p, { children: "Use the PaymentSheet.Configuration struct for customising the Payment Sheet." })] }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 135, linesEnd: 145, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 1, linesEnd: 27, title: "Run the application", children: [_jsx(_components.p, { children: "Run your ASP.NET MVC server." }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "dotnet" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " run" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 1, linesEnd: 27, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 1, linesEnd: 27, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 111, linesEnd: 136, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 93, linesEnd: 97, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Payment customization options" }), _jsxs(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 120, linesEnd: 120, title: "Enable delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 122, linesEnd: 125, title: "Enable Apple Pay", children: _jsx(_components.p, { children: "To enable Apple Pay, provide your Apple Pay Merchant ID and your Stripe account’s country code." }) }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 121, linesEnd: 121, title: "Use a custom primary button color", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsxs(CodeFocusSection, { activeFilePath: "ios/Info.plist", linesStart: 1, linesEnd: 9, title: "Enable card scanning", children: [_jsx(_components.p, { children: "Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, set NSCameraUsageDescription in your application’s Info.plist, and provide a reason for accessing the camera (for example, “To scan cards”)." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " Card scanning is only supported on devices running iOS 13 or higher."] })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 62, linesEnd: 78, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 84, linesEnd: 85, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 149, linesEnd: 187, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(CodeFocusSection, { activeFilePath: "ios/CheckoutViewController.swift", linesStart: 127, linesEnd: 129, title: "Collect local and international shipping or billing addresses", children: _jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }) }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 1, linesEnd: 27, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 1, linesEnd: 27, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 1, linesEnd: 27, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] })] }), _jsxs(Architecture, { value: "Android SDK", label: "Android SDK", children: [_jsxs(FrameworkGuide, { framework: "ad-kotlin-ruby", label: "Kotlin + Ruby", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-kotlin-ruby/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-kotlin-ruby", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "Gemfile", linesStart: 1, linesEnd: 4, title: "Install the Stripe Ruby library", children: [_jsx(_components.p, { children: "Install the Stripe ruby gem and require it in your code. Alternatively, if you’re starting from scratch and need a Gemfile, download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Terminal:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "gem" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe" })] }), "\n"] }) }) }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Bundler (add to Gemfile):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "ruby", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "ruby", children: _jsxs(_components.code, { language: "ruby", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "gem " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "stripe" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 67, linesEnd: 104, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 88, linesEnd: 91, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 1, linesEnd: 38, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above." }), _jsx(_components.p, { children: "To install the SDK, add stripe-android to the dependencies block of your build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle (Groovy):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripe-android:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " For details on the latest SDK release and past versions, see the Releases page on GitHub."] })] }), _jsx(CodeFocusSection, { activeFilePath: "android/MyApp.kt", linesStart: 1, linesEnd: 14, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 183, linesEnd: 225, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 244, linesEnd: 273, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "PaymentSheet.Configuration" }), " struct for customising the Payment Sheet."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 69, linesEnd: 77, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 183, linesEnd: 225, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 9, linesEnd: 24, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 92, linesEnd: 98, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Enable delayed payment methods" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 249, linesEnd: 251, title: "Enable delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(_components.h4, { children: "Enable Google Pay" }), _jsx(CodeFocusSection, { activeFilePath: "android/AndroidManifest.xml", linesStart: 1, linesEnd: 6, title: "Enable Google Pay API", children: _jsx(_components.p, { children: "To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 263, linesEnd: 268, title: "Configure Google Pay", children: _jsxs(_components.p, { children: ["Enable Google Pay by passing a ", _jsx(_components.code, { children: "PaymentSheet.GooglePayConfiguration" }), " object with the Google Pay environment (production or test) and the country code of your business when initializing ", _jsx(_components.code, { children: "PaymentSheet.Configuration" }), "."] }) }), _jsx(_components.h4, { children: "Customize the primary button color" }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 252, linesEnd: 262, title: "Customize button appearance", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsx(_components.h4, { children: "Enable card scanning" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 1, linesEnd: 38, title: "Add card scanning dependency", children: [_jsx(_components.p, { children: "Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle (Groovy):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripecardscan:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 72, linesEnd: 78, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 83, linesEnd: 86, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 41, linesEnd: 64, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect shipping or billing addresses" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 44, linesEnd: 53, title: "Configure Address Element", children: [_jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }), _jsx(_components.p, { children: "If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle (Groovy):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.google.android.libraries.places:places:2.6.0" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ad-kotlin-nodejs", label: "Kotlin + Node.js", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-kotlin-nodejs/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-kotlin-nodejs", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 4, title: "Install the Stripe Node library", children: [_jsx(_components.p, { children: "Install the package and import it in your code. Alternatively, if you’re starting from scratch and need a package.json file, download the project files using the Download link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "npm:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --save" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 66, linesEnd: 106, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 91, linesEnd: 93, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 21, linesEnd: 29, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above." }), _jsx(_components.p, { children: "To install the SDK, add stripe-android to the dependencies block of your build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle (Groovy):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripe-android:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " For details on the latest SDK release and past versions, see the Releases page on GitHub."] })] }), _jsx(CodeFocusSection, { activeFilePath: "android/MyApp.kt", linesStart: 6, linesEnd: 13, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 103, linesEnd: 109, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 244, linesEnd: 272, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "PaymentSheet.Configuration" }), " struct for customising the Payment Sheet."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 69, linesEnd: 77, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 9, linesEnd: 26, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 94, linesEnd: 100, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Enable delayed payment methods" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 251, linesEnd: 251, title: "Enable delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(_components.h4, { children: "Enable Google Pay" }), _jsx(CodeFocusSection, { activeFilePath: "android/AndroidManifest.xml", linesStart: 1, linesEnd: 6, title: "Enable Google Pay in AndroidManifest", children: _jsx(_components.p, { children: "To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 263, linesEnd: 268, title: "Configure Google Pay", children: _jsxs(_components.p, { children: ["Enable Google Pay by passing a ", _jsx(_components.code, { children: "PaymentSheet.GooglePayConfiguration" }), " object with the Google Pay environment (production or test) and the country code of your business when initializing ", _jsx(_components.code, { children: "PaymentSheet.Configuration" }), "."] }) }), _jsx(_components.h4, { children: "Customize the primary button" }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 252, linesEnd: 262, title: "Customize the primary button color", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsx(_components.h4, { children: "Enable card scanning" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 21, linesEnd: 29, title: "Enable card scanning", children: [_jsx(_components.p, { children: "Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle (Groovy):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripecardscan:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 70, linesEnd: 78, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 86, linesEnd: 87, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 42, linesEnd: 64, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect shipping or billing addresses" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 44, linesEnd: 53, title: "Configure Address Element", children: [_jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }), _jsx(_components.p, { children: "If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle (Groovy):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.google.android.libraries.places:places:2.6.0" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ad-kotlin-php", label: "Kotlin + PHP", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-kotlin-php/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-kotlin-php", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "composer.json", linesStart: 1, linesEnd: 6, title: "Install the Stripe PHP library", children: [_jsx(_components.p, { children: "Install the library with composer and initialize with your secret API key. Alternatively, if you’re starting from scratch and need a composer.json file, download the files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Composer:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "composer" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " require" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe/stripe-php" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 64, linesEnd: 80, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 69, linesEnd: 72, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 21, linesEnd: 23, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above." }), _jsx(_components.p, { children: "To install the SDK, add stripe-android to the dependencies block of your build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripe-android:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " For details on the latest SDK release and past versions, see the Releases page on GitHub."] })] }), _jsx(CodeFocusSection, { activeFilePath: "android/MyApp.kt", linesStart: 1, linesEnd: 13, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 103, linesEnd: 109, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 244, linesEnd: 272, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsx(_components.p, { children: "Use the PaymentSheet.Configuration struct for customising the Payment Sheet." })] }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 69, linesEnd: 77, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 183, linesEnd: 225, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 82, linesEnd: 86, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 8, linesEnd: 25, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 73, linesEnd: 79, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Enable delayed payment methods" }), _jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 251, linesEnd: 251, title: "Enable delayed payment methods", children: _jsxs(_components.p, { children: ["Set ", _jsx(_components.code, { children: "allowsDelayedPaymentMethods" }), " to true to enable delayed payment methods."] }) }), _jsx(_components.h4, { children: "Enable Google Pay" }), _jsx(_components.p, { children: "To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml." }), _jsx(CodeFocusSection, { activeFilePath: "android/AndroidManifest.xml", linesStart: 1, linesEnd: 5, title: "Enable Google Pay in AndroidManifest", children: _jsx(_components.p, { children: "Add the Google Pay API meta-data to your AndroidManifest.xml file." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 263, linesEnd: 268, title: "Configure Google Pay", children: _jsx(_components.p, { children: "Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration." }) }), _jsx(_components.h4, { children: "Customize the primary button" }), _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 252, linesEnd: 262, title: "Customize appearance", children: _jsx(_components.p, { children: "Customize the Payment Sheet appearance by configuring colors, fonts, and other visual properties." }) }), _jsx(_components.h4, { children: "Enable card scanning" }), _jsx(_components.p, { children: "Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 21, linesEnd: 23, title: "Add card scanning dependency", children: [_jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripecardscan:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 49, linesEnd: 59, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 65, linesEnd: 66, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "charge.php", linesStart: 21, linesEnd: 28, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect local and international addresses" }), _jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 44, linesEnd: 53, title: "Configure Address Element", children: [_jsx(_components.p, { children: "If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.google.android.libraries.places:places:2.6.0" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 1, linesEnd: 91, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 1, linesEnd: 91, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 1, linesEnd: 91, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ad-kotlin-python", label: "Kotlin + Python", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-kotlin-python/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-kotlin-python", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 5, linesEnd: 7, title: "Install the Stripe Python package", children: [_jsx(_components.p, { children: "Install the Stripe package and import it in your code. Alternatively, if you’re starting from scratch and need a requirements.txt file, download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "pip:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "pip3" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 78, linesEnd: 117, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 101, linesEnd: 104, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/build.gradle", linesStart: 1, linesEnd: 1, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above." }), _jsx(_components.p, { children: "To install the SDK, add stripe-android to the dependencies block of your build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripe-android:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " For details on the latest SDK release and past versions, see the Releases page on GitHub."] })] }), _jsx(CodeFocusSection, { activeFilePath: "android/MyApp.kt", linesStart: 6, linesEnd: 14, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 103, linesEnd: 109, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 244, linesEnd: 273, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsx(_components.p, { children: "Use the PaymentSheet.Configuration struct for customising the Payment Sheet." })] }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 69, linesEnd: 77, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Run the application", children: [_jsx(_components.p, { children: "Run your Python server and go to your Android simulator or device." }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "python3" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " -m" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " flask" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " run" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --port=4242" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 18, linesEnd: 34, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 105, linesEnd: 111, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Enable delayed payment methods" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 251, linesEnd: 251, title: "Enable delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(_components.h4, { children: "Enable Google Pay" }), _jsx(CodeFocusSection, { activeFilePath: "android/AndroidManifest.xml", linesStart: 1, linesEnd: 6, title: "Enable Google Pay in AndroidManifest", children: _jsx(_components.p, { children: "To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 263, linesEnd: 268, title: "Configure Google Pay", children: _jsx(_components.p, { children: "Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration." }) }), _jsx(_components.h4, { children: "Customize appearance" }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 252, linesEnd: 262, title: "Customize primary button color", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsx(_components.h4, { children: "Enable card scanning" }), _jsxs(CodeFocusSection, { activeFilePath: "android/build.gradle", linesStart: 1, linesEnd: 1, title: "Add card scanning dependency", children: [_jsx(_components.p, { children: "Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripecardscan:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 82, linesEnd: 88, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 96, linesEnd: 98, title: "Add the customer to the PaymentIntent", children: _jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply setup_future_usage. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 54, linesEnd: 76, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect shipping or billing addresses" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 44, linesEnd: 53, title: "Configure Address Element", children: [_jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }), _jsx(_components.p, { children: "If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.google.android.libraries.places:places:2.6.0" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ad-kotlin-go", label: "Kotlin + Go", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-kotlin-go/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-kotlin-go", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "go.mod", linesStart: 1, linesEnd: 6, title: "Set up your server", children: [_jsx(_components.p, { children: "Add the dependency to your build and import the library. Alternatively, if you’re starting from scratch and need a go.mod file, download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Go:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "go" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " get" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " -u" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " github.com/stripe/stripe-go/v84" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 111, linesEnd: 178, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 150, linesEnd: 154, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 1, linesEnd: 38, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "To install the SDK, add stripe-android to the dependencies block of your build.gradle file:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripe-android:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " For details on the latest SDK release and past versions, see the Releases page on GitHub."] })] }), _jsx(CodeFocusSection, { activeFilePath: "android/MyApp.kt", linesStart: 1, linesEnd: 14, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 103, linesEnd: 109, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 244, linesEnd: 273, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsx(_components.p, { children: "Use the PaymentSheet.Configuration struct for customising the Payment Sheet." })] }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 69, linesEnd: 77, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 19, linesEnd: 28, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 1, linesEnd: 28, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 35, linesEnd: 58, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 156, linesEnd: 162, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Enable delayed payment methods" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 249, linesEnd: 251, title: "Enable delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(_components.h4, { children: "Enable Google Pay" }), _jsx(CodeFocusSection, { activeFilePath: "android/AndroidManifest.xml", linesStart: 1, linesEnd: 6, title: "Enable Google Pay API", children: _jsx(_components.p, { children: "To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 263, linesEnd: 268, title: "Configure Google Pay", children: _jsx(_components.p, { children: "Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration." }) }), _jsx(_components.h4, { children: "Customize appearance" }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 252, linesEnd: 262, title: "Customize primary button color", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsx(_components.h4, { children: "Enable card scanning" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 1, linesEnd: 38, title: "Enable card scanning", children: [_jsx(_components.p, { children: "Card scanning can help increase your conversion rate by removing the friction of manual card entry." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripecardscan:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 9, linesEnd: 14, title: "Import additional Stripe resources", children: _jsx(_components.p, { children: "Import the Stripe customer and paymentmethod packages. Use these packages to store information about your customer." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 126, linesEnd: 139, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 144, linesEnd: 154, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 74, linesEnd: 109, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect shipping or billing addresses" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 44, linesEnd: 53, title: "Collect shipping or billing addresses", children: [_jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.google.android.libraries.places:places:2.6.0" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "README.md", linesStart: 1, linesEnd: 1, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "README.md", linesStart: 1, linesEnd: 1, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "README.md", linesStart: 1, linesEnd: 1, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ad-kotlin-net", label: "Kotlin + .NET", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-kotlin-net/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-kotlin-net", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 29, linesEnd: 36, title: "Install the Stripe.net library", children: [_jsx(_components.p, { children: "Install the package with .NET or NuGet. Alternatively, if you’re starting from scratch, download the files which contains a configured .csproj file." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "dotnet:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "dotnet" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " add" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " package" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " Stripe.net" })] }), "\n"] }) }) }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "NuGet:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "Install-Package" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " Stripe.net" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 82, linesEnd: 100, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 88, linesEnd: 92, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 21, linesEnd: 29, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "To install the SDK, add stripe-android to the dependencies block of your build.gradle file:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripe-android:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " For details on the latest SDK release and past versions, see the Releases page on GitHub."] })] }), _jsx(CodeFocusSection, { activeFilePath: "android/MyApp.kt", linesStart: 6, linesEnd: 14, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 103, linesEnd: 109, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 244, linesEnd: 273, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsx(_components.p, { children: "Use the PaymentSheet.Configuration struct for customising the Payment Sheet." })] }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 69, linesEnd: 77, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 183, linesEnd: 225, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 18, linesEnd: 26, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 111, linesEnd: 136, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 93, linesEnd: 97, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Enable delayed payment methods" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 249, linesEnd: 262, title: "Enable delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(_components.h4, { children: "Enable Google Pay" }), _jsx(CodeFocusSection, { activeFilePath: "android/AndroidManifest.xml", linesStart: 1, linesEnd: 6, title: "Enable Google Pay API", children: _jsx(_components.p, { children: "To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 263, linesEnd: 268, title: "Configure Google Pay", children: _jsx(_components.p, { children: "Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration." }) }), _jsx(_components.h4, { children: "Customize appearance" }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 252, linesEnd: 261, title: "Customize primary button", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsx(_components.h4, { children: "Enable card scanning" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 39, linesEnd: 61, title: "Enable card scanning", children: [_jsx(_components.p, { children: "Card scanning can help increase your conversion rate by removing the friction of manual card entry." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripecardscan:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 62, linesEnd: 78, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 84, linesEnd: 85, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 149, linesEnd: 187, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect shipping or billing addresses" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.kt", linesStart: 44, linesEnd: 53, title: "Configure Address Element", children: [_jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.google.android.libraries.places:places:2.6.0" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 1, linesEnd: 27, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 1, linesEnd: 27, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 47, linesEnd: 56, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ad-java-ruby", label: "Java + Ruby", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-java-ruby/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-java-ruby", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "Gemfile", linesStart: 1, linesEnd: 4, title: "Install the Stripe Ruby library", children: [_jsx(_components.p, { children: "Install the Stripe ruby gem and require it in your code. Alternatively, if you’re starting from scratch and need a Gemfile, download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Terminal:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "gem" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe" })] }), "\n"] }) }) }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Bundler (add to Gemfile):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "ruby", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "ruby", children: _jsxs(_components.code, { language: "ruby", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "gem " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "stripe" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 67, linesEnd: 104, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 88, linesEnd: 91, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 1, linesEnd: 25, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above." }), _jsx(_components.p, { children: "To install the SDK, add stripe-android to the dependencies block of your build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle (Groovy):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripe-android:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " For details on the latest SDK release and past versions, see the Releases page on GitHub."] })] }), _jsx(CodeFocusSection, { activeFilePath: "android/MyApp.java", linesStart: 1, linesEnd: 15, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 89, linesEnd: 128, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 142, linesEnd: 154, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "PaymentSheet.Configuration" }), " struct for customising the Payment Sheet."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 166, linesEnd: 177, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 89, linesEnd: 128, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 9, linesEnd: 24, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 92, linesEnd: 98, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Enable delayed payment methods" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 143, linesEnd: 144, title: "Enable delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(_components.h4, { children: "Enable Google Pay" }), _jsx(CodeFocusSection, { activeFilePath: "android/AndroidManifest.xml", linesStart: 1, linesEnd: 6, title: "Enable Google Pay API", children: _jsx(_components.p, { children: "To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 147, linesEnd: 149, title: "Configure Google Pay", children: _jsxs(_components.p, { children: ["Enable Google Pay by passing a ", _jsx(_components.code, { children: "PaymentSheet.GooglePayConfiguration" }), " object with the Google Pay environment (production or test) and the country code of your business when initializing ", _jsx(_components.code, { children: "PaymentSheet.Configuration" }), "."] }) }), _jsx(_components.h4, { children: "Customize the primary button color" }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 146, linesEnd: 146, title: "Customize button appearance", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsx(_components.h4, { children: "Enable card scanning" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 1, linesEnd: 25, title: "Add card scanning dependency", children: [_jsx(_components.p, { children: "Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle (Groovy):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripecardscan:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 72, linesEnd: 78, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 83, linesEnd: 86, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 41, linesEnd: 64, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect shipping or billing addresses" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 41, linesEnd: 51, title: "Configure Address Element", children: [_jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }), _jsx(_components.p, { children: "If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle (Groovy):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.google.android.libraries.places:places:2.6.0" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.rb", linesStart: 1, linesEnd: 104, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ad-java-nodejs", label: "Java + Node.js", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-java-nodejs/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-java-nodejs", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 4, title: "Install the Stripe Node library", children: [_jsx(_components.p, { children: "Install the package and import it in your code. Alternatively, if you’re starting from scratch and need a package.json file, download the project files using the Download link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "npm:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --save" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 66, linesEnd: 106, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 91, linesEnd: 93, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 1, linesEnd: 25, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above." }), _jsx(_components.p, { children: "To install the SDK, add stripe-android to the dependencies block of your build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle (Groovy):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripe-android:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " For details on the latest SDK release and past versions, see the Releases page on GitHub."] })] }), _jsx(CodeFocusSection, { activeFilePath: "android/MyApp.java", linesStart: 6, linesEnd: 14, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 102, linesEnd: 127, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 142, linesEnd: 154, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "PaymentSheet.Configuration" }), " struct for customising the Payment Sheet."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 166, linesEnd: 177, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 9, linesEnd: 26, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 94, linesEnd: 100, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Enable delayed payment methods" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 144, linesEnd: 144, title: "Enable delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(_components.h4, { children: "Enable Google Pay" }), _jsx(CodeFocusSection, { activeFilePath: "android/AndroidManifest.xml", linesStart: 1, linesEnd: 6, title: "Enable Google Pay in AndroidManifest", children: _jsx(_components.p, { children: "To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 147, linesEnd: 149, title: "Configure Google Pay", children: _jsxs(_components.p, { children: ["Enable Google Pay by passing a ", _jsx(_components.code, { children: "PaymentSheet.GooglePayConfiguration" }), " object with the Google Pay environment (production or test) and the country code of your business when initializing ", _jsx(_components.code, { children: "PaymentSheet.Configuration" }), "."] }) }), _jsx(_components.h4, { children: "Customize the primary button" }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 143, linesEnd: 150, title: "Customize the primary button color", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsx(_components.h4, { children: "Enable card scanning" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 1, linesEnd: 25, title: "Enable card scanning", children: [_jsx(_components.p, { children: "Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle (Groovy):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripecardscan:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 70, linesEnd: 78, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "server.js", linesStart: 86, linesEnd: 87, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 42, linesEnd: 64, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect shipping or billing addresses" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 41, linesEnd: 51, title: "Configure Address Element", children: [_jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }), _jsx(_components.p, { children: "If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle (Groovy):" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.google.android.libraries.places:places:2.6.0" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.js", linesStart: 1, linesEnd: 110, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ad-java-php", label: "Java + PHP", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-java-php/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-java-php", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "composer.json", linesStart: 1, linesEnd: 6, title: "Install the Stripe PHP library", children: [_jsx(_components.p, { children: "Install the library with composer and initialize with your secret API key. Alternatively, if you’re starting from scratch and need a composer.json file, download the files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Composer:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "composer" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " require" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe/stripe-php" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 64, linesEnd: 80, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 69, linesEnd: 72, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 21, linesEnd: 23, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above." }), _jsx(_components.p, { children: "To install the SDK, add stripe-android to the dependencies block of your build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripe-android:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " For details on the latest SDK release and past versions, see the Releases page on GitHub."] })] }), _jsx(CodeFocusSection, { activeFilePath: "android/MyApp.java", linesStart: 1, linesEnd: 13, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 103, linesEnd: 109, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 244, linesEnd: 272, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsx(_components.p, { children: "Use the PaymentSheet.Configuration struct for customising the Payment Sheet." })] }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 69, linesEnd: 77, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 183, linesEnd: 225, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 82, linesEnd: 86, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 8, linesEnd: 25, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 73, linesEnd: 79, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Enable delayed payment methods" }), _jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 251, linesEnd: 251, title: "Enable delayed payment methods", children: _jsxs(_components.p, { children: ["Set ", _jsx(_components.code, { children: "allowsDelayedPaymentMethods" }), " to true to enable delayed payment methods."] }) }), _jsx(_components.h4, { children: "Enable Google Pay" }), _jsx(_components.p, { children: "To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml." }), _jsx(CodeFocusSection, { activeFilePath: "android/AndroidManifest.xml", linesStart: 1, linesEnd: 5, title: "Enable Google Pay in AndroidManifest", children: _jsx(_components.p, { children: "Add the Google Pay API meta-data to your AndroidManifest.xml file." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 263, linesEnd: 268, title: "Configure Google Pay", children: _jsx(_components.p, { children: "Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration." }) }), _jsx(_components.h4, { children: "Customize the primary button" }), _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 252, linesEnd: 262, title: "Customize appearance", children: _jsx(_components.p, { children: "Customize the Payment Sheet appearance by configuring colors, fonts, and other visual properties." }) }), _jsx(_components.h4, { children: "Enable card scanning" }), _jsx(_components.p, { children: "Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 21, linesEnd: 23, title: "Add card scanning dependency", children: [_jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripecardscan:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 49, linesEnd: 59, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 65, linesEnd: 66, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "charge.php", linesStart: 21, linesEnd: 28, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect local and international addresses" }), _jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 44, linesEnd: 53, title: "Configure Address Element", children: [_jsx(_components.p, { children: "If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.google.android.libraries.places:places:2.6.0" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 1, linesEnd: 91, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 1, linesEnd: 91, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "public/create.php", linesStart: 1, linesEnd: 91, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ad-java-python", label: "Java + Python", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-java-python/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-java-python", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 5, linesEnd: 7, title: "Install the Stripe Python package", children: [_jsx(_components.p, { children: "Install the Stripe package and import it in your code. Alternatively, if you’re starting from scratch and need a requirements.txt file, download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "pip:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "pip3" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " stripe" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 78, linesEnd: 117, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 101, linesEnd: 104, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/build.gradle", linesStart: 1, linesEnd: 1, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above." }), _jsx(_components.p, { children: "To install the SDK, add stripe-android to the dependencies block of your build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripe-android:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " For details on the latest SDK release and past versions, see the Releases page on GitHub."] })] }), _jsx(CodeFocusSection, { activeFilePath: "android/MyApp.java", linesStart: 6, linesEnd: 14, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 103, linesEnd: 109, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 244, linesEnd: 273, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsx(_components.p, { children: "Use the PaymentSheet.Configuration struct for customising the Payment Sheet." })] }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 69, linesEnd: 77, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Run the application", children: [_jsx(_components.p, { children: "Run your Python server and go to your Android simulator or device." }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "python3" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " -m" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " flask" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " run" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " --port=4242" })] }), "\n"] }) }) })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 18, linesEnd: 34, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.py", linesStart: 105, linesEnd: 111, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Enable delayed payment methods" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 251, linesEnd: 251, title: "Enable delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(_components.h4, { children: "Enable Google Pay" }), _jsx(CodeFocusSection, { activeFilePath: "android/AndroidManifest.xml", linesStart: 1, linesEnd: 6, title: "Enable Google Pay in AndroidManifest", children: _jsx(_components.p, { children: "To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 263, linesEnd: 268, title: "Configure Google Pay", children: _jsx(_components.p, { children: "Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration." }) }), _jsx(_components.h4, { children: "Customize appearance" }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 252, linesEnd: 262, title: "Customize primary button color", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsx(_components.h4, { children: "Enable card scanning" }), _jsxs(CodeFocusSection, { activeFilePath: "android/build.gradle", linesStart: 1, linesEnd: 1, title: "Add card scanning dependency", children: [_jsx(_components.p, { children: "Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripecardscan:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 82, linesEnd: 88, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 96, linesEnd: 98, title: "Add the customer to the PaymentIntent", children: _jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details. Learn more about the most effective way to apply setup_future_usage. You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 54, linesEnd: 76, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect shipping or billing addresses" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 44, linesEnd: 53, title: "Configure Address Element", children: [_jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }), _jsx(_components.p, { children: "If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.google.android.libraries.places:places:2.6.0" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.py", linesStart: 1, linesEnd: 120, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ad-java-go", label: "Java + Go", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-java-go/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-java-go", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "go.mod", linesStart: 1, linesEnd: 6, title: "Set up your server", children: [_jsx(_components.p, { children: "Add the dependency to your build and import the library. Alternatively, if you’re starting from scratch and need a go.mod file, download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Go:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "go" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " get" }), _jsx(_components.span, { style: { color: "#2DAE58", "--shiki-dark": "#569CD6" }, children: " -u" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " github.com/stripe/stripe-go/v84" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 111, linesEnd: 178, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 150, linesEnd: 154, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 1, linesEnd: 38, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "To install the SDK, add stripe-android to the dependencies block of your build.gradle file:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripe-android:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " For details on the latest SDK release and past versions, see the Releases page on GitHub."] })] }), _jsx(CodeFocusSection, { activeFilePath: "android/MyApp.java", linesStart: 1, linesEnd: 14, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 103, linesEnd: 109, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 244, linesEnd: 273, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsx(_components.p, { children: "Use the PaymentSheet.Configuration struct for customising the Payment Sheet." })] }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 69, linesEnd: 77, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 19, linesEnd: 28, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 1, linesEnd: 28, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 35, linesEnd: 58, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 156, linesEnd: 162, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Enable delayed payment methods" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 249, linesEnd: 251, title: "Enable delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(_components.h4, { children: "Enable Google Pay" }), _jsx(CodeFocusSection, { activeFilePath: "android/AndroidManifest.xml", linesStart: 1, linesEnd: 6, title: "Enable Google Pay API", children: _jsx(_components.p, { children: "To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 263, linesEnd: 268, title: "Configure Google Pay", children: _jsx(_components.p, { children: "Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration." }) }), _jsx(_components.h4, { children: "Customize appearance" }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 252, linesEnd: 262, title: "Customize primary button color", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsx(_components.h4, { children: "Enable card scanning" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 1, linesEnd: 38, title: "Enable card scanning", children: [_jsx(_components.p, { children: "Card scanning can help increase your conversion rate by removing the friction of manual card entry." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripecardscan:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 9, linesEnd: 14, title: "Import additional Stripe resources", children: _jsx(_components.p, { children: "Import the Stripe customer and paymentmethod packages. Use these packages to store information about your customer." }) }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 126, linesEnd: 139, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "server.go", linesStart: 144, linesEnd: 154, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "server.go", linesStart: 74, linesEnd: 109, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect shipping or billing addresses" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 44, linesEnd: 53, title: "Collect shipping or billing addresses", children: [_jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.google.android.libraries.places:places:2.6.0" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "README.md", linesStart: 1, linesEnd: 1, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "README.md", linesStart: 1, linesEnd: 1, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "README.md", linesStart: 1, linesEnd: 1, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ad-java-net", label: "Java + .NET", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-java-net/archive/refs/heads/main.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-java-net", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 29, linesEnd: 36, title: "Install the Stripe.net library", children: [_jsx(_components.p, { children: "Install the package with .NET or NuGet. Alternatively, if you’re starting from scratch, download the files which contains a configured .csproj file." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "dotnet:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "dotnet" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " add" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " package" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " Stripe.net" })] }), "\n"] }) }) }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "NuGet:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "shellscript", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#09A1ED", "--shiki-dark": "#DCDCAA" }, children: "Install-Package" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: " Stripe.net" })] }), "\n"] }) }) })] }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 82, linesEnd: 100, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 88, linesEnd: 92, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 21, linesEnd: 29, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "To install the SDK, add stripe-android to the dependencies block of your build.gradle file:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripe-android:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note:" }), " For details on the latest SDK release and past versions, see the Releases page on GitHub."] })] }), _jsx(CodeFocusSection, { activeFilePath: "android/MyApp.java", linesStart: 6, linesEnd: 14, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 103, linesEnd: 109, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 244, linesEnd: 273, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsx(_components.p, { children: "Use the PaymentSheet.Configuration struct for customising the Payment Sheet." })] }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 69, linesEnd: 77, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 183, linesEnd: 225, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 18, linesEnd: 26, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 111, linesEnd: 136, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 93, linesEnd: 97, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Enable delayed payment methods" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 249, linesEnd: 262, title: "Enable delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(_components.h4, { children: "Enable Google Pay" }), _jsx(CodeFocusSection, { activeFilePath: "android/AndroidManifest.xml", linesStart: 1, linesEnd: 6, title: "Enable Google Pay API", children: _jsx(_components.p, { children: "To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 263, linesEnd: 268, title: "Configure Google Pay", children: _jsx(_components.p, { children: "Enable Google Pay by passing a PaymentSheet.GooglePayConfiguration object with the Google Pay environment (production or test) and the country code of your business when initializing PaymentSheet.Configuration." }) }), _jsx(_components.h4, { children: "Customize appearance" }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 252, linesEnd: 261, title: "Customize primary button", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsx(_components.h4, { children: "Enable card scanning" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 39, linesEnd: 61, title: "Enable card scanning", children: [_jsx(_components.p, { children: "Card scanning can help increase your conversion rate by removing the friction of manual card entry." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripecardscan:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 62, linesEnd: 78, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 84, linesEnd: 85, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 149, linesEnd: 187, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect shipping or billing addresses" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 44, linesEnd: 53, title: "Configure Address Element", children: [_jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.google.android.libraries.places:places:2.6.0" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 1, linesEnd: 27, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 1, linesEnd: 27, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "Server.cs", linesStart: 47, linesEnd: 56, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] }), _jsxs(FrameworkGuide, { framework: "ad-java-java", label: "Java + Java", children: [_jsx(_components.h1, { children: "Build a checkout page with Payment Intents API" }), _jsx(_components.p, { children: "Learn how to embed a custom Stripe payment form in your website or application. The client- and server-side code builds a checkout form with Stripe’s Web or Mobile elements to let you accept payments. To build a custom integration that goes beyond the basics of this quickstart, see Accept a payment." }), _jsx(_components.p, { children: "To learn about different payment scenarios, such as subscriptions, and other Stripe products, compare payment integrations." }), _jsx(DownloadAndOpenButtons, { downloadUrl: "/guardian/stripe-sandbox/stripe-accept-payments-with-stripe-checkout-ad-java-java.zip", gitUrl: "https://github.com/sampleapp-ai/stripe-accept-payments-with-stripe-checkout-ad-java-java", className: "mt-4 mb-6" }), _jsx(_components.h3, { children: "❶ Set up the server" }), _jsxs(CodeFocusSection, { activeFilePath: "pom.xml", linesStart: 33, linesEnd: 39, title: "Install the Stripe Java library", children: [_jsx(_components.p, { children: "Add the dependency to your build and import the library. Alternatively, if you’re starting from scratch and need a sample pom.xml file (for Maven), download the project files using the link in the code editor." }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Maven:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "5", language: "xml", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "xml", children: _jsxs(_components.code, { language: "xml", numberOfLines: "5", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#13BBB7", "--shiki-dark": "#569CD6" }, children: "dependency" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#13BBB7", "--shiki-dark": "#569CD6" }, children: "groupId" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "com.stripe" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#13BBB7", "--shiki-dark": "#569CD6" }, children: "artifactId" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "stripe-java" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#13BBB7", "--shiki-dark": "#569CD6" }, children: "version" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "{VERSION}" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#808080" }, children: "" })] }), "\n"] }) }) }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "Gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "2", language: "text", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "text", children: _jsxs(_components.code, { language: "text", numberOfLines: "2", children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "implementation \"com.stripe:stripe-java:{VERSION}\"" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, {}) })] }) }) }), _jsxs(_components.p, { children: ["Add the following dependency to your POM and replace ", " with the version number you want to use."] })] }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 144, linesEnd: 211, title: "Create a PaymentIntent", children: _jsxs(_components.p, { children: ["Add an endpoint on your server that creates a ", _jsx(_components.code, { children: "PaymentIntent" }), ". A PaymentIntent tracks the customer’s payment lifecycle, keeping track of any failed payment attempts and ensuring the customer is only charged once. Return the PaymentIntent’s ", _jsx(_components.code, { children: "client_secret" }), " in the response to finish the payment on the client."] }) }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 182, linesEnd: 187, title: "Configure payment methods", children: _jsx(_components.p, { children: "Stripe enables cards and other common payment methods by default with dynamic payment methods. You can update and configure payment methods from the Dashboard with no code required. Stripe filters payment methods based on eligibility and payment method preferences, then orders and displays them by probability based on factors including amount, currency, and buyer location." }) }), _jsx(_components.h3, { children: "❷ Build a checkout screen on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 26, linesEnd: 72, title: "Install the SDK", children: [_jsx(_components.p, { children: "The Stripe Android SDK is open source and fully documented and compatible with devices running Android 5.0 (API level 21) and above." }), _jsx(_components.p, { children: "To install the SDK, add stripe-android to the dependencies block of your build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripe-android:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) }), _jsx(_components.p, { children: "Note: For details on the latest SDK release and past versions, see the Releases page on GitHub." })] }), _jsx(CodeFocusSection, { activeFilePath: "android/MyApp.java", linesStart: 6, linesEnd: 14, title: "Setup the SDK", children: _jsx(_components.p, { children: "Configure the Stripe SDK with your Stripe publishable API key. Hardcoding the publishable API key in the SDK is for demonstration only. In a production app, you must retrieve the API key from your server." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 89, linesEnd: 128, title: "Fetch a PaymentIntent", children: _jsx(_components.p, { children: "Make a request to your server for a PaymentIntent as soon as the view loads. Store a reference to the PaymentIntent’s client secret returned by the server; the Payment Sheet uses this secret to complete the payment later." }) }), _jsx(_components.h3, { children: "❸ Complete the payment on the client" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 142, linesEnd: 154, title: "Configure and present the Payment Sheet", children: [_jsx(_components.p, { children: "Create a PaymentSheet instance using the client secret retrieved earlier, and present it from your view controller." }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "PaymentSheet.Configuration" }), " struct for customising the Payment Sheet."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 166, linesEnd: 177, title: "Handle the payment result", children: [_jsx(_components.p, { children: "Use the completion block for handling the payment result." }), _jsx(_components.p, { children: "If payment fails with an error, display the appropriate message to your customer so they can take action and try again. If no error has occurred, tell your customer that the payment was successful." })] }), _jsx(_components.h3, { children: "❹ Test the integration" }), _jsxs(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 137, linesEnd: 142, title: "Make a test payment", children: [_jsx(_components.p, { children: "To verify that your integration works, make a test payment using test payment details." }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment succeeds" }), "\n", _jsx(_components.code, { children: "4242 4242 4242 4242" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment requires authentication" }), "\n", _jsx(_components.code, { children: "4000 0025 0000 3155" })] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Payment is declined" }), "\n", _jsx(_components.code, { children: "4000 0000 0000 9995" })] })] }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 40, title: "See your payment in the Dashboard", children: _jsx(_components.p, { children: "Navigate to the Stripe Dashboard to see your test payment." }) }), _jsx(_components.h3, { children: "Accept payments and enhance your integration" }), _jsx(_components.p, { children: "You’re ready to accept payments with Stripe. Continue with the steps below to add more features." }), _jsx(_components.h4, { children: "Calculate and collect the right amount of tax" }), _jsx(_components.p, { children: "Calculate and collect the right amount of tax on your Stripe transactions. Learn more about Stripe Tax and how to add it to your Payments integration." }), _jsxs(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 75, linesEnd: 95, title: "Use the Stripe Tax API to calculate tax", children: [_jsxs(_components.p, { children: ["Use the Stripe Tax API to calculate tax on the transaction. Provide the ", _jsx(_components.code, { children: "currency" }), ", ", _jsx(_components.code, { children: "customer_details" }), ", and the ", _jsx(_components.code, { children: "line_items" }), " of the order in the request body."] }), _jsxs(_components.p, { children: ["Use the ", _jsx(_components.code, { children: "tax_amount_exclusive" }), " attribute of the resulting Tax Calculation to add the exclusive taxes to the order’s total."] })] }), _jsxs(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 188, linesEnd: 203, title: "Record a Tax Transaction upon successful Payment", children: [_jsxs(_components.p, { children: ["Link the tax calculation to the PaymentIntent using ", _jsx(_components.code, { children: "hooks[inputs][tax][calculation]" }), "."] }), _jsx(_components.p, { children: "This records the collected taxes in your Stripe account that you can later export for accounting purposes, and triggers other Stripe actions." })] }), _jsx(_components.h4, { children: "Enable delayed payment methods" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 144, linesEnd: 144, title: "Allow delayed payment methods", children: [_jsx(_components.p, { children: "Some payment methods can’t guarantee that you’ll receive funds from your customer at the end of the checkout because they take time to settle (for example, most bank debits, such as SEPA or ACH) or require customer action to complete (for example, OXXO, Konbini, Boleto). Use this flag to enable delayed payment methods." }), _jsx(_components.p, { children: "If you enable this feature, make sure your server integration listens to webhooks for notifications on whether payment has succeeded or not." })] }), _jsx(_components.h4, { children: "Enable Google Pay" }), _jsx(CodeFocusSection, { activeFilePath: "android/AndroidManifest.xml", linesStart: 1, linesEnd: 6, title: "Enable Google Pay API", children: _jsx(_components.p, { children: "To use Google Pay, first enable the Google Pay API in your AndroidManifest.xml." }) }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 147, linesEnd: 150, title: "Configure Google Pay", children: _jsxs(_components.p, { children: ["Enable Google Pay by passing a ", _jsx(_components.code, { children: "PaymentSheet.GooglePayConfiguration" }), " object with the Google Pay environment (production or test) and the country code of your business when initializing ", _jsx(_components.code, { children: "PaymentSheet.Configuration" }), "."] }) }), _jsx(_components.h4, { children: "Customize the primary button" }), _jsx(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 146, linesEnd: 146, title: "Custom primary button color", children: _jsx(_components.p, { children: "Consider using a custom color for the primary button that better matches your brand or app’s visual identity." }) }), _jsx(_components.h4, { children: "Enable card scanning" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 26, linesEnd: 72, title: "Add card scanning dependency", children: [_jsx(_components.p, { children: "Card scanning can help increase your conversion rate by removing the friction of manual card entry. To enable card scanning, add stripecardscan to the dependencies block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.stripe:stripecardscan:22.6.1" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h4, { children: "Save payment details after payment" }), _jsx(_components.p, { children: "Often used by SaaS or e-commerce businesses with recurring customers." }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 23, linesEnd: 27, title: "Import additional Stripe resources", children: _jsx(_components.p, { children: "Import the Stripe PaymentMethod and Customer models. Use these models to store information about your Customer." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 148, linesEnd: 169, title: "Create a customer", children: _jsx(_components.p, { children: "Stripe stores the card on an Account object representing the customer. Create a new Account before creating a PaymentIntent. You can also store name, email, shipping address, and other details on the Account." }) }), _jsxs(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 175, linesEnd: 178, title: "Add the customer to the PaymentIntent", children: [_jsxs(_components.p, { children: ["Pass the Account ID to the PaymentIntent and set ", _jsx(_components.code, { children: "setup_future_usage" }), " to ", _jsx(_components.code, { children: "off_session" }), ". ", _jsx(_components.code, { children: "setup_future_usage" }), " tells Stripe how you plan to use the payment method – certain regions, such as Europe and India, have requirements around reusing payment details."] }), _jsxs(_components.p, { children: ["Learn more about the most effective way to apply ", _jsx(_components.code, { children: "setup_future_usage" }), ". You can also view a list of supported payment methods. After the PaymentIntent succeeds, Stripe automatically attaches the payment details (in a PaymentMethod object) to the customer-configured Account."] })] }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 111, linesEnd: 134, title: "Charge the saved PaymentMethod", children: _jsxs(_components.p, { children: ["When you’re ready to charge the PaymentMethod again, create a new PaymentIntent with the Customer ID, the ID of the PaymentMethod you want to charge, and set the ", _jsx(_components.code, { children: "off_session" }), " and ", _jsx(_components.code, { children: "confirm" }), " flags to true."] }) }), _jsx(_components.h4, { children: "Collect local and international addresses" }), _jsxs(CodeFocusSection, { activeFilePath: "android/CheckoutActivity.java", linesStart: 41, linesEnd: 51, title: "Collect shipping or billing addresses", children: [_jsx(_components.p, { children: "Collect local and international shipping or billing addresses from your customers." }), _jsx(_components.p, { children: "If you use the Address Element, you can optionally use the Google Places SDK to fetch address autocomplete suggestions. To enable autocomplete suggestions, add places to the dependency block of your app/build.gradle file:" }), _jsx(_components.p, { children: _jsx(_components.strong, { children: "build.gradle:" }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "1", language: "groovy", children: _jsx(_components.pre, { className: "shiki shiki-themes snazzy-light dark-plus", style: { backgroundColor: "#FAFBFC", "--shiki-dark-bg": "#0B0C0E", color: "#565869", "--shiki-dark": "#D4D4D4" }, language: "groovy", children: _jsxs(_components.code, { language: "groovy", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#565869", "--shiki-dark": "#D4D4D4" }, children: "implementation " }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" }), _jsx(_components.span, { style: { color: "#CF9C00", "--shiki-dark": "#CE9178" }, children: "com.google.android.libraries.places:places:2.6.0" }), _jsx(_components.span, { style: { color: "#ADB1C2", "--shiki-dark": "#CE9178" }, children: "'" })] }), "\n"] }) }) })] }), _jsx(_components.h3, { children: "Next steps" }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 40, title: "Payouts", children: _jsx(_components.p, { children: "Learn how to move funds out of your Stripe account into your bank account." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 40, title: "Refunds", children: _jsx(_components.p, { children: "Handle requests for refunds by using the Stripe API or Dashboard." }) }), _jsx(CodeFocusSection, { activeFilePath: "src/main/java/com/stripe/sample/Server.java", linesStart: 1, linesEnd: 40, title: "Fulfilment", children: _jsx(_components.p, { children: "Create an event destination to send events to your webhook endpoint to fulfil orders after a payment succeeds, and to handle other critical events." }) })] })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { DownloadAndOpenButtons, FrameworkGuide, Architecture, iframeState, CodeFocusSection, SideBySideLayout, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Samples