1"use strict";(self.webpackChunkmonei_docs=self.webpackChunkmonei_docs||[]).push([["23321"],{95602(e,n,t){t.r(n),t.d(n,{metadata:()=>r,default:()=>y,frontMatter:()=>d,contentTitle:()=>h,toc:()=>p,assets:()=>m});var r=JSON.parse('{"id":"integrations/use-prebuilt-payment-page","title":"Hosted Payment Page","description":"The MONEI Hosted Payment Page is the simplest way to collect payments securely \u2014 you redirect the customer to a page MONEI hosts, with cards, PayPal, Bizum, Google Pay, Apple Pay and Click to Pay built in.","source":"@site/docs/integrations/use-prebuilt-payment-page.mdx","sourceDirName":"integrations","slug":"/integrations/use-prebuilt-payment-page","permalink":"/integrations/use-prebuilt-payment-page","draft":false,"unlisted":false,"tags":[{"inline":false,"label":"Payments","permalink":"/tags/payments"},{"inline":false,"label":"Hosted Payment Page","permalink":"/tags/prebuilt-page"},{"inline":false,"label":"3D Secure","permalink":"/tags/3d-secure"}],"version":"current","lastUpdatedAt":1790006624000,"frontMatter":{"id":"use-prebuilt-payment-page","title":"Hosted Payment Page","description":"The MONEI Hosted Payment Page is the simplest way to collect payments securely \u2014 you redirect the customer to a page MONEI hosts, with cards, PayPal, Bizum, Google Pay, Apple Pay and Click to Pay built in.","keywords":["hosted payment page","prebuilt payment page","redirect","redirect checkout","redirect-based checkout","p\xe1gina de pago alojada","redirecci\xf3n","payment page"],"tags":["payments","prebuilt-page","3d-secure"]},"sidebar":"docs","previous":{"title":"Use payment modal","permalink":"/integrations/use-payment-modal"},"next":{"title":"Use QR code payments","permalink":"/integrations/use-qr-payments"}}'),i=t(91987),s=t(39844),a=t(7737),l=t.n(a),o=t(50343),c=t.n(o);let d={id:"use-prebuilt-payment-page",title:"Hosted Payment Page",description:"The MONEI Hosted Payment Page is the simplest way to collect payments securely \u2014 you redirect the customer to a page MONEI hosts, with cards, PayPal, Bizum, Google Pay, Apple Pay and Click to Pay built in.",keywords:["hosted payment page","prebuilt payment page","redirect","redirect checkout","redirect-based checkout","p\xe1gina de pago alojada","redirecci\xf3n","payment page"],tags:["payments","prebuilt-page","3d-secure"]},h,m={},p=[{value:"Before you begin",id:"before-you-begin",level:2},{value:"How it works",id:"how-it-works",level:2},{value:"Integration steps",id:"integration-steps",level:2},{value:"1. Create Payment (Server-side)",id:"1-create-payment-server-side",level:3},{value:"2. Handle Payment Interaction (Client-side via Redirect)",id:"2-handle-payment-interaction-client-side-via-redirect",level:3},{value:"3. Process Webhook Notification (Server-side)",id:"3-process-webhook-notification-server-side",level:3}];function u(e){let n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",mermaid:"mermaid",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.R)(),...e.components},{Lightbox:r,Term:a}=n;return r||j("Lightbox",!0),a||j("Term",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:["The MONEI ",(0,i.jsx)(n.strong,{children:"Hosted Payment Page"})," offers the simplest, PCI-compliant way to securely collect payments from your customers using various methods."]}),"\n",(0,i.jsxs)(n.p,{children:["This is the ",(0,i.jsx)(n.strong,{children:"redirect-based"})," checkout: you create a payment, send the customer to the ",(0,i.jsx)(n.code,{children:"redirectUrl"})," MONEI returns, and they come back to your ",(0,i.jsx)(n.code,{children:"completeUrl"})," when they're done. Wherever the docs mention a redirect checkout, redirecting the customer to MONEI, or a MONEI-hosted page, this is the page they mean."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Hosted payments preview",src:t(61365).A+"",width:"2048",height:"2030"})}),"\n",(0,i.jsx)("div",{children:(0,i.jsx)("a",{href:"https://js.monei.com/v3/payment-page/#JTdCJTIydGVzdCUyMiUzQXRydWUlMkMlMjJwcmV2aWV3JTIyJTNBZmFsc2UlMkMlMjJzaG93SGVhZGVyJTIyJTNBdHJ1ZSUyQyUyMnNob3BOYW1lJTIyJTNBJTIyQVRFTElFUiUyMiUyQyUyMmFtb3VudCUyMiUzQTExMCUyQyUyMmN1cnJlbmN5JTIyJTNBJTIyRVVSJTIyJTJDJTIyb3JkZXJJZCUyMiUzQSUyMnRlc3Qtb3JkZXItMDAxJTIyJTJDJTIycGF5bWVudElkJTIyJTNBJTIyYTF
1hMWExYTFhMWExYTFhMWExYTFhMWExYTFhMWExYTElMjIlMkMlMjJhY2NvdW50SWQlMjIlM0ElMjIlMjIlMkMlMjJwYXltZW50TWV0aG9kcyUyMiUzQSU1QiUyMmJpenVtJTIyJTJDJTIycGF5cGFsJTIyJTJDJTIyYXBwbGVQYXklMjIlMkMlMjJnb29nbGVQYXklMjIlMkMlMjJjbGlja1RvUGF5JTIyJTJDJTIyY2FyZCUyMiU1RCUyQyUyMm5hdGl2ZVBheW1lbnRNZXRob2RzJTIyJTNBJTVCJTVEJTJDJTIyYWNjZW50Q29sb3IlMjIlM0ElMjIlMjNCMDYxMkYlMjIlMkMlMjJiZ0NvbG9yJTIyJTNBJTIyJTIzRkFGNkYwJTIyJTJDJTIyYm9yZGVyUmFkaXVzJTIyJTNBJTIyNHB4JTIyJTJDJTIyZm9udEZhbWlseSUyMiUzQSUyMlNvdXJjZSUyMFNhbnMlMjBQcm8lMkMlMjB1aS1zYW5zLXNlcmlmJTJDJTIwc3lzdGVtLXVpJTJDJTIwc2Fucy1zZXJpZiUyMiUyQyUyMmxhbmd1YWdlJTIyJTNBJTIyZW4lMjIlMkMlMjJzaG9wQ291bnRyeSUyMiUzQSUyMkVTJTIyJTJDJTIyc2hvcExvZ29VcmwlMjIlM0ElMjJodHRwcyUzQSUyRiUyRm1vbmVpLXByb2Qtc2VydmljZS1idWNrZXQuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20lMkZwcm90ZWN0ZWQlMkZldS13ZXN0LTElMjUzQTljYWYwMGE1LWMyODEtNDA0NS1iOTVkLThmZDQ5ZTA5NGUwNiUyRjE4NzA2OWUxLWM1MjYtNGU3Zi1iZTJmLWU1MGUxYjBlZDRiNC5zdmclMjIlMkMlMjJiYWNrVXJsJTIyJTNBJTIyaHR0cHMlM0ElMkYlMkZtb25laS5jb20lMjIlN0Q",target:"_blank",className:"button button--primary",children:(0,i.jsx)(n.p,{children:"Live demo"})})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Key Features:"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Designed to remove friction:"})," Real-time card validation with built-in error messaging."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Mobile-ready:"})," Fully responsive design."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"International:"})," Supports 13 languages."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Multiple payment methods:"})," Supports various ",(0,i.jsx)(n.a,{href:"https://monei.com/blog/multiple-payment-options/",children:"payments methods"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Customization and branding:"})," Customizable logo, colors, font, text size and corners via your ",(0,i.jsx)(n.a,{href:"https://dashboard.monei.com/settings/branding",children:"MONEI Dashboard"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"3D Secure:"})," Built-in support for ",(0,i.jsx)(a,{id:"sca",children:"SCA"})," verification."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Fraud and compliance:"})," Simplified PCI compliance and SCA-ready."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["You can customize the appearance in your ",(0,i.jsx)(n.a,{href:"https://dashboard.monei.com/settings/branding",children:"MONEI Dashboard \u2192 Settings \u2192 Branding"}),"."]}),"\n",(0,i.jsx)(r,{src:"/img/dashboard/en/settings-branding.png",alt:"Branding page in the MONEI Dashboard settings, where you customize your payment page"}),"\n",(0,i.jsx)(n.h2,{id:"before-you-begin",children:"Before you begin"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["You'll need a MONEI account and your API keys (test or live). Find them in your ",(0,i.jsx)(n.a,{href:"https://dashboard.monei.com/settings/api",children:"MONEI Dashboard"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["Use your ",(0,i.jsx)(n.a,{href:"/testing",children:"test mode keys"})," for integration testing."]}),"\n",(0,i.jsx)(n.li,{children:"Ensure relevant payment methods are enabled in your account settings."}),"\n",(0,i.jsxs)(n.li,{children:["You can monitor test payments in your ",(0,i.jsx)(n.a,{href:"https://dashboard.monei.com/payments",children:"MONEI Dashboard \u2192 Payments"})," (ensure Test Mode is active)."]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"how-it-works",children:"How it works"}),"\n",(0,i.jsx)(n.mermaid,{value:"sequenceDiagram\n participant Backend as Your Backend\n participant API as MONEI API\n participant Browser as Customer Browser\n participant Page as MONEI Payment Page\n\n Backend->>API: 1. POST /v1/payments\n API--\x3e>Backend: payment.id + redirectUrl\n Backend->>Browser: 2. Redirect to redirectUrl\n Browser->>Page: 3. Customer pays on Hosted Payment Page\n Page--\x3e>Browser: 4. Redirect to completeUrl\n API->>Backend: 5. Webhook (payment status)"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["Your ",(0,i.jsx)(n.strong,{children:"backend"})," creates a payment and receives a ",(0,i.jsx)(n.code,{children:"redirectUrl"})]}),"\n",(0,i.jsxs)(n.li,{children:["The customer is ",(0,i.jsx)(n.strong,{children:"redirected"})," to the MONEI Hosted Payment Page"]}),"\n",(0,i.jsx)(n.li,{children:"The customer selects a payment method and completes the payment (including 3D Secure if required)"}),"\n",(0,i.jsxs)(n.li,{children:["After payment, the customer is redirected back to your ",(0,i.jsx)(n.code,{children:"completeUrl"})," (or ",(0,i.jsx)(n.code,{children:"cancelUrl"})," if cancelled)"]}),"\n",(0,i.jsxs)(n.li,{children:["MONEI sends the ",(0,i.jsx)(n.strong,{children:"final payment status"})," to your backend via webhook \u2014 always rely on this, not the redirect"]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"integration-steps",children:"Integration steps"}),"\n",(0,i.jsx)(n.h3,{id:"1-create-payment-server-side",children:"1. Create Payment (Server-side)"}),"\n",(0,i.jsxs)(n.p,{children:["First, make a server-side API call to create a new ",(0,i.jsx)(n.a,{href:"/apis/rest/schemas/payment",children:"Payment object"}),". This registers the payment intent with MONEI."]}),"\n","\n",(0,i.jsxs)(c(),{defaultValue:"curl",groupId:"code",values:[{label:"cURL",value:"curl"},{label:"Node.js",value:"node"},{label:"PHP",value:"php"},{label:"Python",value:"python"}],children:[(0,i.jsxs)(l(),{value:"curl",children:[(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",metastring:'script title="PO
1ST https://api.monei.com/v1/payments"',children:'curl --request POST \'https://api.monei.com/v1/payments\' \\\\\n--header \'Authorization: YOUR_API_KEY\' \\\\\n--header \'Content-Type: application/json\' \\\\\n--data-raw \'{\n "amount": 110,\n "currency": "EUR",\n "orderId": "14379133960355",\n "description": "Test Shop - #14379133960355",\n "customer": {\n "name": "John Doe",\n "email": "[email protected]",\n "phone": "+34666555444"\n },\n "billingDetails": {\n "name": "John Doe",\n "address": {\n "country": "ES",\n "city": "Malaga",\n "line1": "Fake Street 123",\n "zip": "29001"\n }\n },\n "callbackUrl": "https://example.com/checkout/callback",\n "completeUrl": "https://example.com/checkout/complete",\n "cancelUrl": "https://example.com/checkout/cancel"\n}\'\n'})}),(0,i.jsxs)(n.p,{children:["(Replace ",(0,i.jsx)(n.code,{children:"YOUR_API_KEY"})," with your actual MONEI API key)"]})]}),(0,i.jsx)(l(),{value:"node",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="server.js"',children:"import {Monei} from '@monei-js/node-sdk';\n\n// Replace YOUR_API_KEY with your actual MONEI API key\nconst monei = new Monei('YOUR_API_KEY');\n\nconst payment = await monei.payments.create({\n amount: 110,\n currency: 'EUR',\n orderId: '14379133960355',\n description: 'Test Shop - #14379133960355',\n customer: {\n name: 'John Doe',\n email: '[email protected]',\n phone: '+34666555444'\n },\n billingDetails: {\n name: 'John Doe',\n address: {\n country: 'ES',\n city: 'Malaga',\n line1: 'Fake Street 123',\n zip: '29001'\n }\n },\n callbackUrl: 'https://example.com/checkout/callback',\n completeUrl: 'https://example.com/checkout/complete',\n cancelUrl: 'https://example.com/checkout/cancel'\n});\n\n// You will need the redirectUrl from the response in the next step\nconst redirectUrl = payment.nextAction.redirectUrl;\n"})})}),(0,i.jsx)(l(),{value:"php",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-php",metastring:'title="server.php"',children:"<?php\nrequire_once 'vendor/autoload.php';\n\nuse Monei\\Model\\CreatePaymentRequest;\nuse Monei\\Model\\PaymentCustomer;\nuse Monei\\Model\\PaymentBillingDetails;\nuse Monei\\Model\\Address;\nuse Monei\\MoneiClient;\n\n// Replace YOUR_API_KEY with your actual MONEI API key\n$monei = new MoneiClient('YOUR_API_KEY');\n\n$payment = $monei->payments->create(\n new CreatePaymentRequest([\n 'amount' => 110,\n 'currency' => 'EUR',\n 'order_id' => '14379133960355',\n 'description' => 'Test Shop - #14379133960355',\n 'customer' => new PaymentCustomer([\n 'name' => 'John Doe',\n 'email' => '[email protected]',\n 'phone' => '+34666555444'\n ]),\n 'billing_details' => new PaymentBillingDetails([\n 'name' => 'John Doe',\n 'address' => new Address([\n 'country' => 'ES',\n 'city' => 'Malaga',\n 'line1' => 'Fake Street 123',\n 'zip' => '29001'\n ])\n ]),\n 'callback_url' => 'https://example.com/checkout/callback',\n 'complete_url' => 'https://example.com/checkout/complete',\n 'cancel_url' => 'https://example.com/checkout/cancel'\n ])\n);\n\n// You will need the redirectUrl from the response in the next step\n$redirectUrl = $payment->getNextAction()->getRedirectUrl();\n?>\n"})})}),(0,i.jsx)(l(),{value:"python",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-python",metastring:'title="server.py"',children:'import Monei\nfrom Monei import CreatePaymentRequest, PaymentCustomer, PaymentBillingDetails, Address\n\n# Replace YOUR_API_KEY with your actual MONEI API key\nmonei = Monei.MoneiClient(api_key="YOUR_API_KEY")\n\npayment = monei.payments.create(\n CreatePaymentRequest(\n amount=110,\n currency="EUR",\n order_id="14379133960355",\n description="Test Shop - #14379133960355",\n customer=PaymentCustomer(\n name="John Doe",\n email="[email protected]",\n phone="+34666555444"\n ),\n billing_details=PaymentBillingDetails(\n name="John Doe",\n address=Address(\n country="ES",\n city="Malaga",\n line1="Fake Street 123",\n zip="29001"\n )\n ),\n callback_url="https://example.com/checkout/callback",\n complete_url="https://example.com/checkout/complete",\n cancel_url="https://example.com/checkout/cancel"\n )\n)\n\n# You will need the redirectUrl from the response in the next step\nredirect_url = payment.next_action.redirect_url\n'})})})]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Key Parameters:"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"amount"})," ",(0,i.jsx)(n.code,{children:"positive integer"}),": Amount in the ",(0,i.jsx)(a,{id:"minor-currency-unit",children:"smallest currency unit"})," (e.g., 110 for \u20AC1.10)."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"currency"})," ",(0,i.jsx)(n.code,{children:"string"}),": Three-letter ",(0,i.jsx)(n.a,{href:"https://en.wikipedia.org/wiki/ISO_4217",children:"ISO currency code"})," (e.g., ",(0,i.jsx)(n.code,{children:"EUR"}),")."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"orderId"})," ",(0,i.jsx)(n.code,{children:"string"}),": Your unique order identifier."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"completeUrl"})," ",(0,i.jsx)(n.code,{children:"string"}),": Where the customer is redirected ",(0,i.jsx)(n.strong,{children:"after"})," attempting payment (success or failure)."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"callbackUrl"})," ",(0,i.jsx)(n.code,{children:"string"}),": Your server endpoint URL for asynchronous webhook notifications (crucial for final status)."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"cancelUrl"})," `string**: Where the customer is redirected if they click ",(0,i.jsx)(n.strong,{children:"cancel"}),' or **"Back to shop"**.']}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Check all available ",(0,i.jsx)(n.a,{href:"/apis/rest/payments-create",children:"request parameters"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["The API response includes the ",(0,i.jsx)(n.code,{children:"payment.id"})," and, importantly, ",(0,i.jsx)(n.code,{children:"payment.nextAction.redirectUrl"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"2-handle-payment-interaction-client-side-via-redirect",children:"2. Handle Payment Interaction (Client-side via Redirect)"}),"\n",(0,i.jsxs)(n.p,{children:["The API response from Step 1 contains a ",(0,i.jsx)(n.code,{children:"nextAction"})," object with a ",(0,i.jsx)(n.code,{children:"redirectUrl"}),". You ",(0,i.jsx)(n.strong,{children:"must"})," redirect your customer's browser to this URL."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-json",metastring:'title="Example Partial API Response"',children:'{\n "id": "af6029f80f5fc73a8ad2753eea0b1be0", // MONEI Payment ID\n // ... other fields ...\n "status": "PENDING", // Initial status\n "nextAction": {\n "type": "CONFIRM",\n "mustRedirect": true, // Indicates redirection is needed\n "redirectUrl": "https://secure.monei.com/payments/af6029f80f5fc73a8ad2753eea0b1be0" // <-- REDIRECT CUSTOMER HERE\n }\n}\n'})}),"\n",(0,i.jsxs)(n.p,{children:["This ",(0,i.jsx)(n.code,{children:"redirectUrl"})," leads the customer to the secure MONEI Hosted Payment Page where they will select a payment method and enter the
1ir details."]}),"\n",(0,i.jsx)(n.admonition,{title:"Alternative: Payment Modal",type:"note",children:(0,i.jsxs)(n.p,{children:["Instead of a full page redirect, you can use ",(0,i.jsx)(n.a,{href:"/monei-js/reference",children:(0,i.jsx)(n.code,{children:"monei.js"})})," to present payment options within a modal on your own site. See the ",(0,i.jsx)(n.a,{href:"/integrations/use-payment-modal",children:"Payment Modal Guide"})," for details."]})}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Customer Actions:"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The customer completes the payment details on the MONEI page."}),"\n",(0,i.jsx)(n.li,{children:"They might undergo 3D Secure verification if required by their bank."}),"\n",(0,i.jsxs)(n.li,{children:["After completion, failure, or cancellation, they are redirected back to your site:","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["To the ",(0,i.jsx)(n.code,{children:"completeUrl"})," if they attempted payment."]}),"\n",(0,i.jsxs)(n.li,{children:["To the ",(0,i.jsx)(n.code,{children:"cancelUrl"})," if they explicitly cancelled."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.admonition,{type:"warning",children:(0,i.jsxs)(n.p,{children:["The redirect to ",(0,i.jsx)(n.code,{children:"completeUrl"})," ",(0,i.jsx)(n.strong,{children:"does not"})," guarantee payment success. You must rely on the webhook (Step 3) for the final status."]})}),"\n",(0,i.jsx)(n.h3,{id:"3-process-webhook-notification-server-side",children:"3. Process Webhook Notification (Server-side)"}),"\n",(0,i.jsxs)(n.p,{children:["MONEI sends the final, authoritative payment status via an asynchronous HTTP POST request to the ",(0,i.jsx)(n.code,{children:"callbackUrl"})," you provided in Step 1. The request body contains the full ",(0,i.jsx)(n.a,{href:"/apis/rest/schemas/payment",children:"Payment object"})," in JSON format."]}),"\n",(0,i.jsxs)(n.p,{children:["This webhook is the ",(0,i.jsx)(n.strong,{children:"only reliable way"})," to confirm the definitive payment outcome, regardless of customer browser actions or redirects."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Crucially, you must:"})}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Verify the ",(0,i.jsx)(n.code,{children:"MONEI-Signature"})," header"]})," included in the request. This confirms the webhook genuinely came from MONEI. See the ",(0,i.jsx)(n.a,{href:"/guides/verify-signature",children:"Verify Signatures guide"})," for implementation details."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.strong,{children:["Return a ",(0,i.jsx)(n.code,{children:"200 OK"})," HTTP status code"]})," immediately upon receiving the webhook to acknowledge receipt. Any other status code tells MONEI the notification failed."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["If MONEI doesn't receive a ",(0,i.jsx)(n.code,{children:"200 OK"}),", it will retry sending the webhook."]}),"\n",(0,i.jsxs)(n.p,{children:["Once the signature is verified, inspect the ",(0,i.jsx)(n.code,{children:"status"})," field in the Payment object (",(0,i.jsx)(n.code,{children:"SUCCEEDED"}),", ",(0,i.jsx)(n.code,{children:"FAILED"}),", ",(0,i.jsx)(n.code,{children:"CANCELED"}),", etc.) to determine whether to fulfill the order or handle the failure."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-json",metastring:'title="Example Webhook Payload (POST to your callbackUrl)"',children:'{\n "id": "af6029f80f5fc73a8ad2753eea0b1be0",\n "amount": 110,\n // ... other fields ...\n "status": "SUCCEEDED", // <-- Check this for final status\n "createdAt": 1594215339,\n "updatedAt": 1594215345\n}\n'})})]})}function y(e={}){let{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}function j(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},25090(e,n,t){t.r(n),t.d(n,{default:()=>r});let r={tabList:"tabList_Wasw",tabItem:"tabItem_xsPF"}},61365(e,n,t){t.d(n,{A:()=>r});let r=t.p+"assets/images/payment-page-preview-c5f8d8b6b875a4e33a0ab33edda434d1.png"},50343(e,n,t){var r=this&&this.__importDefault||function(e){return e&&e.__esMo
1dule?e:{default:e}};Object.defineProperty(n,"__esModule",{value:!0}),n.default=function(e){let n=(0,a.default)(),t=(0,c.useTabsContextValue)(e);return i.default.createElement(c.TabsProvider,{value:t,key:String(n)},i.default.createElement(p,{className:e.className},(0,c.sanitizeTabsChildren)(e.children)))};let i=r(t(71763)),s=t(51562),a=r(t(43673)),l=r(t(82778)),o=t(93254),c=t(62229),d=r(t(25090));function h(e){let{className:n}=e,{selectedValue:t,selectValue:r,tabValues:s,block:a}=(0,c.useTabs)(),h=[],{blockElementScrollPositionUntilNextRender:m}=(0,o.useScrollPositionBlocker)(),p=e=>{let n=e.currentTarget,i=s[h.indexOf(n)].value;i!==t&&(m(n),r(i))},u=e=>{var n,t;let r=null;switch(e.key){case"Enter":p(e);break;case"ArrowRight":{let t=h.indexOf(e.currentTarget)+1;r=null!=(n=h[t])?n:h[0];break}case"ArrowLeft":{let n=h.indexOf(e.currentTarget)-1;r=null!=(t=h[n])?t:h[h.length-1]}}null==r||r.focus()};return i.default.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,l.default)("tabs",{"tabs--block":a},n)},s.map(e=>{var n,r;let{value:s,label:a,attributes:o}=e;return i.default.createElement("li",(n=function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.forEach(function(n){var r;r=t[n],n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r})}return e}({role:"tab",tabIndex:t===s?0:-1,"aria-selected":t===s,key:s,ref:e=>{h.push(e)},onKeyDown:u,onClick:p},o),r=r={className:(0,l.default)("tabs__item",d.default.tabItem,null==o?void 0:o.className,{"tabs__item--active":t===s})},Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(r)):(function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n})(Object(r)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(r,e))}),n),null!=a?a:s)}))}function m(e){let{children:n}=e;return i.default.createElement("div",{className:"margin-top--md"},n)}function p(e){let{className:n,children:t}=e;return i.default.createElement("div",{className:(0,l.default)(s.ThemeClassNames.tabs.container,"tabs-container",d.default.tabList)},i.default.createElement(h,{className:n}),i.default.createElement(m,null,t))}},39844(e,n,t){t.d(n,{R:()=>a,x:()=>l});var r=t(71763);let i={},s=r.createContext(i);function a(e){let n=r.useContext(s);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),r.createElement(s.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.