authorizenet-react
Version:
React components for Authorize.Net payments
285 lines (243 loc) • 22.4 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react");var ne={exports:{}},L={};/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var we;function Oe(){if(we)return L;we=1;var o=Symbol.for("react.transitional.element"),u=Symbol.for("react.fragment");function p(m,c,i){var s=null;if(i!==void 0&&(s=""+i),c.key!==void 0&&(s=""+c.key),"key"in c){i={};for(var b in c)b!=="key"&&(i[b]=c[b])}else i=c;return c=i.ref,{$$typeof:o,type:m,key:s,ref:c!==void 0?c:null,props:i}}return L.Fragment=u,L.jsx=p,L.jsxs=p,L}var U={};/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var Ce;function Pe(){return Ce||(Ce=1,process.env.NODE_ENV!=="production"&&function(){function o(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===_e?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case _:return"Fragment";case G:return"Portal";case V:return"Profiler";case M:return"StrictMode";case X:return"Suspense";case Z:return"SuspenseList"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case z:return(e.displayName||"Context")+".Provider";case $:return(e._context.displayName||"Context")+".Consumer";case q:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Q:return t=e.displayName||null,t!==null?t:o(e.type)||"Memo";case K:t=e._payload,e=e._init;try{return o(e(t))}catch{}}return null}function u(e){return""+e}function p(e){try{u(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),u(e)}}function m(){}function c(){if(W===0){se=console.log,de=console.info,fe=console.warn,me=console.error,ve=console.group,pe=console.groupCollapsed,ge=console.groupEnd;var e={configurable:!0,enumerable:!0,value:m,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}W++}function i(){if(W--,W===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:N({},e,{value:se}),info:N({},e,{value:de}),warn:N({},e,{value:fe}),error:N({},e,{value:me}),group:N({},e,{value:ve}),groupCollapsed:N({},e,{value:pe}),groupEnd:N({},e,{value:ge})})}0>W&&console.error("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}function s(e){if(te===void 0)try{throw Error()}catch(r){var t=r.stack.trim().match(/\n( *(at )?)/);te=t&&t[1]||"",be=-1<r.stack.indexOf(`
at`)?" (<anonymous>)":-1<r.stack.indexOf("@")?"@unknown:0:0":""}return`
`+te+e+be}function b(e,t){if(!e||re)return"";var r=ae.get(e);if(r!==void 0)return r;re=!0,r=Error.prepareStackTrace,Error.prepareStackTrace=void 0;var n=null;n=C.H,C.H=null,c();try{var f={DetermineComponentFrameRoot:function(){try{if(t){var E=function(){throw Error()};if(Object.defineProperty(E.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(E,[])}catch(y){var J=y}Reflect.construct(e,[],E)}else{try{E.call()}catch(y){J=y}e.call(E.prototype)}}else{try{throw Error()}catch(y){J=y}(E=e())&&typeof E.catch=="function"&&E.catch(function(){})}}catch(y){if(y&&J&&typeof y.stack=="string")return[y.stack,J.stack]}return[null,null]}};f.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var l=Object.getOwnPropertyDescriptor(f.DetermineComponentFrameRoot,"name");l&&l.configurable&&Object.defineProperty(f.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var a=f.DetermineComponentFrameRoot(),h=a[0],R=a[1];if(h&&R){var v=h.split(`
`),k=R.split(`
`);for(a=l=0;l<v.length&&!v[l].includes("DetermineComponentFrameRoot");)l++;for(;a<k.length&&!k[a].includes("DetermineComponentFrameRoot");)a++;if(l===v.length||a===k.length)for(l=v.length-1,a=k.length-1;1<=l&&0<=a&&v[l]!==k[a];)a--;for(;1<=l&&0<=a;l--,a--)if(v[l]!==k[a]){if(l!==1||a!==1)do if(l--,a--,0>a||v[l]!==k[a]){var D=`
`+v[l].replace(" at new "," at ");return e.displayName&&D.includes("<anonymous>")&&(D=D.replace("<anonymous>",e.displayName)),typeof e=="function"&&ae.set(e,D),D}while(1<=l&&0<=a);break}}}finally{re=!1,C.H=n,i(),Error.prepareStackTrace=r}return v=(v=e?e.displayName||e.name:"")?s(v):"",typeof e=="function"&&ae.set(e,v),v}function d(e){if(e==null)return"";if(typeof e=="function"){var t=e.prototype;return b(e,!(!t||!t.isReactComponent))}if(typeof e=="string")return s(e);switch(e){case X:return s("Suspense");case Z:return s("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case q:return e=b(e.render,!1),e;case Q:return d(e.type);case K:t=e._payload,e=e._init;try{return d(e(t))}catch{}}return""}function w(){var e=C.A;return e===null?null:e.getOwner()}function g(e){if(ie.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function S(e,t){function r(){he||(he=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}function F(){var e=o(this.type);return ye[e]||(ye[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function I(e,t,r,n,f,l){return r=l.ref,e={$$typeof:A,type:e,key:t,props:l,_owner:f},(r!==void 0?r:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:F}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function O(e,t,r,n,f,l){if(typeof e=="string"||typeof e=="function"||e===_||e===V||e===M||e===X||e===Z||e===Ae||typeof e=="object"&&e!==null&&(e.$$typeof===K||e.$$typeof===Q||e.$$typeof===z||e.$$typeof===$||e.$$typeof===q||e.$$typeof===Re||e.getModuleId!==void 0)){var a=t.children;if(a!==void 0)if(n)if(ee(a)){for(n=0;n<a.length;n++)P(a[n],e);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else P(a,e)}else a="",(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(a+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."),e===null?n="null":ee(e)?n="array":e!==void 0&&e.$$typeof===A?(n="<"+(o(e.type)||"Unknown")+" />",a=" Did you accidentally export a JSX literal instead of a component?"):n=typeof e,console.error("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",n,a);if(ie.call(t,"key")){a=o(e);var h=Object.keys(t).filter(function(v){return v!=="key"});n=0<h.length?"{key: someKey, "+h.join(": ..., ")+": ...}":"{key: someKey}",Ee[a+n]||(h=0<h.length?"{"+h.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,n,a,h,a),Ee[a+n]=!0)}if(a=null,r!==void 0&&(p(r),a=""+r),g(t)&&(p(t.key),a=""+t.key),"key"in t){r={};for(var R in t)R!=="key"&&(r[R]=t[R])}else r=t;return a&&S(r,typeof e=="function"?e.displayName||e.name||"Unknown":e),I(e,a,l,f,w(),r)}function P(e,t){if(typeof e=="object"&&e&&e.$$typeof!==je){if(ee(e))for(var r=0;r<e.length;r++){var n=e[r];T(n)&&Y(n,t)}else if(T(e))e._store&&(e._store.validated=1);else if(e===null||typeof e!="object"?r=null:(r=ue&&e[ue]||e["@@iterator"],r=typeof r=="function"?r:null),typeof r=="function"&&r!==e.entries&&(r=r.call(e),r!==e))for(;!(e=r.next()).done;)T(e.value)&&Y(e.value,t)}}function T(e){return typeof e=="object"&&e!==null&&e.$$typeof===A}function Y(e,t){if(e._store&&!e._store.validated&&e.key==null&&(e._store.validated=1,t=B(t),!xe[t])){xe[t]=!0;var r="";e&&e._owner!=null&&e._owner!==w()&&(r=null,typeof e._owner.tag=="number"?r=o(e._owner.type):typeof e._owner.name=="string"&&(r=e._owner.name),r=" It was passed a child from "+r+".");var n=C.getCurrentStack;C.getCurrentStack=function(){var f=d(e.type);return n&&(f+=n()||""),f},console.error('Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',t,r),C.getCurrentStack=n}}function B(e){var t="",r=w();return r&&(r=o(r.type))&&(t=`
Check the render method of \``+r+"`."),t||(e=o(e))&&(t=`
Check the top-level render call using <`+e+">."),t}var H=x,A=Symbol.for("react.transitional.element"),G=Symbol.for("react.portal"),_=Symbol.for("react.fragment"),M=Symbol.for("react.strict_mode"),V=Symbol.for("react.profiler"),$=Symbol.for("react.consumer"),z=Symbol.for("react.context"),q=Symbol.for("react.forward_ref"),X=Symbol.for("react.suspense"),Z=Symbol.for("react.suspense_list"),Q=Symbol.for("react.memo"),K=Symbol.for("react.lazy"),Ae=Symbol.for("react.offscreen"),ue=Symbol.iterator,_e=Symbol.for("react.client.reference"),C=H.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ie=Object.prototype.hasOwnProperty,N=Object.assign,Re=Symbol.for("react.client.reference"),ee=Array.isArray,W=0,se,de,fe,me,ve,pe,ge;m.__reactDisabledLog=!0;var te,be,re=!1,ae=new(typeof WeakMap=="function"?WeakMap:Map),je=Symbol.for("react.client.reference"),he,ye={},Ee={},xe={};U.Fragment=_,U.jsx=function(e,t,r,n,f){return O(e,t,r,!1,n,f)},U.jsxs=function(e,t,r,n,f){return O(e,t,r,!0,n,f)}}()),U}process.env.NODE_ENV==="production"?ne.exports=Oe():ne.exports=Pe();var oe=ne.exports;let j=null,ce="",le="";const Ye=o=>{ce=o.apiLoginId,le=o.clientKey},Me=o=>{j=o},ke=async()=>new Promise((o,u)=>{if(!window.Accept){u(new Error("Authorize.Net Accept.js not loaded"));return}if(!j){u(new Error("Card data not available"));return}if(!ce||!le){u(new Error("API credentials not configured"));return}const p={authData:{clientKey:le,apiLoginID:ce},cardData:{cardNumber:j.cardNumber.replace(/\s/g,""),month:j.month,year:j.year,cardCode:j.cardCode}},m=c=>{var i,s;((i=c==null?void 0:c.messages)==null?void 0:i.resultCode)==="Error"?u((s=c==null?void 0:c.messages)==null?void 0:s.message[0].text):o(c.opaqueData)};Accept.dispatchData(p,m)}),Ne={endpoint:{sandbox:"https://jstest.authorize.net/v1/Accept.js",production:"https://js.authorize.net/v1/Accept.js"}},Se=x.createContext(null),Ve=({apiLoginId:o,clientKey:u,children:p,environment:m="sandbox",className:c=""})=>{const[i,s]=x.useState(!1);x.useEffect(()=>{Ye({apiLoginId:o,clientKey:u});const g=document.createElement("script");return g.src=m==="sandbox"?Ne.endpoint.sandbox:Ne.endpoint.production,g.async=!0,g.onload=()=>{if(window.Accept)try{s(!0)}catch(S){console.error("Error initializing Accept.js:",S)}},document.body.appendChild(g),()=>{document.body.removeChild(g),s(!1)}},[o,u,m]);const w={createToken:async()=>ke(),isScriptLoaded:i,setCardData:g=>{Me(g)},apiLoginId:o,clientKey:u,environment:m};return oe.jsx(Se.Provider,{value:w,children:oe.jsx("div",{className:c,children:p})})};function Te(){const o=x.useContext(Se);if(!o)throw new Error("useAuthorizeNet must be used within an AuthorizeNetProvider");return o}const $e=({options:o={},onChange:u,className:p="",onComplete:m})=>{const c=x.useRef(null),{setCardData:i}=Te(),[s,b]=x.useState(!1);return x.useEffect(()=>{var F,I,O,P,T,Y,B,H,A,G,_;const d=document.createElement("iframe");d.style.width="100%",d.style.height="60px",d.style.border="none",d.style.overflow="hidden",d.className=`authorize-net-card-iframe ${p}`;const w=`authorize-net-card-${Math.random().toString(36).substring(2)}`;d.name=w;const g=`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.card-container {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.card-container:hover {
border-color: #a0a0a0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.card-container:focus-within {
border-color: #4f46e5;
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}
input {
border: none;
background: transparent;
outline: none;
font-size: ${((I=(F=o.style)==null?void 0:F.base)==null?void 0:I.fontSize)||"16px"};
color: ${((P=(O=o.style)==null?void 0:O.base)==null?void 0:P.color)||"#424770"};
padding: 4px 0;
width: 100%;
}
input::placeholder {
color: ${((B=(Y=(T=o.style)==null?void 0:T.base)==null?void 0:Y["::placeholder"])==null?void 0:B.color)||"#aab7c4"};
}
.card-number {
flex: 1;
}
.expiry-wrapper {
display: flex;
align-items: center;
gap: 4px;
min-width: 100px;
}
.expiry-month,
.expiry-year {
width: 40px;
text-align: center;
}
.separator {
color: #a0a0a0;
margin: 0 4px;
}
.cvv {
width: 64px;
text-align: center;
}
</style>
</head>
<body>
<div class="card-container">
<input type="text" class="card-number" placeholder="Card Number" maxlength="19" autocomplete="cc-number">
<span class="separator">|</span>
<div class="expiry-wrapper">
<input type="text" class="expiry-month" placeholder="MM" maxlength="2" autocomplete="cc-exp-month">
<span class="separator">/</span>
<input type="text" class="expiry-year" placeholder="YY" maxlength="2" autocomplete="cc-exp-year">
</div>
<span class="separator">|</span>
<input type="password" class="cvv" placeholder="CVV" maxlength="4" autocomplete="cc-csc">
</div>
<script>
function formatCardNumber(input) {
return input.replace(/\\D/g, '').replace(/(\\d{4})/g, '$1 ').trim();
}
function formatExpiry(input) {
return input.replace(/\\D/g, '');
}
function formatCVV(input) {
return input.replace(/\\D/g, '').slice(0, 4);
}
function validateCardNumber(number) {
if (!/^\\d+$/.test(number) || number.length !== 16) {
return false;
}
let sum = 0;
let shouldDouble = false;
for (let i = number.length - 1; i >= 0; i--) {
let digit = parseInt(number.charAt(i));
if (shouldDouble) {
digit *= 2;
if (digit > 9) {
digit -= 9;
}
}
sum += digit;
shouldDouble = !shouldDouble;
}
return (sum % 10) === 0;
}
function validateExpiry(month, year) {
if (isNaN(month) || isNaN(year)) {
return false;
}
if (month < 1 || month > 12) {
return false;
}
const now = new Date();
const currentMonth = now.getMonth() + 1;
const currentYear = now.getFullYear();
const fullYear = 2000 + year;
if (fullYear < currentYear) {
return false;
}
if (fullYear === currentYear && month < currentMonth) {
return false;
}
return true;
}
function validateForm() {
const cardNumber = document.querySelector('.card-number');
const month = document.querySelector('.expiry-month');
const year = document.querySelector('.expiry-year');
const cvv = document.querySelector('.cvv');
const cardNumberValue = cardNumber.value.replace(/\\s/g, '');
const monthValue = parseInt(month.value);
const yearValue = parseInt(year.value);
const isCardNumberValid = validateCardNumber(cardNumberValue);
const isExpiryValid = validateExpiry(monthValue, yearValue);
const isCvvValid = cvv.value.length >= 3 && cvv.value.length <= 4;
const isComplete = isCardNumberValid && isExpiryValid && isCvvValid;
// Send data to parent
window.parent.postMessage({
type: 'cardUpdate',
data: {
cardNumber: cardNumberValue,
month: month.value,
year: year.value,
cardCode: cvv.value,
isComplete,
error: isComplete ? undefined : 'Please fill in all fields correctly'
}
}, ${o.targetOrigin});
// If complete, add the complete class to make fields readonly
if (isComplete) {
document.querySelector('.card-container').classList.add('complete');
}
}
// Add event listeners
const cardNumber = document.querySelector('.card-number');
const month = document.querySelector('.expiry-month');
const year = document.querySelector('.expiry-year');
const cvv = document.querySelector('.cvv');
cardNumber.addEventListener('input', (e) => {
e.target.value = formatCardNumber(e.target.value);
if (e.target.value.length === 19) {
month.focus();
}
validateForm();
});
month.addEventListener('input', (e) => {
e.target.value = formatExpiry(e.target.value);
if (e.target.value.length === 2) {
year.focus();
}
validateForm();
});
year.addEventListener('input', (e) => {
e.target.value = formatExpiry(e.target.value);
if (e.target.value.length === 2) {
cvv.focus();
}
validateForm();
});
cvv.addEventListener('input', (e) => {
e.target.value = formatCVV(e.target.value);
validateForm();
});
// Add keydown event listeners for backspace navigation
month.addEventListener('keydown', (e) => {
if ((e.key === 'Backspace' || e.key === 'Delete') && e.target.value === '') {
cardNumber.focus();
// Place cursor at the end of the input
const len = cardNumber.value.length;
cardNumber.setSelectionRange(len, len);
}
});
year.addEventListener('keydown', (e) => {
if ((e.key === 'Backspace' || e.key === 'Delete') && e.target.value === '') {
month.focus();
// Place cursor at the end of the input
const len = month.value.length;
month.setSelectionRange(len, len);
}
});
cvv.addEventListener('keydown', (e) => {
if ((e.key === 'Backspace' || e.key === 'Delete') && e.target.value === '') {
year.focus();
// Place cursor at the end of the input
const len = year.value.length;
year.setSelectionRange(len, len);
}
});
<\/script>
</body>
</html>
`,S=M=>{var V;if(((V=M.data)==null?void 0:V.type)==="cardUpdate"){const{isComplete:$,error:z,...q}=M.data.data;i(q),u&&u({complete:$,error:z?new Error(z):void 0}),$&&!s&&(b(!0),m==null||m())}};return window.addEventListener("message",S),(H=c.current)!=null&&H.parentNode&&c.current.parentNode.replaceChild(d,c.current),c.current=d,(A=d.contentWindow)==null||A.document.open(),(G=d.contentWindow)==null||G.document.write(g),(_=d.contentWindow)==null||_.document.close(),()=>{window.removeEventListener("message",S)}},[o,u,i,p,s,m]),oe.jsx("div",{ref:c,className:"authorize-net-card-element"})};exports.AuthorizeNetProvider=Ve;exports.Card=$e;exports.createToken=ke;exports.useAuthorizeNet=Te;