Integrate Razorpay Custom Checkout with your website to start accepting payments.
Available in🇮🇳 India🇸🇬 Singapore🇺🇸 United States
Integrate Razorpay Payment Gateway with your Custom Checkout. You can build a checkout form to suit your unique business needs and branding guidelines.Custom Checkout’s JavaScript library lets you customise the checkout interface at a granular level. For example, you can white-label the checkout to:
Display only the select payment methods.
Modify the look and feel of Checkout.
Watch Out!You can accept payments only from those websites that you had registered with us at the time of account setup. Razorpay fails the payments received on the unregistered websites. If you want to accept payments from multiple websites, contact our Support team to register additional websites for your account.
UPI Collect Flow DeprecatedAccording to NPCI guidelines, the UPI Collect flow is being deprecated effective 28 February 2026. Customers can no longer make payments or register UPI mandates by manually entering VPA/UPI id/mobile numbers.Exemptions: UPI Collect will continue to be supported for:
MCC 6012 & 6211 (IPO and secondary market transactions).
If you are an existing Razorpay user not covered by exemptions, you must migrate to UPI Intent or UPI QR code to continue accepting UPI payments. For detailed migration steps, refer to the migration documentation.
Generate the API Keys from the Dashboard. To go live with the integration and start accepting real payments, generate Live Mode API Keys and replace them in the integration.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Razorpay","colors":{"primary":"#3395FF","light":"#66B2FF","dark":"#0B62C4"},"logo":{"light":"https://mintcdn.com/razorpay-881012b3/puuu1wI-BbW3rsp2/logo/light.svg?fit=max\u0026auto=format\u0026n=puuu1wI-BbW3rsp2\u0026q=85\u0026s=e0750375ee2004193a685f9f211963fe","dark":"https://mintcdn.com/razorpay-881012b3/puuu1wI-BbW3rsp2/logo/dark.svg?fit=max\u0026auto=format\u0026n=puuu1wI-BbW3rsp2\u0026q=85\u0026s=038b180f26d19ddb4eb40ede0cf84821","href":"https://razorpay.com/docs/"},"favicon":"https://mintcdn.com/razorpay-881012b3/puuu1wI-BbW3rsp2/favicon.png?fit=max\u0026auto=format\u0026n=puuu1wI-BbW3rsp2\u0026q=85\u0026s=9bebe786d3a21e9452fd2e31243e5fb3","api":{"playground":{"display":"interactive"},"mdx":{"auth":{"method":"basic"},"server":"https://api.razorpay.com"}},"navbar":{"links":[{"href":"https://razorpay.com/support/","label":"Support"},{"href":"https://razorpay.com/blog/","label":"Blog"}],"primary":{"type":"button","label":"Dashboard","href":"https://dashboard.razorpay.com/"}},"footer":{"socials":{"x":"https://x.com/Razorpay","linkedin":"https://www.linkedin.com/company/razorpay","github":"https://github.com/razorpay","youtube":"https://www.youtube.com/razorpay"},"links":[{"header":"Products","items":[{"label":"Payment Gateway","href":"https://razorpay.com/payment-gateway"},{"label":"Payment Links","href":"https://razorpay.com/payment-links"},{"label":"RazorpayX","href":"https://razorpay.com/x"},{"label":"Payroll","href":"https://razorpay.com/payroll"}]},{"header":"Resources","items":[{"label":"Documentation","href":"https://razorpay.com/docs"},{"label":"API Reference","href":"https://razorpay.com/docs/api"},{"label":"Support","href":"https://razorpay.com/support"},{"label":"Blog","href":"https://razorpay.com/blog"}]},{"header":"Company","items":[{"label":"About Us","href":"https://razorpay.com/about"},{"label":"Careers","href":"https://razorpay.com/jobs"},{"label":"Pricing","href":"https://razorpay.com/pricing"}]}]},"seo":{"metatags":{"canonical":"https://razorpay.com/docs"}},"contextual":{"options":["copy","view","chatgpt","claude","perplexity","mcp","cursor","vscode"],"display":"header"},"metadata":{"timestamp":true},"styling":{"latex":true},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"razorpay-881012b3","hasAudioNarration":false,"actualSubdomain":"razorpay-881012b3","customDomains":["razorpay.com"],"gitSource":{"type":"github","owner":"razorpay-vendor-integrations","repo":"docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"feedback":{"thumbs":true,"agentFeedback":true},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"REMOVE_BRANDING":{"status":"ENABLED"},"CONTEXTUAL_FEEDBACK":{"status":"ENABLED"},"CODE_SNIPPET_FEEDBACK":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6af5cd749aa4e2cefacb1506","clientVersion":"0.0.4111","searchFilterCounts":[{"language":"default","tag":"Payments","count":1648},{"language":"default","tag":"API Reference","count":772},{"language":"default","tag":"Payment Gateway","count":237},{"language":"default","tag":"Dashboard","count":213},{"language":"default","tag":"Subscriptions","count":190},{"language":"default","tag":"Payouts","count":158},{"language":"default","tag":"Payment Links","count":129},{"language":"default","tag":"Banking Plus","count":123},{"language":"default","tag":"Developer Tools","count":104},{"language":"default","tag":"Ecommerce Plugins","count":104}],"searchSettings":{"maxResults":8}},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableContextualStarterQuestions":false,"enableAskAiSearchBar":true},"basePath":"/docs","hasChatPermissions":true,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-rbac-roles","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"rbac-expansion","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-metadata","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-serve","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"live-agents","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[{"filePath":"style.css","content":"#navbar ul.sidebar-group.mt-6,ul.sidebar-group.mt-6{margin-top:1rem}[data-component-part=\"callout-content\"]>[data-as=\"p\"]:first-child>strong,[data-component-part=\"callout-content\"]>[data-as=\"p\"]:first-child strong,[data-component-part=\"callout-content\"]>strong:first-child{font-size:1.125rem!important;font-weight:700!important;line-height:1.4!important}.error-code-cards [data-component-part=\"card-title\"]{display:inline-block!important;font-family:ui-monospace, \"SF Mono\", SFMono-Regular, Menlo, Consolas,\n \"Liberation Mono\", monospace!important;font-size:0.875rem!important;font-weight:600!important;line-height:1.3!important;padding:0.25rem 0.75rem!important;border-radius:9999px!important;background:rgba(107, 114, 128, 0.10)!important;border:1px solid rgba(107, 114, 128, 0.25)!important}.dark .error-code-cards [data-component-part=\"card-title\"]{background:rgba(255, 255, 255, 0.06)!important;border-color:rgba(255, 255, 255, 0.15)!important}[data-http-method]{font-weight:700!important;border-color:transparent!important}[data-http-method=\"get\"]{color:#15803d!important;background:rgba(74, 222, 128, 0.2)!important}[data-http-method=\"post\"]{color:#1d4ed8!important;background:rgba(96, 165, 250, 0.2)!important}[data-http-method=\"put\"]{color:#a16207!important;background:rgba(250, 204, 21, 0.2)!important}[data-http-method=\"patch\"]{color:#c2410c!important;background:rgba(251, 146, 60, 0.2)!important}[data-http-method=\"delete\"]{color:#b91c1c!important;background:rgba(248, 113, 113, 0.2)!important}.dark [data-http-method=\"get\"]{color:#4ade80!important}.dark [data-http-method=\"post\"]{color:#60a5fa!important}.dark [data-http-method=\"put\"]{color:#facc15!important}.dark [data-http-method=\"patch\"]{color:#fb923c!important}.dark [data-http-method=\"delete\"]{color:#f87171!important}ul.sidebar-group.mt-6{margin-top:5px}.sticky .panel:has(>.rzp-code-selector){display:grid;grid-auto-rows:minmax(0, 1fr);gap:1.5rem;overflow:hidden}.sticky:has(>.panel>.rzp-code-selector)>div:not(.panel){display:none}.rzp-code-selector{position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:0.125rem;border:1px solid rgba(3, 7, 18, 0.1);border-radius:1rem;background:rgb(244, 247, 250)}.dark .rzp-code-selector{border-color:rgba(255, 255, 255, 0.1);background:rgba(255, 255, 255, 0.05)}.rzp-code-selector-bar{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;flex:none;flex-wrap:wrap;padding:0.25rem 4.25rem 0.375rem 0.5rem}.rzp-code-selector-field{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}.rzp-code-selector-select{appearance:none;-webkit-appearance:none;min-width:max-content;padding:0.125rem 1.75rem 0.125rem 0.375rem;border:0;border-radius:0.5rem;background:transparent;color:var(--color-gray-600, #4b5563);font-size:0.75rem;font-weight:500;line-height:1.5rem;cursor:pointer}.dark .rzp-code-selector-select{color:var(--color-gray-300, #d1d5db)}.rzp-code-selector-select:hover{background:rgba(3, 7, 18, 0.05)}.dark .rzp-code-selector-select:hover{background:rgba(255, 255, 255, 0.08)}.rzp-code-selector-chevron{position:absolute;right:0.25rem;width:0.875rem;height:0.875rem;pointer-events:none;opacity:0.6}.rzp-code-selector-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}.rzp-code-selector-body>.code-block{margin:0!important;min-width:0;border-radius:0 0 0.875rem 0.875rem;position:static!important}.rzp-code-selector-body [data-component-part=\"code-block-root\"]{border-radius:0 0 0.875rem 0.875rem}.rzp-code-selector-body .code-block-fade-overlay{display:none}.rzp-code-selector::after{content:\"\";position:absolute;inset:auto 0 0;height:2rem;border-radius:0 0 0.875rem 0.875rem;pointer-events:none;background:linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff)}.dark .rzp-code-selector::after{background:linear-gradient(to bottom, rgba(11, 12, 14, 0), rgb(11, 12, 14))}.rzp-code-selector>.rzp-code-selector-body>.code-block>.absolute{top:0.5rem;right:0.75rem}"},{"filePath":"static/docs-home/styles.css","href":"/docs/_mintlify/custom/razorpay-881012b3/5b8b615a0125ba7b/static/docs-home/styles.css"},{"filePath":"static/nav-more.css","content":"#navbar .nav-tabs{min-width:0;column-gap:1rem}#navbar .nav-tabs:not(.rzpn-more) .nav-tabs-item{display:block;flex:0 1 auto;min-width:3.5rem;min-width:calc-size(max-content, min(size, 5.25rem));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:3rem}#navbar .nav-tabs:not(.rzpn-more) .nav-tabs-item>svg{display:inline-block;vertical-align:middle;margin:-2px 8px 0 0}#navbar .nav-tabs.rzpn-more .nav-tabs-item{flex:none;white-space:nowrap}#navbar .nav-tabs-item[data-rzpn-hidden]{display:none}#navbar .rzpn-more-wrap{position:relative;flex:none}#navbar .rzpn-more-wrap:not([hidden]){display:flex}#navbar .rzpn-more-menu:not([hidden]){display:flex;flex-direction:column}#navbar .rzpn-more-btn{background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}#navbar .rzpn-more-menu{position:absolute;top:calc(100% - 4px);right:0;z-index:50;min-width:12rem;padding:6px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12)}#navbar .rzpn-more-menu a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;white-space:nowrap}#navbar .rzpn-more-menu a:hover,#navbar .rzpn-more-menu a:focus-visible{background:rgba(127,127,127,.12)}"}],"page":{"pagePath":"us/payments/payment-gateway/web-integration/custom","slug":"/us/payments/payment-gateway/web-integration/custom","pageMetadata":{"title":"Web Integration - Razorpay Custom Checkout","sidebarTitle":"Integrate with Web Custom SDK","description":"Integrate Razorpay Custom Checkout with your website to start accepting payments.","href":"/us/payments/payment-gateway/web-integration/custom","hidden":true},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Integrate Razorpay Custom Checkout with your website to start accepting payments.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,li:`li`,ol:`ol`,p:`p`,strong:`strong`,ul:`ul`,..._provideComponents(),...props.components},{Heading,Warning}=_components;if(!Heading)_missingMdxReference(`Heading`,true);if(!Warning)_missingMdxReference(`Warning`,true);return _jsxs(_Fragment,{children:[_jsxs(`div`,{style:{display:`flex`,flexWrap:`wrap`,alignItems:`center`,gap:`0.35rem 0.9rem`,border:`1px solid rgba(128,128,128,0.28)`,borderRadius:`0.5rem`,padding:`0.45rem 0.75rem`,margin:`0 0 1.25rem`,fontSize:`0.875rem`},children:[_jsx(`span`,{style:{fontWeight:600},children:`Available in`}),_jsx(`span`,{children:`🇮🇳 India`}),_jsx(`span`,{children:`🇸🇬 Singapore`}),_jsx(`span`,{children:`🇺🇸 United States`})]}),`\n`,_jsx(_components.p,{children:`Integrate Razorpay Payment Gateway with your Custom Checkout. You can build a checkout form to suit your unique business needs and branding guidelines.`}),`\n`,_jsx(_components.p,{children:`Custom Checkout’s JavaScript library lets you customise the checkout interface at a granular level. For example, you can white-label the checkout to:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Display only the select payment methods.`}),`\n`,_jsx(_components.li,{children:`Modify the look and feel of Checkout.`}),`\n`]}),`\n`,_jsxs(Warning,{children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`Watch Out!`})}),_jsxs(_components.p,{children:[`You can accept payments `,_jsx(_components.strong,{children:`only`}),` from those websites that you had registered with us at the time of `,_jsx(_components.a,{href:`/us/payments/set-up`,children:`account setup`}),`. Razorpay `,_jsx(_components.strong,{children:`fails`}),` the payments received on the `,_jsx(_components.strong,{children:`unregistered websites`}),`. If you want to accept payments from multiple websites, contact our `,_jsx(_components.a,{href:`https://razorpay.com/us/support/`,children:`Support team`}),` to register additional websites for your account.`]})]}),`\n`,_jsxs(Warning,{children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`UPI Collect Flow Deprecated`})}),_jsx(_components.p,{children:`According to NPCI guidelines, the UPI Collect flow is being deprecated effective 28 February 2026. Customers can no longer make payments or register UPI mandates by manually entering VPA/UPI id/mobile numbers.`}),_jsxs(_components.p,{children:[_jsx(_components.strong,{children:`Exemptions:`}),` UPI Collect will continue to be supported for:`]}),_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`MCC 6012 \u0026 6211 (IPO and secondary market transactions).`}),`\n`,_jsx(_components.li,{children:`iOS mobile app and mobile web transactions.`}),`\n`,_jsx(_components.li,{children:`UPI Mandates (execute/modify/revoke operations only)`}),`\n`,_jsx(_components.li,{children:`eRupi vouchers.`}),`\n`,_jsx(_components.li,{children:`PACB businesses (cross-border/international payments).`}),`\n`]}),_jsx(_components.p,{children:_jsx(_components.strong,{children:`Action Required:`})}),_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[`If you are a new Razorpay user, use `,_jsx(_components.a,{href:`/payments/payment-gateway/web-integration/custom/payment-methods#intent-flow`,children:`UPI Intent`}),`.`]}),`\n`,_jsxs(_components.li,{children:[`If you are an existing Razorpay user not covered by exemptions, you must migrate to UPI Intent or UPI QR code to continue accepting UPI payments. For detailed migration steps, refer to the `,_jsx(_components.a,{href:`/announcements/upi-collect-migration/custom-integration`,children:`migration documentation`}),`.`]}),`\n`]})]}),`\n`,_jsx(Heading,{level:`2`,id:`prerequisites`,children:`Prerequisites`}),`\n`,_jsx(_components.p,{children:`Before integrating with the Checkout, run through this checklist:`}),`\n`,_jsxs(`ul`,{children:[_jsxs(`li`,{children:[`Create a `,_jsx(`a`,{href:`https://dashboard.razorpay.com/signup`,target:`_blank`,children:`Razorpay account`}),`. `]}),_jsxs(`li`,{children:[`Generate the `,_jsx(_components.a,{href:`/us/payments/dashboard/account-settings/api-keys#generate-api-keys`,target:`_blank`,children:`API Keys`}),` from the Dashboard. To go live with the integration and start accepting real payments, generate Live Mode API Keys and replace them in the integration.`]}),_jsxs(`li`,{children:[`Know about the `,_jsx(_components.a,{href:`/us/payments/payment-gateway/how-it-works`,target:`_blank`,children:`Payment Flow`}),`.`]})]}),`\n`,_jsxs(Warning,{children:[_jsx(_components.p,{children:_jsx(_components.strong,{children:`Watch Out!`})}),_jsx(_components.p,{children:`A customer’s payment information should never reach your servers unless you are PCI-DSS certified.`})]}),`\n`,_jsx(Heading,{level:`2`,id:`integration-steps`,children:`Integration Steps`}),`\n`,_jsx(_components.p,{children:`Follow these integration steps:`}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/us/payments/payment-gateway/web-integration/custom/build-integration`,children:`Build Integration`})}),`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/us/payments/payment-gateway/web-integration/custom/test-integration`,children:`Test Integration`})}),`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/us/payments/payment-gateway/web-integration/custom/go-live-checklist`,children:`Go-Live Checklist`})}),`\n`]}),`\n`,_jsx(Heading,{level:`3`,id:`related-information`,children:`Related Information`}),`\n`,_jsx(_components.p,{children:_jsx(_components.a,{href:`/us/payments/payment-gateway/web-integration/custom/best-practices`,children:`Best Practices`})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{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.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Web Integration - Razorpay Custom Checkout","sidebarTitle":"Integrate with Web Custom SDK","description":"Integrate Razorpay Custom Checkout with your website to start accepting payments.","href":"/us/payments/payment-gateway/web-integration/custom","hidden":true}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Prerequisites","slug":"prerequisites","depth":2,"children":[]},{"title":"Integration Steps","slug":"integration-steps","depth":2,"children":[{"title":"Related Information","slug":"related-information","depth":3,"children":[]}]}],"codeExamples":{}},"jsLinks":["/docs/_mintlify/custom/razorpay-881012b3/ccee8c0e9edccd6b/country-switcher.js","/docs/_mintlify/custom/razorpay-881012b3/d04f2910efb9afc8/static/docs-home/script.js","/docs/_mintlify/custom/razorpay-881012b3/e78183bdfe89167a/ga4.js","/docs/_mintlify/custom/razorpay-881012b3/0ccbc66d726b02ea/static/nav-more.js","/docs/_mintlify/custom/razorpay-881012b3/fe07c43033bf9a19/hreflang.js"],"subdomain":"razorpay-881012b3","siteName":"Razorpay","title":"Web Integration - Razorpay Custom Checkout - Razorpay","navMaps":{"firstHrefInVersion":{"India":{"href":"/home","matchLevel":4},"Singapore":{"href":"/sg/payments/payment-gateway/web-integration/custom","matchLevel":1,"hidden":true},"United States":{"href":"/us/payments/payment-gateway/web-integration/custom","matchLevel":0}},"firstHrefInLanguage":{}},"lastModified":"2026-10-08T16:37:48.965Z","gitLastModified":"2026-10-08T16:35:44.000Z","originalFileLocation":"us/payments/payment-gateway/web-integration/custom.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Integrate Razorpay Custom Checkout with your website to start accepting payments.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Razorpay\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003cmeta data-mint-head name=\"robots\" content=\"noindex\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/docs/mintlify-assets/_mintlify/favicons/razorpay-881012b3/gWy2bjt_zV_OZ2iN/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/docs/mintlify-assets/_mintlify/favicons/razorpay-881012b3/gWy2bjt_zV_OZ2iN/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/docs/mintlify-assets/_mintlify/favicons/razorpay-881012b3/gWy2bjt_zV_OZ2iN/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/docs/mintlify-assets/_mintlify/favicons/razorpay-881012b3/gWy2bjt_zV_OZ2iN/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/docs/mintlify-assets/_mintlify/favicons/razorpay-881012b3/gWy2bjt_zV_OZ2iN/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/docs/mintlify-assets/_mintlify/favicons/razorpay-881012b3/gWy2bjt_zV_OZ2iN/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/docs/mintlify-assets/_mintlify/favicons/razorpay-881012b3/gWy2bjt_zV_OZ2iN/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/docs/mintlify-assets/_mintlify/favicons/razorpay-881012b3/gWy2bjt_zV_OZ2iN/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/docs/mintlify-assets/_mintlify/favicons/razorpay-881012b3/gWy2bjt_zV_OZ2iN/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Web Integration - Razorpay Custom Checkout - Razorpay\">\u003cmeta data-mint-head property=\"og:description\" content=\"Integrate Razorpay Custom Checkout with your website to start accepting payments.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Razorpay\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://razorpay.com/docs/us/payments/payment-gateway/web-integration/custom\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://razorpay-881012b3.mintlify.site/docs/_mintlify/api/og/v2?division=Documentation\u0026amp;title=Web+Integration+-+Razorpay+Custom+Checkout\u0026amp;description=Integrate+Razorpay+Custom+Checkout+with+your+website+to+start+accepting+payments.\u0026amp;theme=a4f414a96152b37051aa45a2\u0026amp;signature=b7e2d39094a5fffce9fe02f1431778bd705481e401181dff65f912056f773992\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Web Integration - Razorpay Custom Checkout - Razorpay\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Integrate Razorpay Custom Checkout with your website to start accepting payments.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://razorpay-881012b3.mintlify.site/docs/_mintlify/api/og/v2?division=Documentation\u0026amp;title=Web+Integration+-+Razorpay+Custom+Checkout\u0026amp;description=Integrate+Razorpay+Custom+Checkout+with+your+website+to+start+accepting+payments.\u0026amp;theme=a4f414a96152b37051aa45a2\u0026amp;signature=b7e2d39094a5fffce9fe02f1431778bd705481e401181dff65f912056f773992\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/docs/mintlify-assets/_mintlify/favicons/razorpay-881012b3/gWy2bjt_zV_OZ2iN/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Razorpay\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#3395FF\">\u003clink data-mint-head rel=\"canonical\" href=\"https://razorpay.com/docs/us/payments/payment-gateway/web-integration/custom\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/docs/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/docs/us/payments/payment-gateway/web-integration/custom.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://razorpay.com/#organization\",\"name\":\"Razorpay\",\"url\":\"https://razorpay.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/razorpay-881012b3/puuu1wI-BbW3rsp2/logo/light.svg?fit=max\u0026auto=format\u0026n=puuu1wI-BbW3rsp2\u0026q=85\u0026s=e0750375ee2004193a685f9f211963fe\"}},{\"@type\":\"WebSite\",\"@id\":\"https://razorpay.com/docs#website\",\"name\":\"Razorpay\",\"url\":\"https://razorpay.com/docs\",\"publisher\":{\"@id\":\"https://razorpay.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://razorpay.com/docs/us/payments/payment-gateway/web-integration/custom#webpage\",\"url\":\"https://razorpay.com/docs/us/payments/payment-gateway/web-integration/custom\",\"name\":\"Web Integration - Razorpay Custom Checkout\",\"description\":\"Integrate Razorpay Custom Checkout with your website to start accepting payments.\",\"dateModified\":\"2026-10-08T16:35:44.000Z\",\"isPartOf\":{\"@id\":\"https://razorpay.com/docs#website\"}},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://razorpay.com/docs/us/payments/payment-gateway/web-integration/custom#article\",\"headline\":\"Web Integration - Razorpay Custom Checkout\",\"name\":\"Web Integration - Razorpay Custom Checkout\",\"description\":\"Integrate Razorpay Custom Checkout with your website to start accepting payments.\",\"url\":\"https://razorpay.com/docs/us/payments/payment-gateway/web-integration/custom\",\"mainEntityOfPage\":{\"@id\":\"https://razorpay.com/docs/us/payments/payment-gateway/web-integration/custom#webpage\"},\"dateModified\":\"2026-10-08T16:35:44.000Z\",\"publisher\":{\"@id\":\"https://razorpay.com/#organization\"},\"isPartOf\":{\"@id\":\"https://razorpay.com/docs#website\"}}]}\u003c/script>","agentPointerHref":"/docs/us/payments/payment-gateway/web-integration/custom.md","siteName":"Razorpay","nav":{"global":null,"versions":[{"version":"India","default":true,"pages":[{"title":"India","href":"/home"}]},{"version":"Singapore","pages":[{"title":"Singapore","href":"/sg/payments/payment-gateway/web-integration/custom"}]},{"version":"United States","tabs":[{"tab":"Home","icon":"house","pages":[{"title":"Home","href":"/us/home"}]},{"tab":"Payments","icon":"credit-card","pages":[{"title":"Payments","href":"/us/payments"}]},{"tab":"API Reference","icon":"code","pages":[{"title":"API Reference","href":"/us/api"}]},{"tab":"Developer Tools","icon":"screwdriver-wrench","pages":[{"title":"Developer Tools","href":"/us/developer-tools"}]},{"tab":"Prerequisites (Payments)","hidden":true,"pages":[{"title":"Prerequisites (Payments)","href":"/us/payments/payment-gateway/ecommerce-plugins/shopify-razorpay-secure"}]},{"tab":"Recurring Payments","hidden":true,"pages":[{"title":"Recurring Payments","href":"/us/payments/recurring-payments"}]},{"tab":"Web Integration - Razorpay Custom Checkout","hidden":true,"pages":[{"title":"Web Integration - Razorpay Custom Checkout","sidebarTitle":"Integrate with Web Custom SDK","href":"/us/payments/payment-gateway/web-integration/custom"},{"title":"1. Build Integration","description":"Steps to integrate the Custom Checkout form on your website.","href":"/us/payments/payment-gateway/web-integration/custom/build-integration"},{"title":"2. Test Integration","description":"Steps to test if the custom Web integration was successful.","href":"/us/payments/payment-gateway/web-integration/custom/test-integration"},{"title":"3. Go-live Checklist","description":"Check the go-live checklist for Razorpay Payment Gateway Custom Web integration.","href":"/us/payments/payment-gateway/web-integration/custom/go-live-checklist"},{"title":"Best Practices","description":"Best practices you must follow for smoother integration and payment experience.","href":"/us/payments/payment-gateway/web-integration/custom/best-practices"},{"title":"Troubleshooting \u0026 FAQs","description":"Troubleshoot common errors and find answers to frequently asked questions related to Razorpay Web Custom Checkout Integration.","href":"/us/payments/payment-gateway/web-integration/custom/troubleshooting-faqs"},{"group":"Additional Options","pages":[{"title":"Additional Support for Payment Methods","description":"Check the various form fields you can use in the Checkout Form used in Razorpay Checkout integrations.","href":"/us/payments/payment-gateway/web-integration/custom/payment-methods"},{"title":"Input Restriction in Custom Fields","description":"Add custom fields and implement input restriction methods in your Custom Checkout Form.","href":"/us/payments/payment-gateway/web-integration/custom/input-restriction"}]}]}]},{"version":"Malaysia","href":"https://curlec.com/docs"}]},"basePath":"","title":"Web Integration - Razorpay Custom Checkout - Razorpay","buildId":"dpl_6PxPD4Fj1JDU9BJxEHvfdUmxKThw","deploymentId":"dpl_6PxPD4Fj1JDU9BJxEHvfdUmxKThw","dynamics":[],"chunks":[]}
