New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-payment-inputs
Advanced tools
react-payment-inputs - npm Package Compare versions
Comparing version 1.0.8 to 1.1.0
| import './utils/cardTypes-4f45f8d3.js'; | ||
| import './utils/validator-e940799c.js'; | ||
| import './utils/validator-0f41e23d.js'; | ||
| import './chunk-7eee66c0.js'; | ||
@@ -4,0 +4,0 @@ import './utils/formatter-b0b2372d.js'; |
| import './utils/cardTypes-4f45f8d3.js'; | ||
| import './utils/validator-e940799c.js'; | ||
| import './utils/validator-0f41e23d.js'; | ||
| import './chunk-7eee66c0.js'; | ||
@@ -4,0 +4,0 @@ import './utils/formatter-b0b2372d.js'; |
| import './utils/cardTypes-4f45f8d3.js'; | ||
| import './utils/validator-e940799c.js'; | ||
| import './utils/validator-0f41e23d.js'; | ||
| import { b as _slicedToArray, c as _objectSpread, d as _defineProperty, e as _objectWithoutProperties } from './chunk-7eee66c0.js'; | ||
@@ -14,3 +14,6 @@ import './utils/formatter-b0b2372d.js'; | ||
| onError = _ref.onError, | ||
| onTouch = _ref.onTouch; | ||
| onTouch = _ref.onTouch, | ||
| cardNumberValidator = _ref.cardNumberValidator, | ||
| cvcValidator = _ref.cvcValidator, | ||
| expiryValidator = _ref.expiryValidator; | ||
@@ -137,3 +140,3 @@ var cardNumberField = React.useRef(); | ||
| }); | ||
| var cardNumberError = utils.validator.getCardNumberError(cardNumber, { | ||
| var cardNumberError = utils.validator.getCardNumberError(cardNumber, cardNumberValidator, { | ||
| errorMessages: errorMessages | ||
@@ -148,3 +151,3 @@ }); | ||
| }; | ||
| }, [errorMessages, onChange, setInputError, setInputTouched]); | ||
| }, [cardNumberValidator, errorMessages, onChange, setInputError, setInputTouched]); | ||
| var handleFocusCardNumber = React.useCallback(function () { | ||
@@ -215,3 +218,3 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| onChange && onChange(e); | ||
| var expiryDateError = utils.validator.getExpiryDateError(expiryDateField.current.value, { | ||
| var expiryDateError = utils.validator.getExpiryDateError(expiryDateField.current.value, expiryValidator, { | ||
| errorMessages: errorMessages | ||
@@ -226,3 +229,3 @@ }); | ||
| }; | ||
| }, [errorMessages, onChange, setInputError, setInputTouched]); | ||
| }, [errorMessages, expiryValidator, onChange, setInputError, setInputTouched]); | ||
| var handleFocusExpiryDate = React.useCallback(function () { | ||
@@ -308,3 +311,3 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| onChange && onChange(e); | ||
| var cvcError = utils.validator.getCVCError(cvc, { | ||
| var cvcError = utils.validator.getCVCError(cvc, cvcValidator, { | ||
| cardType: cardType, | ||
@@ -320,3 +323,3 @@ errorMessages: errorMessages | ||
| }; | ||
| }, [errorMessages, onChange, setInputError, setInputTouched]); | ||
| }, [cvcValidator, errorMessages, onChange, setInputError, setInputTouched]); | ||
| var handleFocusCVC = React.useCallback(function () { | ||
@@ -323,0 +326,0 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; |
| import { b as cardTypes } from './cardTypes-4f45f8d3.js'; | ||
| import { a as validator } from './validator-e940799c.js'; | ||
| import { a as validator } from './validator-0f41e23d.js'; | ||
| import '../chunk-7eee66c0.js'; | ||
@@ -4,0 +4,0 @@ import { a as formatter } from './formatter-b0b2372d.js'; |
| import './cardTypes-4f45f8d3.js'; | ||
| export { k as DATE_OUT_OF_RANGE, b as EMPTY_CARD_NUMBER, d as EMPTY_CVC, c as EMPTY_EXPIRY_DATE, e as EMPTY_ZIP, f as INVALID_CARD_NUMBER, h as INVALID_CVC, g as INVALID_EXPIRY_DATE, i as MONTH_OUT_OF_RANGE, j as YEAR_OUT_OF_RANGE, q as getCVCError, o as getCardNumberError, p as getExpiryDateError, r as getZIPError, l as hasCardNumberReachedMaxLength, m as isNumeric, n as validateLuhn } from './validator-e940799c.js'; | ||
| export { k as DATE_OUT_OF_RANGE, b as EMPTY_CARD_NUMBER, d as EMPTY_CVC, c as EMPTY_EXPIRY_DATE, e as EMPTY_ZIP, f as INVALID_CARD_NUMBER, h as INVALID_CVC, g as INVALID_EXPIRY_DATE, i as MONTH_OUT_OF_RANGE, j as YEAR_OUT_OF_RANGE, q as getCVCError, o as getCardNumberError, p as getExpiryDateError, r as getZIPError, l as hasCardNumberReachedMaxLength, m as isNumeric, n as validateLuhn } from './validator-0f41e23d.js'; |
@@ -6,3 +6,3 @@ 'use strict'; | ||
| require('./utils/cardTypes-dfd289eb.js'); | ||
| require('./utils/validator-1aa20825.js'); | ||
| require('./utils/validator-664a905e.js'); | ||
| require('./chunk-a9f30d9c.js'); | ||
@@ -9,0 +9,0 @@ require('./utils/formatter-b9b5447d.js'); |
@@ -6,3 +6,3 @@ 'use strict'; | ||
| require('./utils/cardTypes-dfd289eb.js'); | ||
| require('./utils/validator-1aa20825.js'); | ||
| require('./utils/validator-664a905e.js'); | ||
| require('./chunk-a9f30d9c.js'); | ||
@@ -9,0 +9,0 @@ require('./utils/formatter-b9b5447d.js'); |
@@ -8,3 +8,3 @@ 'use strict'; | ||
| require('./utils/cardTypes-dfd289eb.js'); | ||
| require('./utils/validator-1aa20825.js'); | ||
| require('./utils/validator-664a905e.js'); | ||
| var __chunk_1 = require('./chunk-a9f30d9c.js'); | ||
@@ -21,3 +21,6 @@ require('./utils/formatter-b9b5447d.js'); | ||
| onError = _ref.onError, | ||
| onTouch = _ref.onTouch; | ||
| onTouch = _ref.onTouch, | ||
| cardNumberValidator = _ref.cardNumberValidator, | ||
| cvcValidator = _ref.cvcValidator, | ||
| expiryValidator = _ref.expiryValidator; | ||
@@ -144,3 +147,3 @@ var cardNumberField = React.useRef(); | ||
| }); | ||
| var cardNumberError = index.default.validator.getCardNumberError(cardNumber, { | ||
| var cardNumberError = index.default.validator.getCardNumberError(cardNumber, cardNumberValidator, { | ||
| errorMessages: errorMessages | ||
@@ -155,3 +158,3 @@ }); | ||
| }; | ||
| }, [errorMessages, onChange, setInputError, setInputTouched]); | ||
| }, [cardNumberValidator, errorMessages, onChange, setInputError, setInputTouched]); | ||
| var handleFocusCardNumber = React.useCallback(function () { | ||
@@ -222,3 +225,3 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| onChange && onChange(e); | ||
| var expiryDateError = index.default.validator.getExpiryDateError(expiryDateField.current.value, { | ||
| var expiryDateError = index.default.validator.getExpiryDateError(expiryDateField.current.value, expiryValidator, { | ||
| errorMessages: errorMessages | ||
@@ -233,3 +236,3 @@ }); | ||
| }; | ||
| }, [errorMessages, onChange, setInputError, setInputTouched]); | ||
| }, [errorMessages, expiryValidator, onChange, setInputError, setInputTouched]); | ||
| var handleFocusExpiryDate = React.useCallback(function () { | ||
@@ -315,3 +318,3 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
| onChange && onChange(e); | ||
| var cvcError = index.default.validator.getCVCError(cvc, { | ||
| var cvcError = index.default.validator.getCVCError(cvc, cvcValidator, { | ||
| cardType: cardType, | ||
@@ -327,3 +330,3 @@ errorMessages: errorMessages | ||
| }; | ||
| }, [errorMessages, onChange, setInputError, setInputTouched]); | ||
| }, [cvcValidator, errorMessages, onChange, setInputError, setInputTouched]); | ||
| var handleFocusCVC = React.useCallback(function () { | ||
@@ -330,0 +333,0 @@ var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; |
@@ -6,3 +6,3 @@ 'use strict'; | ||
| var cardTypes = require('./cardTypes-dfd289eb.js'); | ||
| var validator = require('./validator-1aa20825.js'); | ||
| var validator = require('./validator-664a905e.js'); | ||
| require('../chunk-a9f30d9c.js'); | ||
@@ -9,0 +9,0 @@ var formatter = require('./formatter-b9b5447d.js'); |
@@ -6,3 +6,3 @@ 'use strict'; | ||
| require('./cardTypes-dfd289eb.js'); | ||
| var validator = require('./validator-1aa20825.js'); | ||
| var validator = require('./validator-664a905e.js'); | ||
@@ -9,0 +9,0 @@ |
| { | ||
| "name": "react-payment-inputs", | ||
| "version": "1.0.8", | ||
| "version": "1.1.0", | ||
| "description": "A zero-dependency React Hook & Container to help with payment card input fields.", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
133
README.md
@@ -10,42 +10,59 @@ # React Payment Inputs | ||
| - [Demos](#demos) | ||
| - [Installation](#installation) | ||
| - [Usage](#usage) | ||
| - [With hooks](#with-hooks) | ||
| - [With render props](#with-render-props) | ||
| - [Using the built-in styled wrapper](#using-the-built-in-styled-wrapper) | ||
| - [More examples](#more-examples) | ||
| - [`data = usePaymentInputs(options)`](#data--usepaymentinputsoptions) | ||
| - [options](#options) | ||
| - [options.errorMessages](#optionserrormessages) | ||
| - [options.onBlur](#optionsonblur) | ||
| - [options.onChange](#optionsonchange) | ||
| - [options.onError](#optionsonerror) | ||
| - [options.onTouch](#optionsontouch) | ||
| - [`data`](#data) | ||
| - [getCardNumberProps](#getcardnumberprops) | ||
| - [getExpiryDateProps](#getexpirydateprops) | ||
| - [getCVCProps](#getcvcprops) | ||
| - [getZIPProps](#getzipprops) | ||
| - [getCardImageProps](#getcardimageprops) | ||
| - [meta.cardType](#metacardtype) | ||
| - [meta.error](#metaerror) | ||
| - [meta.isTouched](#metaistouched) | ||
| - [meta.erroredInputs](#metaerroredinputs) | ||
| - [meta.touchedInputs](#metatouchedinputs) | ||
| - [meta.focused](#metafocused) | ||
| - [wrapperProps](#wrapperprops) | ||
| - [`<PaymentInputsWrapper>` props](#paymentinputswrapper-props) | ||
| - [styles](#styles) | ||
| - [errorTextProps](#errortextprops) | ||
| - [inputWrapperProps](#inputwrapperprops) | ||
| - [Using a third-party UI library](#using-a-third-party-ui-library) | ||
| - [Fannypack](#fannypack) | ||
| - [Bootstrap](#bootstrap) | ||
| - [Form library examples](#form-library-examples) | ||
| - [Formik](#formik) | ||
| - [React Final Form](#react-final-form) | ||
| - [Customising the in-built style wrapper](#customising-the-in-built-style-wrapper) | ||
| - [Custom card images](#custom-card-images) | ||
| - [License](#license) | ||
| - [React Payment Inputs](#react-payment-inputs) | ||
| - [Demos](#demos) | ||
| - [Requirements](#requirements) | ||
| - [Installation](#installation) | ||
| - [Usage](#usage) | ||
| - [With hooks](#with-hooks) | ||
| - [With render props](#with-render-props) | ||
| - [Using the built-in styled wrapper](#using-the-built-in-styled-wrapper) | ||
| - [More examples](#more-examples) | ||
| - [`data = usePaymentInputs(options)`](#data--usepaymentinputsoptions) | ||
| - [options](#options) | ||
| - [options.cardNumberValidator](#optionscardnumbervalidator) | ||
| - [Example](#example) | ||
| - [options.cvcValidator](#optionscvcvalidator) | ||
| - [options.errorMessages](#optionserrormessages) | ||
| - [Example](#example-1) | ||
| - [options.expiryDateValidator](#optionsexpirydatevalidator) | ||
| - [options.onBlur](#optionsonblur) | ||
| - [options.onChange](#optionsonchange) | ||
| - [options.onError](#optionsonerror) | ||
| - [options.onTouch](#optionsontouch) | ||
| - [`data`](#data) | ||
| - [getCardNumberProps](#getcardnumberprops) | ||
| - [Example snippet](#example-snippet) | ||
| - [getExpiryDateProps](#getexpirydateprops) | ||
| - [Example snippet](#example-snippet-1) | ||
| - [getCVCProps](#getcvcprops) | ||
| - [Example snippet](#example-snippet-2) | ||
| - [getZIPProps](#getzipprops) | ||
| - [Example snippet](#example-snippet-3) | ||
| - [getCardImageProps](#getcardimageprops) | ||
| - [Example snippet](#example-snippet-4) | ||
| - [meta.cardType](#metacardtype) | ||
| - [Example snippet](#example-snippet-5) | ||
| - [meta.error](#metaerror) | ||
| - [Example snippet](#example-snippet-6) | ||
| - [meta.isTouched](#metaistouched) | ||
| - [meta.erroredInputs](#metaerroredinputs) | ||
| - [Example snippet](#example-snippet-7) | ||
| - [meta.touchedInputs](#metatouchedinputs) | ||
| - [Example snippet](#example-snippet-8) | ||
| - [meta.focused](#metafocused) | ||
| - [wrapperProps](#wrapperprops) | ||
| - [`<PaymentInputsWrapper>` props](#paymentinputswrapper-props) | ||
| - [styles](#styles) | ||
| - [Schema](#schema) | ||
| - [errorTextProps](#errortextprops) | ||
| - [inputWrapperProps](#inputwrapperprops) | ||
| - [Using a third-party UI library](#using-a-third-party-ui-library) | ||
| - [Fannypack](#fannypack) | ||
| - [Bootstrap](#bootstrap) | ||
| - [Form library examples](#form-library-examples) | ||
| - [Formik](#formik) | ||
| - [React Final Form](#react-final-form) | ||
| - [Customising the in-built style wrapper](#customising-the-in-built-style-wrapper) | ||
| - [Custom card images](#custom-card-images) | ||
| - [License](#license) | ||
@@ -176,4 +193,32 @@ ## [Demos](https://medipass.github.io/react-payment-inputs) | ||
| > `Object({ errorMessages, onBlur, onChange, onError, onTouch })` | ||
| > `Object({ cardNumberValidator, cvcValidator, errorMessages, expiryValidator, onBlur, onChange, onError, onTouch })` | ||
| #### options.cardNumberValidator | ||
| > `function({cardNumber, cardType, errorMessages})` | ||
| Set custom card number validator function | ||
| ##### Example | ||
| ```js | ||
| const cardNumberValidator = ({ cardNumber, cardType, errorMessages }) => { | ||
| if (cardType.displayName === 'Visa' || cardType.displayName === 'Mastercard') { | ||
| return; | ||
| } | ||
| return 'Card must be Visa or Mastercard'; | ||
| } | ||
| export default function MyComponent() { | ||
| const { ... } = usePaymentInputs({ | ||
| cardNumberValidator | ||
| }); | ||
| } | ||
| ``` | ||
| #### options.cvcValidator | ||
| > `function({cvc, cardType, errorMessages})` | ||
| Set custom cvc validator function | ||
| #### options.errorMessages | ||
@@ -207,2 +252,8 @@ | ||
| #### options.expiryDateValidator | ||
| > `function({expiryDate, errorMessages})` | ||
| Set custom expiry date validator function | ||
| #### options.onBlur | ||
@@ -209,0 +260,0 @@ |
@@ -1,1 +0,1 @@ | ||
| !function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("styled-components")):"function"==typeof define&&define.amd?define(["exports","react","styled-components"],r):r((e=e||self).ReactPaymentInputs={},e.React,e.StyledComponents)}(this,function(e,r,n){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r;var t="default"in n?n.default:n;function a(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function o(){return(o=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}function u(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.forEach(function(r){a(e,r,n[r])})}return e}function i(e,r){if(null==e)return{};var n,t,a=function(e,r){if(null==e)return{};var n,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)n=o[t],r.indexOf(n)>=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)n=o[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function c(e,r){return r||(r=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))}function l(e,r){return d(e)||function(e,r){var n=[],t=!0,a=!1,o=void 0;try{for(var u,i=e[Symbol.iterator]();!(t=(u=i.next()).done)&&(n.push(u.value),!r||n.length!==r);t=!0);}catch(e){a=!0,o=e}finally{try{t||null==i.return||i.return()}finally{if(a)throw o}}return n}(e,r)||f()}function s(e){return d(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||f()}function d(e){if(Array.isArray(e))return e}function f(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}var p=/(\d{1,4})/g,v=[{displayName:"Visa",type:"visa",format:p,startPattern:/^4/,gaps:[4,8,12],lengths:[16,18,19],code:{name:"CVV",length:3}},{displayName:"Mastercard",type:"mastercard",format:p,startPattern:/^(5[1-5]|677189)|^(222[1-9]|2[3-6]\d{2}|27[0-1]\d|2720)/,gaps:[4,8,12],lengths:[16],code:{name:"CVC",length:3}},{displayName:"American Express",type:"amex",format:/(\d{1,4})(\d{1,6})?(\d{1,5})?/,startPattern:/^3[47]/,gaps:[4,10],lengths:[15],code:{name:"CID",length:4}},{displayName:"Diners Club",type:"dinersclub",format:p,startPattern:/^(36|38|30[0-5])/,gaps:[4,10],lengths:[14,16,19],code:{name:"CVV",length:3}},{displayName:"Discover",type:"discover",format:p,startPattern:/^(6011|65|64[4-9]|622)/,gaps:[4,8,12],lengths:[16,19],code:{name:"CID",length:3}},{displayName:"JCB",type:"jcb",format:p,startPattern:/^35/,gaps:[4,8,12],lengths:[16,17,18,19],code:{name:"CVV",length:3}},{displayName:"UnionPay",type:"unionpay",format:p,startPattern:/^62/,gaps:[4,8,12],lengths:[14,15,16,17,18,19],code:{name:"CVN",length:3}},{displayName:"Maestro",type:"maestro",format:p,startPattern:/^(5018|5020|5038|6304|6703|6708|6759|676[1-3])/,gaps:[4,8,12],lengths:[12,13,14,15,16,17,18,19],code:{name:"CVC",length:3}},{displayName:"Elo",type:"elo",format:p,startPattern:/^(4011(78|79)|43(1274|8935)|45(1416|7393|763(1|2))|50(4175|6699|67[0-7][0-9]|9000)|627780|63(6297|6368)|650(03([^4])|04([0-9])|05(0|1)|4(0[5-9]|3[0-9]|8[5-9]|9[0-9])|5([0-2][0-9]|3[0-8])|9([2-6][0-9]|7[0-8])|541|700|720|901)|651652|655000|655021)/,gaps:[4,8,12],lengths:[16],code:{name:"CVE",length:3}},{displayName:"Hipercard",type:"hipercard",format:p,startPattern:/^(384100|384140|384160|606282|637095|637568|60(?!11))/,gaps:[4,8,12],lengths:[16],code:{name:"CVC",length:3}}],y=function(e){return v.filter(function(r){return r.startPattern.test(e)})[0]},g=/(0[1-9]|1[0-2])/,m=function(e){return e.split("").reverse().map(function(e){return parseInt(e,10)}).map(function(e,r){return r%2?2*e:e}).map(function(e){return e>9?e%10+1:e}).reduce(function(e,r){return e+r})%10==0},h={cardTypes:Object.freeze({DEFAULT_CVC_LENGTH:3,DEFAULT_ZIP_LENGTH:5,DEFAULT_CARD_FORMAT:p,CARD_TYPES:v,getCardTypeByValue:y,getCardTypeByType:function(e){return v.filter(function(r){return r.type===e})[0]}}),formatter:Object.freeze({formatCardNumber:function(e){var r=y(e);if(!r)return(e.match(/\d+/g)||[]).join("");var n=r.format;if(n&&n.global)return(e.match(n)||[]).join(" ");if(n){var t=n.exec(e.split(" ").join(""));if(t)return t.splice(1,3).filter(function(e){return e}).join(" ")}return e},formatExpiry:function(e){var r=e.nativeEvent&&e.nativeEvent.data,n=e.target.value.split(" / ").join("/");if(!n)return null;var t=n;if(/^[2-9]$/.test(t)&&(t="0".concat(t)),2===n.length&&+n>12){var a=s(n.split("")),o=a[0],u=a.slice(1);t="0".concat(o,"/").concat(u.join(""))}if(/^1[\/-]$/.test(t))return"01 / ";if(1===(t=t.match(/(\d{1,2})/g)||[]).length){if(!r&&n.includes("/"))return t[0];if(/\d{2}/.test(t))return"".concat(t[0]," / ")}if(t.length>2){var i=l(t.join("").match(/^(\d{2}).*(\d{2})$/)||[],3),c=i[1],d=void 0===c?null:c,f=i[2];return[d,void 0===f?null:f].join(" / ")}return t.join(" / ")}}),validator:Object.freeze({EMPTY_CARD_NUMBER:"Enter a card number",EMPTY_EXPIRY_DATE:"Enter an expiry date",EMPTY_CVC:"Enter a CVC",EMPTY_ZIP:"Enter a ZIP code",INVALID_CARD_NUMBER:"Card number is invalid",INVALID_EXPIRY_DATE:"Expiry date is invalid",INVALID_CVC:"CVC is invalid",MONTH_OUT_OF_RANGE:"Expiry month must be between 01 and 12",YEAR_OUT_OF_RANGE:"Expiry year cannot be in the past",DATE_OUT_OF_RANGE:"Expiry date cannot be in the past",hasCardNumberReachedMaxLength:function(e){var r=y(e);return r&&e.length>=r.lengths[r.lengths.length-1]},isNumeric:function(e){return/^\d*$/.test(e.key)},validateLuhn:m,getCardNumberError:function(e){var r=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).errorMessages,n=void 0===r?{}:r;if(!e)return n.emptyCardNumber||"Enter a card number";var t=e.replace(/\s/g,""),a=y(t);if(a&&a.lengths&&a.lengths.includes(t.length)&&m(t))return;return n.invalidCardNumber||"Card number is invalid"},getExpiryDateError:function(e){var r=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).errorMessages,n=void 0===r?{}:r;if(!e)return n.emptyExpiryDate||"Enter an expiry date";var t=e.replace(" / ","").replace("/","");if(4===t.length){var a=t.slice(0,2),o="20".concat(t.slice(2,4));return g.test(a)?parseInt(o)<(new Date).getFullYear()?n.yearOutOfRange||"Expiry year cannot be in the past":parseInt(o)===(new Date).getFullYear()&&parseInt(a)<(new Date).getMonth()+1?n.dateOutOfRange||"Expiry date cannot be in the past":void 0:n.monthOutOfRange||"Expiry month must be between 01 and 12"}return n.invalidExpiryDate||"Expiry date is invalid"},getCVCError:function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=r.cardType,t=r.errorMessages,a=void 0===t?{}:t;return e?e.length<3?a.invalidCVC||"CVC is invalid":n&&e.length!==n.code.length?a.invalidCVC||"CVC is invalid":void 0:a.emptyCVC||"Enter a CVC"},getZIPError:function(e){var r=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).errorMessages;if(!e)return(void 0===r?{}:r).emptyZIP||"Enter a ZIP code"}}),BACKSPACE_KEY_CODE:8,ENTER_KEY_CODE:0,isHighlighted:function(){return"Range"===(window.getSelection()||{type:void 0}).type}};function C(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.errorMessages,t=e.onBlur,o=e.onChange,c=e.onError,s=e.onTouch,d=r.useRef(),f=r.useRef(),p=r.useRef(),v=r.useRef(),y=l(r.useState({cardNumber:!1,expiryDate:!1,cvc:!1,zip:!1}),2),g=y[0],m=y[1],C=l(r.useState(!1),2),b=C[0],E=C[1],P=l(r.useState({cardNumber:void 0,expiryDate:void 0,cvc:void 0,zip:void 0}),2),x=P[0],D=P[1],N=l(r.useState(),2),O=N[0],T=N[1],_=l(r.useState(),2),K=_[0],w=_[1],k=l(r.useState(),2),I=k[0],V=k[1],j=r.useCallback(function(e,r){D(function(n){if(n[e]===r)return n;var t=r,o=u({},n,a({},e,r));return r?T(r):(t=Object.values(o).find(Boolean),T(t)),c&&c(t,o),o})},[]),A=r.useCallback(function(e,r){requestAnimationFrame(function(){"INPUT"!==document.activeElement.tagName?E(!0):!1===r&&E(!1)}),m(function(n){if(n[e]===r)return n;var t=u({},n,a({},e,r));return s&&s(a({},e,r),t),t})},[]),M=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onBlur&&e.onBlur(r),t&&t(r),V(void 0),A("cardNumber",!0)}},[t,A]),R=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){var t=(r.target.value||"").replace(/\s/g,""),a=d.current.selectionStart,u=h.cardTypes.getCardTypeByValue(t);w(u),A("cardNumber",!1),d.current.value=h.formatter.formatCardNumber(t),e.onChange&&e.onChange(r),o&&o(r),requestAnimationFrame(function(){document.activeElement===d.current&&(" "===d.current.value[a-1]&&(a+=1),d.current.setSelectionRange(a,a))});var i=h.validator.getCardNumberError(t,{errorMessages:n});i||f.current&&f.current.focus(),j("cardNumber",i)}},[n,o,j,A]),B=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onFocus&&e.onFocus(),V("cardNumber")}},[]),F=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){var n=(r.target.value||"").replace(/\s/g,"");e.onKeyPress&&e.onKeyPress(r),r.keyCode!==h.ENTER_KEY_CODE&&(h.validator.isNumeric(r)||r.preventDefault(),h.validator.hasCardNumberReachedMaxLength(n)&&r.preventDefault())}},[]),Y=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=e.refKey,n=i(e,["refKey"]);return u(a({"aria-label":"Card number",autoComplete:"cc-number",id:"cardNumber",name:"cardNumber",placeholder:"Card number",type:"tel"},r||"ref",d),n,{onBlur:M(n),onChange:R(n),onFocus:B(n),onKeyPress:F(n)})},[M,R,B,F]),S=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onBlur&&e.onBlur(r),t&&t(r),V(void 0),A("expiryDate",!0)}},[t,A]),z=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){A("expiryDate",!1),f.current.value=h.formatter.formatExpiry(r),e.onChange&&e.onChange(r),o&&o(r);var t=h.validator.getExpiryDateError(f.current.value,{errorMessages:n});t||p.current&&p.current.focus(),j("expiryDate",t)}},[n,o,j,A]),L=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onFocus&&e.onFocus(),V("expiryDate")}},[]),W=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onKeyDown&&e.onKeyDown(r),r.keyCode!==h.BACKSPACE_KEY_CODE||r.target.value||d.current&&d.current.focus()}},[d]),U=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){var n=(r.target.value||"").replace(" / ","");e.onKeyPress&&e.onKeyPress(r),r.keyCode!==h.ENTER_KEY_CODE&&(h.validator.isNumeric(r)||r.preventDefault(),n.length>=4&&r.preventDefault())}},[]),Z=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=e.refKey,n=i(e,["refKey"]);return u(a({"aria-label":"Expiry date in format MM YY",autoComplete:"cc-exp",id:"expiryDate",name:"expiryDate",placeholder:"MM/YY",type:"tel"},r||"ref",f),n,{onBlur:S(n),onChange:z(n),onFocus:L(n),onKeyDown:W(n),onKeyPress:U(n)})},[S,z,L,W,U]),G=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onBlur&&e.onBlur(r),t&&t(r),V(void 0),A("cvc",!0)}},[t,A]),H=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).cardType;return function(t){var a=t.target.value;A("cvc",!1),e.onChange&&e.onChange(t),o&&o(t);var u=h.validator.getCVCError(a,{cardType:r,errorMessages:n});u||v.current&&v.current.focus(),j("cvc",u)}},[n,o,j,A]),q=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onFocus&&e.onFocus(),V("cvc")}},[]),$=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onKeyDown&&e.onKeyDown(r),r.keyCode!==h.BACKSPACE_KEY_CODE||r.target.value||f.current&&f.current.focus()}},[f]),X=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=(arguments.length>1?arguments[1]:void 0).cardType;return function(n){var t=(n.target.value||"").replace(" / ","");e.onKeyPress&&e.onKeyPress(n),n.keyCode!==h.ENTER_KEY_CODE&&(h.validator.isNumeric(n)||n.preventDefault(),r&&t.length>=r.code.length&&n.preventDefault(),t.length>=4&&n.preventDefault())}},[]),J=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=e.refKey,n=i(e,["refKey"]);return u(a({"aria-label":"CVC",autoComplete:"cc-csc",id:"cvc",name:"cvc",placeholder:K?K.code.name:"CVC",type:"tel"},r||"ref",p),n,{onBlur:G(n),onChange:H(n,{cardType:K}),onFocus:q(n),onKeyDown:$(n),onKeyPress:X(n,{cardType:K})})},[K,G,H,q,$,X]),Q=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onBlur&&e.onBlur(r),t&&t(r),V(void 0),A("zip",!0)}},[t,A]),ee=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){var t=r.target.value;A("zip",!1),e.onChange&&e.onChange(r),o&&o(r);var a=h.validator.getZIPError(t,{errorMessages:n});j("zip",a)}},[n,o,j,A]),re=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onFocus&&e.onFocus(),V("zip")}},[]),ne=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onKeyDown&&e.onKeyDown(r),r.keyCode!==h.BACKSPACE_KEY_CODE||r.target.value||p.current&&p.current.focus()}},[p]),te=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onKeyPress&&e.onKeyPress(r),r.keyCode!==h.ENTER_KEY_CODE&&(h.validator.isNumeric(r)||r.preventDefault())}},[]),ae=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=e.refKey,n=i(e,["refKey"]);return u(a({autoComplete:"off",id:"zip",maxLength:"6",name:"zip",placeholder:"ZIP",type:"tel"},r||"ref",v),n,{onBlur:Q(n),onChange:ee(n),onFocus:re(n),onKeyDown:ne(n),onKeyPress:te(n)})},[Q,ee,re,ne,te]),oe=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=e.images||{};return u({"aria-label":K?K.displayName:"Placeholder card",children:r[K?K.type:"placeholder"]||r.placeholder,width:"1.5em",height:"1em",viewBox:"0 0 24 16"},e)},[K]);return r.useLayoutEffect(function(){if(v.current){var e=h.validator.getZIPError(v.current.value,{errorMessages:n});j("zip",e)}if(p.current){var r=h.validator.getCVCError(p.current.value,{errorMessages:n});j("cvc",r)}if(f.current){var t=h.validator.getExpiryDateError(f.current.value,{errorMessages:n});j("expiryDate",t)}if(d.current){var a=h.validator.getCardNumberError(d.current.value,{errorMessages:n});j("cardNumber",a)}},[n,j]),r.useLayoutEffect(function(){d.current&&(d.current.value=h.formatter.formatCardNumber(d.current.value)),f.current&&(f.current.value=h.formatter.formatExpiry({target:f.current}))},[]),r.useLayoutEffect(function(){if(d.current){var e=h.cardTypes.getCardTypeByValue(d.current.value);w(e)}},[]),{getCardImageProps:oe,getCardNumberProps:Y,getExpiryDateProps:Z,getCVCProps:J,getZIPProps:ae,wrapperProps:{error:O,focused:I,isTouched:b},meta:{cardType:K,erroredInputs:x,error:O,focused:I,isTouched:b,touchedInputs:g}}}function b(){var e=c(["\n color: #c9444d;\n font-size: 0.75rem;\n margin-top: 0.25rem;\n\n & {\n ",";\n }\n"]);return b=function(){return e},e}function E(){var e=c(["\n border-color: #444bc9;\n box-shadow: #444bc9 0px 0px 0px 1px;\n ",";\n "]);return E=function(){return e},e}function P(){var e=c(["\n border-color: #c9444d;\n box-shadow: #c9444d 0px 0px 0px 1px;\n ",";\n "]);return P=function(){return e},e}function x(){var e=c(["\n align-items: center;\n background-color: white;\n border: 1px solid #bdbdbd;\n box-shadow: inset 0px 1px 2px #e5e5e5;\n border-radius: 0.2em;\n display: flex;\n height: 2.5em;\n padding: 0.4em 0.6em;\n\n & {\n ",";\n }\n\n & {\n ",";\n }\n\n & input {\n border: unset;\n margin: unset;\n padding: unset;\n outline: unset;\n font-size: inherit;\n\n & {\n ",";\n }\n\n ",";\n }\n\n & svg {\n margin-right: 0.6em;\n & {\n ",";\n }\n }\n\n & input#cardNumber {\n width: 11em;\n & {\n ",";\n }\n }\n\n & input#expiryDate {\n width: 4em;\n & {\n ",";\n }\n }\n\n & input#cvc {\n width: 2.5em;\n & {\n ",";\n }\n }\n\n & input#zip {\n width: 4em;\n & {\n ",";\n }\n }\n\n ",";\n"]);return x=function(){return e},e}function D(){var e=c(["\n display: inline-flex;\n flex-direction: column;\n\n & {\n ",";\n }\n\n ",";\n"]);return D=function(){return e},e}var N=t.div(D(),function(e){return e.hasErrored&&e.styles.fieldWrapper?e.styles.fieldWrapper.errored:void 0},function(e){return e.styles.fieldWrapper?e.styles.fieldWrapper.base:void 0}),O=t.div(x(),function(e){return e.hasErrored&&n.css(P(),function(e){return e.styles.inputWrapper&&e.styles.inputWrapper.errored})},function(e){return e.focused&&n.css(E(),function(e){return e.styles.inputWrapper&&e.styles.inputWrapper.focused})},function(e){return e.hasErrored&&e.styles.input?e.styles.input.errored:void 0},function(e){return e.styles.input&&e.styles.input.base},function(e){return e.styles.cardImage},function(e){return e.styles.input&&e.styles.input.cardNumber},function(e){return e.styles.input&&e.styles.input.expiryDate},function(e){return e.styles.input&&e.styles.input.cvc},function(e){return e.styles.input&&e.styles.input.zip},function(e){return e.styles.inputWrapper?e.styles.inputWrapper.base:void 0}),T=t.div(b(),function(e){return e.styles.errorText?e.styles.errorText.base:void 0});function _(e){var n=e.children,t=e.error,a=e.errorTextProps,u=e.focused,c=e.inputWrapperProps,l=e.isTouched,s=e.styles,d=i(e,["children","error","errorTextProps","focused","inputWrapperProps","isTouched","styles"]),f=t&&l;return r.createElement(N,o({hasErrored:f,styles:s},d),r.createElement(O,o({focused:u,hasErrored:f,styles:s},c),n),f&&r.createElement(T,o({styles:s},a),t))}_.defaultProps={styles:{}},e.PaymentInputsContainer=function(e){var r=C(e);return e.children(r)},e.PaymentInputsWrapper=_,e.usePaymentInputs=C,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
| !function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("styled-components")):"function"==typeof define&&define.amd?define(["exports","react","styled-components"],r):r((e=e||self).ReactPaymentInputs={},e.React,e.StyledComponents)}(this,function(e,r,n){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r;var t="default"in n?n.default:n;function a(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function o(){return(o=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}function u(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.forEach(function(r){a(e,r,n[r])})}return e}function i(e,r){if(null==e)return{};var n,t,a=function(e,r){if(null==e)return{};var n,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)n=o[t],r.indexOf(n)>=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)n=o[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function c(e,r){return r||(r=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))}function s(e,r){return d(e)||function(e,r){var n=[],t=!0,a=!1,o=void 0;try{for(var u,i=e[Symbol.iterator]();!(t=(u=i.next()).done)&&(n.push(u.value),!r||n.length!==r);t=!0);}catch(e){a=!0,o=e}finally{try{t||null==i.return||i.return()}finally{if(a)throw o}}return n}(e,r)||p()}function l(e){return d(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||p()}function d(e){if(Array.isArray(e))return e}function p(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}var f=/(\d{1,4})/g,v=[{displayName:"Visa",type:"visa",format:f,startPattern:/^4/,gaps:[4,8,12],lengths:[16,18,19],code:{name:"CVV",length:3}},{displayName:"Mastercard",type:"mastercard",format:f,startPattern:/^(5[1-5]|677189)|^(222[1-9]|2[3-6]\d{2}|27[0-1]\d|2720)/,gaps:[4,8,12],lengths:[16],code:{name:"CVC",length:3}},{displayName:"American Express",type:"amex",format:/(\d{1,4})(\d{1,6})?(\d{1,5})?/,startPattern:/^3[47]/,gaps:[4,10],lengths:[15],code:{name:"CID",length:4}},{displayName:"Diners Club",type:"dinersclub",format:f,startPattern:/^(36|38|30[0-5])/,gaps:[4,10],lengths:[14,16,19],code:{name:"CVV",length:3}},{displayName:"Discover",type:"discover",format:f,startPattern:/^(6011|65|64[4-9]|622)/,gaps:[4,8,12],lengths:[16,19],code:{name:"CID",length:3}},{displayName:"JCB",type:"jcb",format:f,startPattern:/^35/,gaps:[4,8,12],lengths:[16,17,18,19],code:{name:"CVV",length:3}},{displayName:"UnionPay",type:"unionpay",format:f,startPattern:/^62/,gaps:[4,8,12],lengths:[14,15,16,17,18,19],code:{name:"CVN",length:3}},{displayName:"Maestro",type:"maestro",format:f,startPattern:/^(5018|5020|5038|6304|6703|6708|6759|676[1-3])/,gaps:[4,8,12],lengths:[12,13,14,15,16,17,18,19],code:{name:"CVC",length:3}},{displayName:"Elo",type:"elo",format:f,startPattern:/^(4011(78|79)|43(1274|8935)|45(1416|7393|763(1|2))|50(4175|6699|67[0-7][0-9]|9000)|627780|63(6297|6368)|650(03([^4])|04([0-9])|05(0|1)|4(0[5-9]|3[0-9]|8[5-9]|9[0-9])|5([0-2][0-9]|3[0-8])|9([2-6][0-9]|7[0-8])|541|700|720|901)|651652|655000|655021)/,gaps:[4,8,12],lengths:[16],code:{name:"CVE",length:3}},{displayName:"Hipercard",type:"hipercard",format:f,startPattern:/^(384100|384140|384160|606282|637095|637568|60(?!11))/,gaps:[4,8,12],lengths:[16],code:{name:"CVC",length:3}}],y=function(e){return v.filter(function(r){return r.startPattern.test(e)})[0]},g=/(0[1-9]|1[0-2])/,m=function(e){return e.split("").reverse().map(function(e){return parseInt(e,10)}).map(function(e,r){return r%2?2*e:e}).map(function(e){return e>9?e%10+1:e}).reduce(function(e,r){return e+r})%10==0},h={cardTypes:Object.freeze({DEFAULT_CVC_LENGTH:3,DEFAULT_ZIP_LENGTH:5,DEFAULT_CARD_FORMAT:f,CARD_TYPES:v,getCardTypeByValue:y,getCardTypeByType:function(e){return v.filter(function(r){return r.type===e})[0]}}),formatter:Object.freeze({formatCardNumber:function(e){var r=y(e);if(!r)return(e.match(/\d+/g)||[]).join("");var n=r.format;if(n&&n.global)return(e.match(n)||[]).join(" ");if(n){var t=n.exec(e.split(" ").join(""));if(t)return t.splice(1,3).filter(function(e){return e}).join(" ")}return e},formatExpiry:function(e){var r=e.nativeEvent&&e.nativeEvent.data,n=e.target.value.split(" / ").join("/");if(!n)return null;var t=n;if(/^[2-9]$/.test(t)&&(t="0".concat(t)),2===n.length&&+n>12){var a=l(n.split("")),o=a[0],u=a.slice(1);t="0".concat(o,"/").concat(u.join(""))}if(/^1[\/-]$/.test(t))return"01 / ";if(1===(t=t.match(/(\d{1,2})/g)||[]).length){if(!r&&n.includes("/"))return t[0];if(/\d{2}/.test(t))return"".concat(t[0]," / ")}if(t.length>2){var i=s(t.join("").match(/^(\d{2}).*(\d{2})$/)||[],3),c=i[1],d=void 0===c?null:c,p=i[2];return[d,void 0===p?null:p].join(" / ")}return t.join(" / ")}}),validator:Object.freeze({EMPTY_CARD_NUMBER:"Enter a card number",EMPTY_EXPIRY_DATE:"Enter an expiry date",EMPTY_CVC:"Enter a CVC",EMPTY_ZIP:"Enter a ZIP code",INVALID_CARD_NUMBER:"Card number is invalid",INVALID_EXPIRY_DATE:"Expiry date is invalid",INVALID_CVC:"CVC is invalid",MONTH_OUT_OF_RANGE:"Expiry month must be between 01 and 12",YEAR_OUT_OF_RANGE:"Expiry year cannot be in the past",DATE_OUT_OF_RANGE:"Expiry date cannot be in the past",hasCardNumberReachedMaxLength:function(e){var r=y(e);return r&&e.length>=r.lengths[r.lengths.length-1]},isNumeric:function(e){return/^\d*$/.test(e.key)},validateLuhn:m,getCardNumberError:function(e,r){var n=(arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}).errorMessages,t=void 0===n?{}:n;if(!e)return t.emptyCardNumber||"Enter a card number";var a=e.replace(/\s/g,""),o=y(a);if(o&&o.lengths&&o.lengths.includes(a.length)&&m(a))return r?r({cardNumber:a,cardType:o,errorMessages:t}):void 0;return t.invalidCardNumber||"Card number is invalid"},getExpiryDateError:function(e,r){var n=(arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}).errorMessages,t=void 0===n?{}:n;if(!e)return t.emptyExpiryDate||"Enter an expiry date";var a=e.replace(" / ","").replace("/","");if(4===a.length){var o=a.slice(0,2),u="20".concat(a.slice(2,4));return g.test(o)?parseInt(u)<(new Date).getFullYear()?t.yearOutOfRange||"Expiry year cannot be in the past":parseInt(u)===(new Date).getFullYear()&&parseInt(o)<(new Date).getMonth()+1?t.dateOutOfRange||"Expiry date cannot be in the past":r?r({expiryDate:{month:o,year:u},errorMessages:t}):void 0:t.monthOutOfRange||"Expiry month must be between 01 and 12"}return t.invalidExpiryDate||"Expiry date is invalid"},getCVCError:function(e,r){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},t=n.cardType,a=n.errorMessages,o=void 0===a?{}:a;return e?e.length<3?o.invalidCVC||"CVC is invalid":t&&e.length!==t.code.length?o.invalidCVC||"CVC is invalid":r?r({cvc:e,cardType:t,errorMessages:o}):void 0:o.emptyCVC||"Enter a CVC"},getZIPError:function(e){var r=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).errorMessages;if(!e)return(void 0===r?{}:r).emptyZIP||"Enter a ZIP code"}}),BACKSPACE_KEY_CODE:8,ENTER_KEY_CODE:0,isHighlighted:function(){return"Range"===(window.getSelection()||{type:void 0}).type}};function C(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.errorMessages,t=e.onBlur,o=e.onChange,c=e.onError,l=e.onTouch,d=e.cardNumberValidator,p=e.cvcValidator,f=e.expiryValidator,v=r.useRef(),y=r.useRef(),g=r.useRef(),m=r.useRef(),C=s(r.useState({cardNumber:!1,expiryDate:!1,cvc:!1,zip:!1}),2),b=C[0],E=C[1],P=s(r.useState(!1),2),x=P[0],D=P[1],N=s(r.useState({cardNumber:void 0,expiryDate:void 0,cvc:void 0,zip:void 0}),2),O=N[0],T=N[1],_=s(r.useState(),2),K=_[0],w=_[1],V=s(r.useState(),2),k=V[0],I=V[1],M=s(r.useState(),2),j=M[0],A=M[1],R=r.useCallback(function(e,r){T(function(n){if(n[e]===r)return n;var t=r,o=u({},n,a({},e,r));return r?w(r):(t=Object.values(o).find(Boolean),w(t)),c&&c(t,o),o})},[]),B=r.useCallback(function(e,r){requestAnimationFrame(function(){"INPUT"!==document.activeElement.tagName?D(!0):!1===r&&D(!1)}),E(function(n){if(n[e]===r)return n;var t=u({},n,a({},e,r));return l&&l(a({},e,r),t),t})},[]),F=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onBlur&&e.onBlur(r),t&&t(r),A(void 0),B("cardNumber",!0)}},[t,B]),Y=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){var t=(r.target.value||"").replace(/\s/g,""),a=v.current.selectionStart,u=h.cardTypes.getCardTypeByValue(t);I(u),B("cardNumber",!1),v.current.value=h.formatter.formatCardNumber(t),e.onChange&&e.onChange(r),o&&o(r),requestAnimationFrame(function(){document.activeElement===v.current&&(" "===v.current.value[a-1]&&(a+=1),v.current.setSelectionRange(a,a))});var i=h.validator.getCardNumberError(t,d,{errorMessages:n});i||y.current&&y.current.focus(),R("cardNumber",i)}},[d,n,o,R,B]),S=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onFocus&&e.onFocus(),A("cardNumber")}},[]),z=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){var n=(r.target.value||"").replace(/\s/g,"");e.onKeyPress&&e.onKeyPress(r),r.keyCode!==h.ENTER_KEY_CODE&&(h.validator.isNumeric(r)||r.preventDefault(),h.validator.hasCardNumberReachedMaxLength(n)&&r.preventDefault())}},[]),L=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=e.refKey,n=i(e,["refKey"]);return u(a({"aria-label":"Card number",autoComplete:"cc-number",id:"cardNumber",name:"cardNumber",placeholder:"Card number",type:"tel"},r||"ref",v),n,{onBlur:F(n),onChange:Y(n),onFocus:S(n),onKeyPress:z(n)})},[F,Y,S,z]),W=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onBlur&&e.onBlur(r),t&&t(r),A(void 0),B("expiryDate",!0)}},[t,B]),U=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){B("expiryDate",!1),y.current.value=h.formatter.formatExpiry(r),e.onChange&&e.onChange(r),o&&o(r);var t=h.validator.getExpiryDateError(y.current.value,f,{errorMessages:n});t||g.current&&g.current.focus(),R("expiryDate",t)}},[n,f,o,R,B]),Z=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onFocus&&e.onFocus(),A("expiryDate")}},[]),G=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onKeyDown&&e.onKeyDown(r),r.keyCode!==h.BACKSPACE_KEY_CODE||r.target.value||v.current&&v.current.focus()}},[v]),H=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){var n=(r.target.value||"").replace(" / ","");e.onKeyPress&&e.onKeyPress(r),r.keyCode!==h.ENTER_KEY_CODE&&(h.validator.isNumeric(r)||r.preventDefault(),n.length>=4&&r.preventDefault())}},[]),q=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=e.refKey,n=i(e,["refKey"]);return u(a({"aria-label":"Expiry date in format MM YY",autoComplete:"cc-exp",id:"expiryDate",name:"expiryDate",placeholder:"MM/YY",type:"tel"},r||"ref",y),n,{onBlur:W(n),onChange:U(n),onFocus:Z(n),onKeyDown:G(n),onKeyPress:H(n)})},[W,U,Z,G,H]),$=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onBlur&&e.onBlur(r),t&&t(r),A(void 0),B("cvc",!0)}},[t,B]),X=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).cardType;return function(t){var a=t.target.value;B("cvc",!1),e.onChange&&e.onChange(t),o&&o(t);var u=h.validator.getCVCError(a,p,{cardType:r,errorMessages:n});u||m.current&&m.current.focus(),R("cvc",u)}},[p,n,o,R,B]),J=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onFocus&&e.onFocus(),A("cvc")}},[]),Q=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onKeyDown&&e.onKeyDown(r),r.keyCode!==h.BACKSPACE_KEY_CODE||r.target.value||y.current&&y.current.focus()}},[y]),ee=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=(arguments.length>1?arguments[1]:void 0).cardType;return function(n){var t=(n.target.value||"").replace(" / ","");e.onKeyPress&&e.onKeyPress(n),n.keyCode!==h.ENTER_KEY_CODE&&(h.validator.isNumeric(n)||n.preventDefault(),r&&t.length>=r.code.length&&n.preventDefault(),t.length>=4&&n.preventDefault())}},[]),re=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=e.refKey,n=i(e,["refKey"]);return u(a({"aria-label":"CVC",autoComplete:"cc-csc",id:"cvc",name:"cvc",placeholder:k?k.code.name:"CVC",type:"tel"},r||"ref",g),n,{onBlur:$(n),onChange:X(n,{cardType:k}),onFocus:J(n),onKeyDown:Q(n),onKeyPress:ee(n,{cardType:k})})},[k,$,X,J,Q,ee]),ne=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onBlur&&e.onBlur(r),t&&t(r),A(void 0),B("zip",!0)}},[t,B]),te=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){var t=r.target.value;B("zip",!1),e.onChange&&e.onChange(r),o&&o(r);var a=h.validator.getZIPError(t,{errorMessages:n});R("zip",a)}},[n,o,R,B]),ae=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onFocus&&e.onFocus(),A("zip")}},[]),oe=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onKeyDown&&e.onKeyDown(r),r.keyCode!==h.BACKSPACE_KEY_CODE||r.target.value||g.current&&g.current.focus()}},[g]),ue=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return function(r){e.onKeyPress&&e.onKeyPress(r),r.keyCode!==h.ENTER_KEY_CODE&&(h.validator.isNumeric(r)||r.preventDefault())}},[]),ie=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=e.refKey,n=i(e,["refKey"]);return u(a({autoComplete:"off",id:"zip",maxLength:"6",name:"zip",placeholder:"ZIP",type:"tel"},r||"ref",m),n,{onBlur:ne(n),onChange:te(n),onFocus:ae(n),onKeyDown:oe(n),onKeyPress:ue(n)})},[ne,te,ae,oe,ue]),ce=r.useCallback(function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=e.images||{};return u({"aria-label":k?k.displayName:"Placeholder card",children:r[k?k.type:"placeholder"]||r.placeholder,width:"1.5em",height:"1em",viewBox:"0 0 24 16"},e)},[k]);return r.useLayoutEffect(function(){if(m.current){var e=h.validator.getZIPError(m.current.value,{errorMessages:n});R("zip",e)}if(g.current){var r=h.validator.getCVCError(g.current.value,{errorMessages:n});R("cvc",r)}if(y.current){var t=h.validator.getExpiryDateError(y.current.value,{errorMessages:n});R("expiryDate",t)}if(v.current){var a=h.validator.getCardNumberError(v.current.value,{errorMessages:n});R("cardNumber",a)}},[n,R]),r.useLayoutEffect(function(){v.current&&(v.current.value=h.formatter.formatCardNumber(v.current.value)),y.current&&(y.current.value=h.formatter.formatExpiry({target:y.current}))},[]),r.useLayoutEffect(function(){if(v.current){var e=h.cardTypes.getCardTypeByValue(v.current.value);I(e)}},[]),{getCardImageProps:ce,getCardNumberProps:L,getExpiryDateProps:q,getCVCProps:re,getZIPProps:ie,wrapperProps:{error:K,focused:j,isTouched:x},meta:{cardType:k,erroredInputs:O,error:K,focused:j,isTouched:x,touchedInputs:b}}}function b(){var e=c(["\n color: #c9444d;\n font-size: 0.75rem;\n margin-top: 0.25rem;\n\n & {\n ",";\n }\n"]);return b=function(){return e},e}function E(){var e=c(["\n border-color: #444bc9;\n box-shadow: #444bc9 0px 0px 0px 1px;\n ",";\n "]);return E=function(){return e},e}function P(){var e=c(["\n border-color: #c9444d;\n box-shadow: #c9444d 0px 0px 0px 1px;\n ",";\n "]);return P=function(){return e},e}function x(){var e=c(["\n align-items: center;\n background-color: white;\n border: 1px solid #bdbdbd;\n box-shadow: inset 0px 1px 2px #e5e5e5;\n border-radius: 0.2em;\n display: flex;\n height: 2.5em;\n padding: 0.4em 0.6em;\n\n & {\n ",";\n }\n\n & {\n ",";\n }\n\n & input {\n border: unset;\n margin: unset;\n padding: unset;\n outline: unset;\n font-size: inherit;\n\n & {\n ",";\n }\n\n ",";\n }\n\n & svg {\n margin-right: 0.6em;\n & {\n ",";\n }\n }\n\n & input#cardNumber {\n width: 11em;\n & {\n ",";\n }\n }\n\n & input#expiryDate {\n width: 4em;\n & {\n ",";\n }\n }\n\n & input#cvc {\n width: 2.5em;\n & {\n ",";\n }\n }\n\n & input#zip {\n width: 4em;\n & {\n ",";\n }\n }\n\n ",";\n"]);return x=function(){return e},e}function D(){var e=c(["\n display: inline-flex;\n flex-direction: column;\n\n & {\n ",";\n }\n\n ",";\n"]);return D=function(){return e},e}var N=t.div(D(),function(e){return e.hasErrored&&e.styles.fieldWrapper?e.styles.fieldWrapper.errored:void 0},function(e){return e.styles.fieldWrapper?e.styles.fieldWrapper.base:void 0}),O=t.div(x(),function(e){return e.hasErrored&&n.css(P(),function(e){return e.styles.inputWrapper&&e.styles.inputWrapper.errored})},function(e){return e.focused&&n.css(E(),function(e){return e.styles.inputWrapper&&e.styles.inputWrapper.focused})},function(e){return e.hasErrored&&e.styles.input?e.styles.input.errored:void 0},function(e){return e.styles.input&&e.styles.input.base},function(e){return e.styles.cardImage},function(e){return e.styles.input&&e.styles.input.cardNumber},function(e){return e.styles.input&&e.styles.input.expiryDate},function(e){return e.styles.input&&e.styles.input.cvc},function(e){return e.styles.input&&e.styles.input.zip},function(e){return e.styles.inputWrapper?e.styles.inputWrapper.base:void 0}),T=t.div(b(),function(e){return e.styles.errorText?e.styles.errorText.base:void 0});function _(e){var n=e.children,t=e.error,a=e.errorTextProps,u=e.focused,c=e.inputWrapperProps,s=e.isTouched,l=e.styles,d=i(e,["children","error","errorTextProps","focused","inputWrapperProps","isTouched","styles"]),p=t&&s;return r.createElement(N,o({hasErrored:p,styles:l},d),r.createElement(O,o({focused:u,hasErrored:p,styles:l},c),n),p&&r.createElement(T,o({styles:l},a),t))}_.defaultProps={styles:{}},e.PaymentInputsContainer=function(e){var r=C(e);return e.children(r)},e.PaymentInputsWrapper=_,e.usePaymentInputs=C,Object.defineProperty(e,"__esModule",{value:!0})}); |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.39%
257522
- Lines of code
- increased by1.6%
3361
- Number of lines in readme file
- increased by6.25%
867
No dependency changes