1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3865],{5704:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>o,toc:()=>c});const o=JSON.parse('{"id":"payment-page-options/Payment-button","title":"Payment button","description":"Add a fixed-price payment button to a page on your website. The button sends the payment details to the hosted Nochex Payment Page.","source":"@site/docs/payment-page-options/Payment-button.md","sourceDirName":"payment-page-options","slug":"/payment-page-options/Payment-button","permalink":"/docs/payment-page-options/Payment-button","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"sidebar_label":"Payment Button","sidebar_class_name":"Payment-button"},"sidebar":"tutorialSidebar","previous":{"title":"MOTO Payments","permalink":"/docs/payment-page-options/MOTO-Guide"},"next":{"title":"Payment Form","permalink":"/docs/payment-page-options/Payment-form"}}');var a=n(4848),s=n(8453);const r={sidebar_label:"Payment Button",sidebar_class_name:"Payment-button"},i="Payment button",d={},c=[{value:"What you need",id:"what-you-need",level:2},{value:"Add a payment button",id:"add-a-payment-button",level:2},{value:"Use your own button image",id:"use-your-own-button-image",level:2},{value:"Troubleshooting",id:"troubleshooting",level:2},{value:"The button opens Send Money",id:"the-button-opens-send-money",level:3},{value:"The customer reaches the success page but the order is not updated",id:"the-customer-reaches-the-success-page-but-the-order-is-not-updated",level:3}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"payment-button",children:"Payment button"})}),"\n",(0,a.jsx)(t.p,{children:"Add a fixed-price payment button to a page on your website. The button sends the payment details to the hosted Nochex Payment Page."}),"\n",(0,a.jsx)(t.h2,{id:"what-you-need",children:"What you need"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"Your Nochex merchant ID."}),"\n",(0,a.jsx)(t.li,{children:"The amount and a short description of what the customer is buying."}),"\n",(0,a.jsx)(t.li,{children:"A website page that you or your developer can edit."}),"\n"]}),"\n",(0,a.jsx)(t.h2,{id:"add-a-payment-button",children:"Add a payment button"}),"\n",(0,a.jsxs)(t.ol,{children:["\n",(0,a.jsx)(t.li,{children:"Add this form to your page:"}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-html",children:'\x3c!-- NOCHEX Form / Payment Button --\x3e\r\n<form name="nochexform" method="POST" action="https://secure.nochex.com/">\r\n <input name="merchant_id" value="[Your Nochex merchant ID]" type="hidden">\r\n <input name="amount" value="[Amount]" type="hidden">\r\n <input name="description" value="[Description]" type="hidden">\r\n <input class="paybtn" type="image"\r\n src="https://ssl.nochex.com/images/buttons/nochex_pay.png"\r\n alt="Pay using Nochex">\r\n</form>\r\n\x3c!-- NOCHEX Form / Payment Button --\x3e\n'})}),"\n",(0,a.jsxs)(t.ol,{start:"2",children:["\n",(0,a.jsxs)(t.li,{children:["Replace ",(0,a.jsx)(t.code,{children:"[Your Nochex merchant ID]"}),", ",(0,a.jsx)(t.code,{children:"[Amount]"})," and ",(0,a.jsx)(t.code,{children:"[Description]"}),"."]}),"\n",(0,a.jsx)(t.li,{children:"Save and publish the page."}),"\n",(0,a.jsx)(t.li,{children:"Open the published HTTPS page and test the button."}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"To use the button on another page, copy the whole form and change the amount and description."}),"\n",(0,a.jsx)(t.h2,{id:"use-your-own-button-image",children:"Use your own button image"}),"\n",(0,a.jsxs)(t.p,{children:["Replace the ",(0,a.jsx)(t.code,{children:"src"})," value on the image input with the HTTPS URL of your button image. Keep useful ",(0,a.jsx)(t.code,{children:"alt"})," text so customers using assistive technology know that the image starts payment."]}),"\n",(0,a.jsxs)(t.p,{children:["For more payment and customer fields, see the ",(0,a.jsx)(t.a,{href:"./../Payment-page-int#payments-pages-url--parameters",children:"Payment Page parameters"}),"."]}),"\n",(0,a.jsx)(t.h2,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,a.jsx)(t.h3,{id:"the-button-opens-send-money",children:"The button opens Send Money"}),"\n",(0,a.jsx)(t.p,{children:"Check that:"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.code,{children:"merchant_id"})," matches your Nochex merchant ID;"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.code,{children:"amount"})," has a valid value; and"]}),"\n",(0,a.jsxs)(t.li,{children:["the form posts to ",(0,a.jsx)(t.code,{children:"https://secure.nochex.com/"}),"."]}),"\n"]}),"\n",(0,a.jsx)(t.h3,{id:"the-customer-reaches-the-success-page-but-the-
1order-is-not-updated",children:"The customer reaches the success page but the order is not updated"}),"\n",(0,a.jsxs)(t.p,{children:["A success page is not proof of payment. Only mark an order paid after your ",(0,a.jsx)(t.a,{href:"./../APC",children:"APC"})," or ",(0,a.jsx)(t.a,{href:"./../Callback",children:"Callback"})," listener receives ",(0,a.jsx)(t.code,{children:"AUTHORISED"})," and checks the merchant, amount and order details. Use whichever product is enabled for your account."]})]})}function u(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(h,{...e})}):h(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>r,x:()=>i});var o=n(6540);const a={},s=o.createContext(a);function r(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),o.createElement(s.Provider,{value:t},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.