https://docs.monei.com/assets/js/d29dc318.aa35877f.js

1"use strict";(self.webpackChunkmonei_docs=self.webpackChunkmonei_docs||[]).push([["21964"],{48335(e,n,s){s.r(n),s.d(n,{metadata:()=>r,default:()=>h,frontMatter:()=>l,contentTitle:()=>d,toc:()=>c,assets:()=>a});var r=JSON.parse('{"id":"e-commerce/saleor","title":"Saleor","description":"Accept payments with MONEI in your Saleor store \u2014 Cards, Bizum, Apple Pay, Google Pay.","source":"@site/docs/e-commerce/saleor.mdx","sourceDirName":"e-commerce","slug":"/e-commerce/saleor","permalink":"/e-commerce/saleor","draft":false,"unlisted":false,"tags":[{"inline":false,"label":"E-commerce","permalink":"/tags/e-commerce"},{"inline":false,"label":"Saleor","permalink":"/tags/saleor"},{"inline":false,"label":"Payment methods","permalink":"/tags/payment-methods"}],"version":"current","lastUpdatedAt":1786438698000,"frontMatter":{"id":"saleor","title":"Saleor","description":"Accept payments with MONEI in your Saleor store \u2014 Cards, Bizum, Apple Pay, Google Pay.","tags":["e-commerce","saleor","payment-methods"]},"sidebar":"docs","previous":{"title":"PrestaShop","permalink":"/e-commerce/prestashop"},"next":{"title":"Salesforce Commerce Cloud","permalink":"/e-commerce/salesforce"}}'),t=s(91987),i=s(39844);let l={id:"saleor",title:"Saleor",description:"Accept payments with MONEI in your Saleor store \u2014 Cards, Bizum, Apple Pay, Google Pay.",tags:["e-commerce","saleor","payment-methods"]},d,a={},c=[{value:"Features",id:"features",level:2},{value:"Supported payment methods",id:"supported-payment-methods",level:2},{value:"Requirements",id:"requirements",level:2},{value:"Before you begin",id:"before-you-begin",level:2},{value:"Install",id:"install",level:2},{value:"Step 1: Clone and configure",id:"step-1-clone-and-configure",level:3},{value:"Step 2: Install and run",id:"step-2-install-and-run",level:3},{value:"Step 3: Install in Saleor",id:"step-3-install-in-saleor",level:3},{value:"Configure",id:"configure",level:2},{value:"How it works",id:"how-it-works",level:2},{value:"Payment flow",id:"payment-flow",level:3},{value:"Deployment",id:"deployment",level:2},{value:"Before you go live",id:"before-you-go-live",level:2},{value:"Links",id:"links",level:2}];function o(e){let n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",mermaid:"mermaid",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components},{Lightbox:s,Term:r}=n;return s||p("Lightbox",!0),r||p("Term",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["Accept payments through MONEI in your ",(0,t.jsx)(n.a,{href:"https://saleor.io/",children:"Saleor"})," store using the official ",(0,t.jsx)(n.a,{href:"https://github.com/MONEI/saleor-monei",children:"MONEI Payment App"}),". The app follows the Saleor payment app architecture and supports Cards (Visa, Mastercard, Amex), Bizum, Apple Pay, and Google Pay."]}),"\n",(0,t.jsx)(n.h2,{id:"features",children:"Features"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Supported payment methods"})," \u2014 Cards via MONEI.js secure iframe, Bizum via redirect, Apple Pay and Google Pay via MONEI.js components"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Full lifecycle support"})," \u2014 ",(0,t.jsx)(r,{id:"authorization",children:"Authorize"}),", ",(0,t.jsx)(r,{id:"capture",children:"capture"})," (manual or auto), refund, and cancel"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Multi-acquirer routing"})," \u2014 Intelligent routing for optimal authorization rates"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Native Bizum"})," \u2014 Direct Bizum acquiring, Spain's dominant mobile payment method"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsxs)(n.strong,{children:[(0,t.jsx)(r,{id:"pci-dss",children:"PCI DSS"})," compliant"]})," \u2014 Card data handled via MONEI.js secure iframes, keeping your store out of PCI scope"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Webhook-driven"})," \u2014 Payment status updates via signed MONEI webhooks"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"supported-payment-methods",children:"Supported payment methods"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{children:"Method"}),(0,t.jsx)(n.th,{children:"Integration"}),(0,t.jsx)(n.th,{children:"Capture"}),(0,t.jsx)(n.th,{children:"Refund"}),(0,t.jsx)(n.th,{children:"Cancel"})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsxs)(n.td,{children:[(0,t.jsx)(n.strong,{children:"Cards"})," (Visa, Mastercard, Amex)"]}),(0,t.jsx)(n.td,{children:"MONEI.js secure iframe"}),(0,t.jsx)(n.td,{children:"Manual / Auto"}),(0,t.jsx)(n.td,{children:"Yes"}),(0,t.jsx)(n.td,{children:"Yes"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.strong,{children:"Bizum"})}),(0,t.jsx)(n.td,{children:"Redirect"}),(0,t.jsx)(n.td,{children:"Auto"}),(0,t.jsx)(n.td,{children:"Yes"}),(0,t.jsx)(n.td,{children:"Yes"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.strong,{children:"Apple Pay"})}),(0,t.jsx)(n.td,{children:"MONEI.js component"}),(0,t.jsx)(n.td,{children:"Auto"}),(0,t.jsx)(n.td,{children:"Yes"}),(0,t.jsx)(n.td,{children:"Yes"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.strong,{children:"Google Pay"})}),(0,t.jsx)(n.td,{children:"MONEI.js component"}),(0,t.jsx)(n.td,{children:"Auto"}),(0,t.jsx)(n.td,{children:"Yes"}),(0,t.jsx)(n.td,{children:"Yes"})]})]})]}),"\n",(0,t.jsx)(n.h2,{id:"requirements",children:"Requirements"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{children:"Dependency"}),(0,t.jsx)(n.th,{children:"Version"})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Node.js"}),(0,t.jsx)(n.td,{children:"18.17+ (LTS recommended)"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Saleor"}),(0,t.jsx)(n.td,{children:"3.13+ (Cloud or self-hosted)"})]})]})]}),"\n",(0,t.jsx)(n.h2,{id:"before-you-begin",children:"Before you begin"}),"\n",(0,t.jsx)(n.p,{children:"To test your integration:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Use your ",(0,t.jsx)(n.a,{href:"/testing",children:"test mode"})," API Key. You can find it in ",(0,t.jsx)(n.a,{href:"https://dashboard.monei.com/settings/api",children:"MONEI Dashboard \u2192 Settings \u2192 API Access"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:["You can check the status of a test payment in your ",(0,t.jsx)(n.a,{href:"https://dashboard.monei.com/payments",children:"MONEI Dashboard \u2192 Payments"})," (in test mode)."]}),"\n",(0,t.jsxs)(n.li,{children:["See ",(0,t.jsx)(n.a,{href:"/testing",children:"MONEI test cards"})," for test card numbers."]}),"\n"]}),"\n",(0,t.jsx)(s,{src:"/img/dashboard/en/settings-api-access.png",alt:"API Access page in the MONEI Dashboard settings, showing your account ID and API key"}),"\n",(0,t.jsx)(n.h2,{id:"install",children:"Install"}),"\n",(0,t.jsx)(n.h3,{id:"step-1-clone-and-configure",children:"Step 1: Clone and configure"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"git clone https://github.com/MONEI/saleor-monei.git\ncd saleor-monei\ncp .env.example .env\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Edit ",(0,t.jsx)(n.code,{children:".env"})," with your MONEI credentials:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"MONEI_API_KEY=your_api_key\nMONEI_ACCOUNT_ID=your_account_id\nNEXT_PUBLIC_APP_URL=http://localhost:3000\n"})}),"\n",(0,t.jsx)(n.h3,{id:"step-2-install-and-run",children:"Step 2: Install and run"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm install\nnpm run dev\n"})}),"\n",(0,t.jsx)(n.h3,{id:"step-3-install-in-saleor",children:"Step 3: Install in Saleor"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Open ",(0,t.jsx)(n.strong,{children:"Saleor Dashboard \u2192 Apps \u2192 Install E

1xternal App"})]}),"\n",(0,t.jsxs)(n.li,{children:["Enter your manifest URL: ",(0,t.jsx)(n.code,{children:"http://localhost:3000/api/manifest"})]}),"\n",(0,t.jsx)(n.li,{children:"The app registers its webhooks automatically"}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"configure",children:"Configure"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{children:"Variable"}),(0,t.jsx)(n.th,{children:"Description"}),(0,t.jsx)(n.th,{children:"Required"}),(0,t.jsx)(n.th,{children:"Default"})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"MONEI_API_KEY"})}),(0,t.jsxs)(n.td,{children:["API key from ",(0,t.jsx)(n.a,{href:"https://dashboard.monei.com/settings/api",children:"MONEI Dashboard"})]}),(0,t.jsx)(n.td,{children:"Yes"}),(0,t.jsx)(n.td,{children:"\u2014"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"MONEI_ACCOUNT_ID"})}),(0,t.jsx)(n.td,{children:"Merchant account ID"}),(0,t.jsx)(n.td,{children:"Yes"}),(0,t.jsx)(n.td,{children:"\u2014"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"MONEI_WEBHOOK_SECRET"})}),(0,t.jsx)(n.td,{children:"HMAC key for webhook signature verification"}),(0,t.jsx)(n.td,{children:"No"}),(0,t.jsx)(n.td,{children:"\u2014"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"MONEI_ENVIRONMENT"})}),(0,t.jsxs)(n.td,{children:[(0,t.jsx)(n.code,{children:"test"})," or ",(0,t.jsx)(n.code,{children:"live"})]}),(0,t.jsx)(n.td,{children:"No"}),(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"test"})})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"APL"})}),(0,t.jsxs)(n.td,{children:["Auth persistence layer: ",(0,t.jsx)(n.code,{children:"file"})," (dev) or ",(0,t.jsx)(n.code,{children:"upstash"})," (prod)"]}),(0,t.jsx)(n.td,{children:"No"}),(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"file"})})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"NEXT_PUBLIC_APP_URL"})}),(0,t.jsx)(n.td,{children:"Public URL where this app is hosted"}),(0,t.jsx)(n.td,{children:"Yes"}),(0,t.jsx)(n.td,{children:"\u2014"})]})]})]}),"\n",(0,t.jsx)(n.h2,{id:"how-it-works",children:"How it works"}),"\n",(0,t.jsx)(n.p,{children:"The app handles three Saleor synchronous webhooks:"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{children:"Webhook"}),(0,t.jsx)(n.th,{children:"Purpose"})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"PAYMENT_GATEWAY_INITIALIZE_SESSION"})}),(0,t.jsx)(n.td,{children:"Returns available payment methods and MONEI.js configuration"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"TRANSACTION_INITIALIZE_SESSION"})}),(0,t.jsx)(n.td,{children:"Creates a MONEI payment and returns the result or redirect URL"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:(0,t.jsx)(n.code,{children:"TRANSACTION_PROCESS_SESSION"})}),(0,t.jsx)(n.td,{children:"Checks payment status after customer action (3D Secure, Bizum)"})]})]})]}),"\n",(0,t.jsx)(n.h3,{id:"payment-flow",children:"Payment flow"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Customer initiates checkout \u2192 Saleor calls ",(0,t.jsx)(n.code,{children:"PAYMENT_GATEWAY_INITIALIZE_SESSION"})]}),"\n",(0,t.jsx)(n.li,{children:"App returns available MONEI payment methods and MONEI.js config"}),"\n",(0,t.jsxs)(n.li,{children:["Customer selects a payment method \u2192 Saleor calls ",(0,t.jsx)(n.code,{children:"TRANSACTION_INITIALIZE_SESSION"})]}),"\n",(0,t.jsx)(n.li,{children:"App creates a MONEI payment and returns the redirect URL or MONEI.js data"}),"\n",(0,t.jsx)(n.li,{children:"Customer completes payment (3D Secure, Bizum redirect, etc.)"}),"\n",(0,t.jsxs)(n.li,{children:["Saleor calls ",(0,t.jsx)(n.code,{children:"TRANSACTION_PROCESS_SESSION"})," \u2192 App checks final payment status"]}),"\n"]}),"\n",(0,t.jsx)(n.mermaid,{value:"sequenceDiagram\n  participant C as Customer\n  participant S as Saleor\n  participant A as MONEI App\n  participant MON as MONEI\n  C->>S: 1. Initiate checkout\n  S->>A: 2. PAYMENT_GATEWAY_INITIALIZE_SESSION\n  A--\x3e>S: 3. Available methods + MONEI.js config\n  C->>S: 4. Select payment method\n  S->>A: 5. TRANSACTION_INITIALIZE_SESSION\n  A->>MON: 6. Create payment\n  A--\x3e>S: 7. Redirect URL or MONEI.js data\n  C->>MON: 8. Complete payment, 3DS or Bizum\n  S->>A: 9. TRANSACTION_PROCESS_SESSION\n  A->>MON: 10. Check final status"}),"\n",(0,t.jsx)(n.h2,{id:"deployment",children:"Deployment"}),"\n",(0,t.jsxs)(n.p,{children:["Deploy to ",(0,t.jsx)(n.a,{href:"https://vercel.com",children:"Vercel"}),", ",(0,t.jsx)(n.a,{href:"https://railway.app",children:"Railway"}),", or any platform that supports Next.js:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm run build\nnpm start\n"})}),"\n",(0,t.jsxs)(n.p,{children:["For production multi-tenant deployments, set ",(0,t.jsx)(n.code,{children:"APL=upstash"})," and configure ",(0,t.jsx)(n.a,{href:"https://upstash.com",children:"Upstash Redis"})," for auth token storage."]}),"\n",(0,t.jsx)(n.h2,{id:"before-you-go-live",children:"Before you go live"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Make sure that you are using ",(0,t.jsx)(n.a,{href:"/testing",children:"live (production) mode"})," API Key."]}),"\n",(0,t.jsxs)(n.li,{children:["Make sure that you have at least one active ",(0,t.jsx)(n.a,{href:"https://dashboard.monei.com/settings/payment-methods",children:"payment method"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:["Set ",(0,t.jsx)(n.code,{children:"MONEI_ENVIRONMENT=live"})," in your environment variables."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"links",children:"Links"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://github.com/MONEI/saleor-monei",children:"MONEI Saleor Payment App on GitHub"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://docs.saleor.io/developer/payments/payment-apps",children:"Saleor Payment Apps documentation"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://docs.saleor.io/developer/extending/apps/building-payment-app",children:"Building a Saleor Payment App"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"/monei-js/overview",children:"MONEI JS SDK documentation"})}),"\n"]})]})}function h(e={}){let{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(o,{...e})}):o(e)}function p(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},39844(e,n,s){s.d(n,{R:()=>l,x:()=>d});var r=s(71763);let t={},i=r.createContext(t);function l(e){let n=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:l(e.components),r.createElement(i.Provider,{value:n},e.children)}}}]);