https://www.sigmaaldrich.cn/_next/static/chunks/pages/[country]/[l…/cybersource-checkout-bd23bc6eca35b216.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9970],{11160:(e,r,a)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/[country]/[language]/demos/cybersource-checkout",function(){return a(25851)}])},25851:(e,r,a)=>{"use strict";a.r(r),a.d(r,{default:()=>g});var t=a(37876),l=a(14232),n=a(72068),o=a(10844),s=a(71937),i=a(86560),d=a(68477),c=a(81807),u=a(31939),h=a(70303),p=a(39324),x=a.n(p),m=a(39556),b=a(79504),j=a(18608);let{publicRuntimeConfig:{featureFlags:f}}=x()(),C=(0,j.makeStyles)()(e=>({root:{flexGrow:1,padding:e.spacing(3),maxWidth:600,margin:"0 auto"},inputWrapper:{"&.flex-microform":{color:e.palette.text.primary,height:"30px"}},tokenContainer:{marginTop:e.spacing(2),padding:e.spacing(2),backgroundColor:"#f9f9f9",wordBreak:"break-all",maxWidth:"100%",borderRadius:"4px",border:"1px solid #ddd"},tokenTitle:{fontWeight:"bold"},copyButton:{marginTop:e.spacing(1),backgroundColor:e.palette.secondary.main,color:e.palette.common.white}})),y=e=>{let{errorStatus:r}=e,{classes:a}=C(),[p,x]=(0,l.useState)(""),[j,f]=(0,l.useState)(""),[y,g]=(0,l.useState)(""),[v,k]=(0,l.useState)(null),[A,w]=(0,l.useState)(""),[N,S]=(0,l.useState)(""),W=(0,n.nW)("https://flex.cybersource.com/cybersource/assets/microform/0.11/flex-microform.min.js"),_={input:{"font-size":"14px","font-family":"helvetica, tahoma, calibri, sans-serif",color:"#555"},":focus":{color:"blue"},":disabled":{cursor:"not-allowed"},valid:{color:b.w.palette.rich.green},invalid:{color:b.w.palette.error.main}};return((0,l.useEffect)(()=>{"ready"===W&&p&&(async()=>{let e=new Flex(p).microform({styles:_}),r=e.createField("number",{placeholder:"Enter card number"}),a=e.createField("securityCode",{placeholder:"•••"});r.load("#number-container"),a.load("#securityCode-container"),k(e)})()},[W,p]),r)?(0,t.jsx)(m.default,{statusCode:r}):(0,t.jsxs)(o.A,{className:a.root,children:[(0,t.jsx)(s.A,{variant:"h4",gutterBottom:!0,children:"Cybersource Checkout"}),(0,t.jsx)("form",{action:"/token",id:"my-sample-form",method:"post",children:(0,t.jsxs)(i.A,{container:!0,spacing:2,children:[(0,t.jsx)(i.A,{xs:12,children:(0,t.jsx)(d.A,{variant:"standard",id:"captureContext",label:"Capture Context",value:p,onChange:e=>x(e.target.value),fullWidth:!0})}),(0,t.jsx)(i.A,{xs:12,children:(0,t.jsx)(d.A,{variant:"standard",id:"cardholderName",label:"Name",name:"cardholderName",placeholder:"Name on the card",fullWidth:!0})}),(0,t.jsxs)(i.A,{xs:12,children:[(0,t.jsx)("label",{htmlFor:"cardNumber-label",children:"Card Number"}),(0,t.jsx)("div",{id:"number-container",className:a.inputWrapper})]}),(0,t.jsxs)(i.A,{xs:12,children:[(0,t.jsx)("label",{htmlFor:"securityCode-container",children:"Security Code"}),(0,t.jsx)("div",{id:"securityCode-container",className:a.inputWrapper})]}),(0,t.jsxs)(i.A,{xs:6,children:[(0,t.jsx)("label",{htmlFor:"expMonth",children:"Expiry month"}),(0,t.jsxs)(c.A,{variant:"standard",id:"expMonth",value:j,onChange:e=>f(e.target.value),fullWidth:!0,children:[(0,t.jsx)(u.A,{value:"",children:"Month"}),[...Array(12)].map((e,r)=>(0,t.jsx)(u.A,{value:String(r+1).padStart(2,"0"),children:String(r+1).padStart(2,"0")},r))]})]}),(0,t.jsxs)(i.A,{xs:6,children:[(0,t.jsx)("label",{htmlFor:"expYear",children:"Expiry year"}),(0,t.jsxs)(c.A,{variant:"standard",id:"expYear",value:y,onChange:e=>g(e.target.value),fullWidth:!0,children:[(0,t.jsx)(u.A,{value:"",children:"Year"}),[2026,2027,2028,2029].map(e=>(0,t.jsx)(u.A,{value:e,children:e},e))]})]}),(0,t.jsx)(i.A,{xs:12,children:(0,t.jsx)(h.A,{type:"button",id:"pay-button",variant:"contained",color:"primary",onClick:()=>{null==v||v.createToken({expirationMonth:j,expirationYear:y},function(e,r){e?console.error(e):w(r)})},fullWidth:!0,children:"Pay"})})]})}),A&&(0,t.jsxs)(o.A,{className:a.tokenContainer,children:[(0,t.jsx)(s.A,{className:a.tokenTitle,children:"Generated Token:"}),(0,t.jsx)(s.A,{children:A}),(0,t.jsx)(h.A,{className:a.copyButton,onClick:()=>{A&&navigator.clipboard.writeText(A).then(()=>{S("Token copied to clipboard!")}).catch(e=>{console.error("Failed to copy token: ",e)})},variant:"contained",fullWidth:!0,children:"Copy to Clipboard"}),N&&(0,t.jsx)(s.A,{color:"primary",variant:"subtitle2",children:N})]})]})};y.getInitialProps=e=>{let{res:r}=e;return r&&!f.devCheckoutForm?(r.statusCode=404,{errorStatus:404}):{}};let g=y},39556:(e,r,a)=>{"use strict";a.r(r),a.d(r,{default:()=>u});var t=a(37876),l=a(18847),n=a.n(l);let o=n()(()=>Promise.all([a.e(8230),a.e(5907)]).then(a.bind(a,55907)),{loadableGenerated:{webpack:()=>[55907]},ssr:!1}),s=n()(()=>Promise.all([a.e(3279),a.e(8230),a.e(7388),a.e(4584),a.e(5612)]).then(a.bind(a,65612)),{loadableGenerated:{webpack:()=>[65612]},ssr:!1}),i=n()(()=>Promise.all([a.e(3279),a.e(8230),a.e(6771),a.e(4932),a.e(1529),a.e(2285),a.e(1807),a.e(1670),a.e(7619),a.e(9532),a.e(4584),a.e(1001),a.e(9674),a.e(3962),a.e(3350)]).then(a.bind(a,40969)),{loadableGenerated:{webpack:()=>[40969]},ssr:!1}),d=n()(()=>Promise.all([a.e(3279),a.e(8230),a.e(6771),a.e(4932),a.e(1529),a.e(2285),a.e(1807),a.e(1670),a.e(7619),a.e(9532),a.e(4584),a.e(1001),a.e(9674),a.e(3962),a.e(6998)]).then(a.bind(a,76998)),{loadableGenerated:{webpack:()=>[76998]},ssr:!1}),c=e=>{let{statusCode:r,title:a,basicError:l}=e;return l?(0,t.jsx)(o,{statusCode:404}):a&&a.includes("/sds/")?(0,t.jsx)(d,{}):404===r?(0,t.jsx)(i,{statusCode:r}):(0,t.jsx)(s,{statusCode:r})};c.getInitialProps=e=>{let{res:r,err:a,asPath:t}=e;return{statusCode:r?r.statusCode:a?a.statusCode:404,title:t}};let u=c}},e=>{var r=r=>e(e.s=r);e.O(0,[6771,1529,1807,8477,9672,636,6593,8792],()=>r(11160)),_N_E=e.O()}]);
2//# sourceMappingURL=./cybersource-checkout-bd23bc6eca35b216.js.map