{"_id":"@akinon/akifast-secure-form","_rev":"8-cc645abc3358ce566879d66e993a7fdc","name":"@akinon/akifast-secure-form","dist-tags":{"latest":"2.0.3"},"versions":{"1.0.0":{"name":"@akinon/akifast-secure-form","version":"1.0.0","author":{"name":"Akinon"},"license":"ISC","_id":"@akinon/akifast-secure-form@1.0.0","maintainers":[{"name":"akinon","email":"dev@akinon.com"}],"homepage":"https://bitbucket.org/akinonteam/akipay_secure_form_library#readme","bugs":{"url":"https://bitbucket.org/akinonteam/akipay_secure_form_library/issues"},"dist":{"shasum":"9bbb5d987dcc95f414e009725de3bacca42f8ed6","tarball":"https://registry.npmjs.org/@akinon/akifast-secure-form/-/akifast-secure-form-1.0.0.tgz","fileCount":33,"integrity":"sha512-84nJZD0PqCq3Kx3LmawoHO2IQVoEdhUjGbxN8tkdUdVmY2SrazONwV/Lhfynk4vUuOW43oO6BL5LKda7fdEwpw==","signatures":[{"sig":"MEQCID2ymEOJHc/RlScmpK2plPrAkACnXOpEMLWQkOxJ50FLAiAWdQFgpsj3jpzE3YDYxy3T2fDBSR00w1AqYrxoWsMFGA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":61595},"main":"dist/akifast-secure-form.js","types":"dist/index.d.ts","module":"dist/akifast-secure-form.esm.js","engines":{"npm":">=9.0.0","node":">=18.17.0"},"gitHead":"a5de35d19ee06b32d5b442ebf07f160225d4de97","scripts":{"dev":"NODE_ENV=development webpack serve --config webpack.config.js","lint":"eslint 'src/**/*.{ts,tsx}'","test":"jest --clearCache && jest","build":"NODE_ENV=production webpack --config webpack.config.js","format":"prettier --check .","prepare":"husky","lint:fix":"eslint 'src/**/*.{ts,tsx}' --fix","prebuild":"npm run clean:dist","clean:dist":"rm -rf dist","format:fix":"prettier --write .","test:coverage":"jest --clearCache && jest --coverage","prepublishOnly":"npm run test && npm run build"},"_npmUser":{"name":"akinon","actor":{"name":"akinon","type":"user","email":"dev@akinon.com"},"email":"dev@akinon.com"},"repository":{"url":"git+ssh://git@bitbucket.org/akinonteam/akipay_secure_form_library.git","type":"git"},"_npmVersion":"10.9.2","description":"Akifast Secure Form Library. This library allows clients to create payment forms within their styles. By using this form clients are also stay in secure field of PCI-DSS","directories":{},"lint-staged":{"src/**/*.{ts,tsx}":["eslint --fix","prettier --write"]},"_nodeVersion":"22.14.0","dependencies":{"lint-staged":"^16.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.1.7","dotenv":"^16.5.0","eslint":"^9.26.0","rimraf":"^6.0.1","ts-jest":"^29.4.0","webpack":"^5.88.0","prettier":"^3.5.3","cross-env":"^7.0.3","ts-loader":"^9.5.0","typescript":"^5.3.0","@babel/core":"^7.24.4","@types/jest":"^29.5.12","@types/node":"^20.12.7","@types/uuid":"^9.0.8","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","concurrently":"^8.2.2","webpack-merge":"^6.0.1","@babel/preset-env":"^7.24.4","webpack-dev-server":"^5.2.1","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","eslint-plugin-security":"^3.0.1","jest-environment-jsdom":"^29.7.0","@babel/preset-typescript":"^7.24.1","@typescript-eslint/parser":"^8.32.1","@typescript-eslint/eslint-plugin":"^8.32.1"},"_npmOperationalInternal":{"tmp":"tmp/akifast-secure-form_1.0.0_1751963252766_0.5686036385634332","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@akinon/akifast-secure-form","version":"1.0.1","author":{"name":"Akinon"},"license":"ISC","_id":"@akinon/akifast-secure-form@1.0.1","maintainers":[{"name":"akinon","email":"dev@akinon.com"}],"bugs":{"url":"https://bitbucket.org/akinonteam/akipay_secure_form_library/issues"},"dist":{"shasum":"16097753434431ce234c14cc7a39f7a6cd2cadd3","tarball":"https://registry.npmjs.org/@akinon/akifast-secure-form/-/akifast-secure-form-1.0.1.tgz","fileCount":33,"integrity":"sha512-Ao/ZrtYvTFC6zB9PkA5zjrAL3RLbNnGH8bkdWQvWRKq3JS1sx2LDI6q/XQm32hzWPJzmlfsipxvdQbO7IK6bkg==","signatures":[{"sig":"MEYCIQDlMeGg2/ynvXwUEvssg8NkOn1ilOQXklvpecJaO9J98QIhALCgtOwSOQibmW6ds1fta/ZO5jkCAOuuClb3LayXt4Jy","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":61402},"main":"dist/akifast-secure-form.js","types":"dist/index.d.ts","module":"dist/akifast-secure-form.esm.js","engines":{"npm":">=9.0.0","node":">=18.17.0"},"gitHead":"c8fc3349b07c2ee82780831645d066e6a36ebb47","scripts":{"dev":"NODE_ENV=development webpack serve --config webpack.config.js","lint":"eslint 'src/**/*.{ts,tsx}'","test":"jest --clearCache && jest","build":"NODE_ENV=production webpack --config webpack.config.js","format":"prettier --check .","prepare":"husky","lint:fix":"eslint 'src/**/*.{ts,tsx}' --fix","prebuild":"npm run clean:dist","clean:dist":"rm -rf dist","format:fix":"prettier --write .","test:coverage":"jest --clearCache && jest --coverage","prepublishOnly":"npm run test && npm run build"},"_npmUser":{"name":"akinon","actor":{"name":"akinon","type":"user","email":"dev@akinon.com"},"email":"dev@akinon.com"},"_npmVersion":"10.9.2","description":"Akifast Secure Form Library. This library allows clients to create payment forms within their styles. By using this form clients are also stay in secure field of PCI-DSS","directories":{},"lint-staged":{"src/**/*.{ts,tsx}":["eslint --fix","prettier --write"]},"_nodeVersion":"22.14.0","dependencies":{"lint-staged":"^16.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.1.7","dotenv":"^16.5.0","eslint":"^9.26.0","rimraf":"^6.0.1","ts-jest":"^29.4.0","webpack":"^5.88.0","prettier":"^3.5.3","cross-env":"^7.0.3","ts-loader":"^9.5.0","typescript":"^5.3.0","@babel/core":"^7.24.4","@types/jest":"^29.5.12","@types/node":"^20.12.7","@types/uuid":"^9.0.8","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","concurrently":"^8.2.2","webpack-merge":"^6.0.1","@babel/preset-env":"^7.24.4","webpack-dev-server":"^5.2.1","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","eslint-plugin-security":"^3.0.1","jest-environment-jsdom":"^29.7.0","@babel/preset-typescript":"^7.24.1","@typescript-eslint/parser":"^8.32.1","@typescript-eslint/eslint-plugin":"^8.32.1"},"_npmOperationalInternal":{"tmp":"tmp/akifast-secure-form_1.0.1_1751963854259_0.8995070146685789","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@akinon/akifast-secure-form","version":"1.0.4","keywords":["payment","pci-dss","secure-form","iframe","akinon"],"author":{"name":"Akinon"},"license":"ISC","_id":"@akinon/akifast-secure-form@1.0.4","maintainers":[{"name":"akinon","email":"dev@akinon.com"}],"homepage":"https://bitbucket.org/akinonteam/akipay_secure_form_library#readme","bugs":{"url":"https://bitbucket.org/akinonteam/akipay_secure_form_library/issues"},"dist":{"shasum":"80bf09ff2092efb49dc9089cb73db323c4d63292","tarball":"https://registry.npmjs.org/@akinon/akifast-secure-form/-/akifast-secure-form-1.0.4.tgz","fileCount":22,"integrity":"sha512-E+J72duxUiw2aNF1nJzsJ8iK2Wllt1fkrsg7MQm5UCf7Rm/BC9l+N6QIV0ai+fKbwndZxHjX+x62MkbdrNqw/Q==","signatures":[{"sig":"MEUCIQD9n6JjcwAobB5dfgLrgNQZM8G0t3sL2ptU0rbpbwuV9QIgQrNLdnxZCkbcJKS1pIEoowoV+S6gyT4YNqzSlsLJd88=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":188335},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","browser":"dist/index.umd.js","engines":{"npm":">=9.0.0","node":">=18.17.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","browser":"./dist/index.umd.js","require":"./dist/index.js"}},"gitHead":"5d007ad01852cc5defde983e5f4868faea1ae6b8","scripts":{"dev":"NODE_ENV=development webpack serve --config webpack.config.js","lint":"eslint 'src/**/*.{ts,tsx}'","test":"jest --clearCache && jest","build":"npm run clean:dist && npm run build:webpack && npm run build:types","format":"prettier --check .","prepare":"husky","lint:fix":"eslint 'src/**/*.{ts,tsx}' --fix","prebuild":"npm run clean:dist","clean:dist":"rm -rf dist","format:fix":"prettier --write .","build:types":"tsc --project tsconfig.build.json","build:webpack":"NODE_ENV=production webpack --config webpack.config.cjs","release:major":"npm version major && npm publish","release:minor":"npm version minor && npm publish","release:patch":"npm version patch && npm publish","test:coverage":"jest --clearCache && jest --coverage","prepublishOnly":"npm run test && npm run build && npm run lint"},"_npmUser":{"name":"akinon","email":"dev@akinon.com"},"repository":{"url":"git+https://bitbucket.org/akinonteam/akipay_secure_form_library.git","type":"git"},"_npmVersion":"10.9.3","description":"Akifast Secure Form Library. This library allows clients to create payment forms within their styles. By using this form clients are also stay in secure field of PCI-DSS","directories":{},"lint-staged":{"src/**/*.{ts,tsx}":["eslint --fix","prettier --write"]},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.1.7","dotenv":"^16.5.0","eslint":"^9.26.0","rimraf":"^6.0.1","ts-jest":"^29.4.0","webpack":"^5.88.0","prettier":"^3.5.3","cross-env":"^7.0.3","ts-loader":"^9.5.0","@eslint/js":"^9.34.0","typescript":"^5.3.0","@babel/core":"^7.24.4","@types/jest":"^30.0.0","@types/node":"^24.0.13","@types/uuid":"^9.0.8","lint-staged":"^16.0.0","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","concurrently":"^8.2.2","ignore-loader":"^0.1.2","webpack-merge":"^6.0.1","@babel/preset-env":"^7.24.4","webpack-dev-server":"^5.2.1","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","eslint-plugin-security":"^3.0.1","jest-environment-jsdom":"^29.7.0","@babel/preset-typescript":"^7.24.1","@typescript-eslint/parser":"^8.32.1","@typescript-eslint/eslint-plugin":"^8.32.1"},"_npmOperationalInternal":{"tmp":"tmp/akifast-secure-form_1.0.4_1756158695007_0.21202868373836603","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@akinon/akifast-secure-form","version":"1.0.6","keywords":["payment","pci-dss","secure-form","iframe","akinon"],"author":{"name":"Akinon"},"license":"ISC","_id":"@akinon/akifast-secure-form@1.0.6","maintainers":[{"name":"akinon","email":"dev@akinon.com"}],"homepage":"https://bitbucket.org/akinonteam/akipay_secure_form_library#readme","bugs":{"url":"https://bitbucket.org/akinonteam/akipay_secure_form_library/issues"},"dist":{"shasum":"37acd81b7dd24fdbe7cb569183f25e59ce113be8","tarball":"https://registry.npmjs.org/@akinon/akifast-secure-form/-/akifast-secure-form-1.0.6.tgz","fileCount":22,"integrity":"sha512-PB8yEnc2DvRZdgkl6GBHT2nSllkzKBOOkBIzG+xcYLR2peNeKM3nWOJdHsylmxx1N0YDfR/BBBA0usn5aeR2AA==","signatures":[{"sig":"MEUCIQDPlsz8ZS+NRYUZxty/wRE0Ufh2ltxtoUiN/8O08GUFBQIgCVgl7DPOxClp9BxjB9hdH1Nc9LcfUxx2qk5AgPI7wtg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":188335},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","browser":"dist/index.umd.js","engines":{"npm":">=9.0.0","node":">=18.17.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","browser":"./dist/index.umd.js","require":"./dist/index.js"}},"gitHead":"82fd1e4e92004b2a72d695605b329da0fc76c075","scripts":{"dev":"NODE_ENV=development webpack serve --config webpack.config.js","lint":"eslint 'src/**/*.{ts,tsx}'","test":"jest --clearCache && jest","build":"npm run clean:dist && npm run build:webpack && npm run build:types","format":"prettier --check .","prepare":"husky","lint:fix":"eslint 'src/**/*.{ts,tsx}' --fix","prebuild":"npm run clean:dist","clean:dist":"rm -rf dist","format:fix":"prettier --write .","build:types":"tsc --project tsconfig.build.json","build:webpack":"NODE_ENV=production webpack --config webpack.config.cjs","release:major":"npm version major && npm publish","release:minor":"npm version minor && npm publish","release:patch":"npm version patch && npm publish","test:coverage":"jest --clearCache && jest --coverage","prepublishOnly":"npm run test && npm run build && npm run lint"},"_npmUser":{"name":"akinon","email":"dev@akinon.com"},"repository":{"url":"git+https://bitbucket.org/akinonteam/akipay_secure_form_library.git","type":"git"},"_npmVersion":"10.9.3","description":"Akifast Secure Form Library. This library allows clients to create payment forms within their styles. By using this form clients are also stay in secure field of PCI-DSS","directories":{},"lint-staged":{"src/**/*.{ts,tsx}":["eslint --fix","prettier --write"]},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.1.7","dotenv":"^16.5.0","eslint":"^9.26.0","rimraf":"^6.0.1","ts-jest":"^29.4.0","webpack":"^5.88.0","prettier":"^3.5.3","cross-env":"^7.0.3","ts-loader":"^9.5.0","@eslint/js":"^9.34.0","typescript":"^5.3.0","@babel/core":"^7.24.4","@types/jest":"^30.0.0","@types/node":"^24.0.13","@types/uuid":"^9.0.8","lint-staged":"^16.0.0","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","concurrently":"^8.2.2","ignore-loader":"^0.1.2","webpack-merge":"^6.0.1","@babel/preset-env":"^7.24.4","webpack-dev-server":"^5.2.1","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","eslint-plugin-security":"^3.0.1","jest-environment-jsdom":"^29.7.0","@babel/preset-typescript":"^7.24.1","@typescript-eslint/parser":"^8.32.1","@typescript-eslint/eslint-plugin":"^8.32.1"},"_npmOperationalInternal":{"tmp":"tmp/akifast-secure-form_1.0.6_1756280169400_0.30030743243887237","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@akinon/akifast-secure-form","version":"2.0.0","keywords":["payment","pci-dss","secure-form","iframe","akinon"],"author":{"name":"Akinon"},"license":"ISC","_id":"@akinon/akifast-secure-form@2.0.0","maintainers":[{"name":"akinon","email":"dev@akinon.com"}],"homepage":"https://bitbucket.org/akinonteam/akipay_secure_form_library#readme","bugs":{"url":"https://bitbucket.org/akinonteam/akipay_secure_form_library/issues"},"dist":{"shasum":"01c2f5bd14e032c2cf7c70d6b7bca99957de0891","tarball":"https://registry.npmjs.org/@akinon/akifast-secure-form/-/akifast-secure-form-2.0.0.tgz","fileCount":38,"integrity":"sha512-6hG2NvlY8IqmjAcjrkMRp3/iiRsCU9r+iWH81+g8QroSL0HsMMOrI5zJ7mXV8raL+mt9vHY9CruMKNER9qtgEg==","signatures":[{"sig":"MEYCIQCUsW+75mTVTgtswtGF81cQVO39XmoPrFgQ9wfueFwxdgIhALAwkWWRu/Ui/mMmbK2fM2e0f/MGlBP0UAFP1KtbTjq2","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":344952},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","browser":"dist/index.umd.js","engines":{"npm":">=9.0.0","node":">=18.17.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","browser":"./dist/index.umd.js","require":"./dist/index.js"}},"gitHead":"8569e7d6051640dfd67751dcea90d5dd6d033b11","scripts":{"dev":"NODE_ENV=development webpack serve --config webpack.config.js","lint":"eslint 'src/**/*.{ts,tsx}'","test":"jest --clearCache && jest","build":"npm run clean:dist && npm run build:webpack && npm run build:types","format":"prettier --check .","prepare":"husky","lint:fix":"eslint 'src/**/*.{ts,tsx}' --fix","prebuild":"npm run clean:dist","clean:dist":"rm -rf dist","format:fix":"prettier --write .","build:types":"tsc --project tsconfig.build.json","build:webpack":"NODE_ENV=production webpack --config webpack.config.cjs","release:major":"npm version major && npm publish","release:minor":"npm version minor && npm publish","release:patch":"npm version patch && npm publish","test:coverage":"jest --clearCache && jest --coverage","prepublishOnly":"npm run test && npm run build && npm run lint"},"_npmUser":{"name":"akinon","email":"dev@akinon.com"},"repository":{"url":"git+https://bitbucket.org/akinonteam/akipay_secure_form_library.git","type":"git"},"_npmVersion":"11.6.2","description":"Akifast Secure Form Library. This library allows clients to create payment forms within their styles. By using this form clients are also stay in secure field of PCI-DSS","directories":{},"lint-staged":{"src/**/*.{ts,tsx}":["eslint --fix","prettier --write"]},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.1.7","dotenv":"^16.5.0","eslint":"^9.26.0","rimraf":"^6.0.1","ts-jest":"^29.4.0","webpack":"^5.88.0","prettier":"^3.5.3","cross-env":"^7.0.3","ts-loader":"^9.5.0","@eslint/js":"^9.34.0","typescript":"^5.3.0","@babel/core":"^7.24.4","@types/jest":"^30.0.0","@types/node":"^24.0.13","@types/uuid":"^9.0.8","lint-staged":"^16.0.0","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","concurrently":"^8.2.2","ignore-loader":"^0.1.2","webpack-merge":"^6.0.1","@babel/preset-env":"^7.24.4","webpack-dev-server":"^5.2.1","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","eslint-plugin-security":"^3.0.1","jest-environment-jsdom":"^29.7.0","@babel/preset-typescript":"^7.24.1","@typescript-eslint/parser":"^8.32.1","@typescript-eslint/eslint-plugin":"^8.32.1"},"_npmOperationalInternal":{"tmp":"tmp/akifast-secure-form_2.0.0_1763627167626_0.9715755680629792","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@akinon/akifast-secure-form","version":"2.0.1","keywords":["payment","pci-dss","secure-form","iframe","akinon"],"author":{"name":"Akinon"},"license":"ISC","_id":"@akinon/akifast-secure-form@2.0.1","maintainers":[{"name":"akinon","email":"dev@akinon.com"}],"homepage":"https://bitbucket.org/akinonteam/akipay_secure_form_library#readme","bugs":{"url":"https://bitbucket.org/akinonteam/akipay_secure_form_library/issues"},"dist":{"shasum":"3b8ab86534b2806cfaad8369b98f1b1bbda7fa50","tarball":"https://registry.npmjs.org/@akinon/akifast-secure-form/-/akifast-secure-form-2.0.1.tgz","fileCount":38,"integrity":"sha512-O9Z/CB2qHx3tdrDeZCTbMumYZ1e+xnLHxYSPZO659Ub5HBPaG9z/D+E0ymhrAYWXmyh5UeREj8IQ/tIMAM4xxw==","signatures":[{"sig":"MEUCIEGg/2KXcWvqsYHE2IxB6m23OXQ3SUIHgnSnR5dsevXIAiEA1DPuA4vcmeOyxlz+eA/7XGbr6OhdFBJMkKODJdqt5+c=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":345386},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","browser":"dist/index.umd.js","engines":{"npm":">=9.0.0","node":">=18.17.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","browser":"./dist/index.umd.js","require":"./dist/index.js"}},"gitHead":"1eacb604d9f7ce6390e5646b6d57d4f3c2719723","scripts":{"dev":"NODE_ENV=development webpack serve --config webpack.config.js","lint":"eslint 'src/**/*.{ts,tsx}'","test":"jest --clearCache && jest","build":"npm run clean:dist && npm run build:webpack && npm run build:types","format":"prettier --check .","prepare":"husky","lint:fix":"eslint 'src/**/*.{ts,tsx}' --fix","prebuild":"npm run clean:dist","clean:dist":"rm -rf dist","format:fix":"prettier --write .","build:types":"tsc --project tsconfig.build.json","build:webpack":"NODE_ENV=production webpack --config webpack.config.cjs","release:major":"npm version major && npm publish","release:minor":"npm version minor && npm publish","release:patch":"npm version patch && npm publish","test:coverage":"jest --clearCache && jest --coverage","prepublishOnly":"npm run test && npm run build && npm run lint"},"_npmUser":{"name":"akinon","email":"dev@akinon.com"},"repository":{"url":"git+https://bitbucket.org/akinonteam/akipay_secure_form_library.git","type":"git"},"_npmVersion":"11.6.2","description":"Akifast Secure Form Library. This library allows clients to create payment forms within their styles. By using this form clients are also stay in secure field of PCI-DSS","directories":{},"lint-staged":{"src/**/*.{ts,tsx}":["eslint --fix","prettier --write"]},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.1.7","dotenv":"^16.5.0","eslint":"^9.26.0","rimraf":"^6.0.1","ts-jest":"^29.4.0","webpack":"^5.88.0","prettier":"^3.5.3","cross-env":"^7.0.3","ts-loader":"^9.5.0","@eslint/js":"^9.34.0","typescript":"^5.3.0","@babel/core":"^7.24.4","@types/jest":"^30.0.0","@types/node":"^24.0.13","@types/uuid":"^9.0.8","lint-staged":"^16.0.0","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","concurrently":"^8.2.2","ignore-loader":"^0.1.2","webpack-merge":"^6.0.1","@babel/preset-env":"^7.24.4","webpack-dev-server":"^5.2.1","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","eslint-plugin-security":"^3.0.1","jest-environment-jsdom":"^29.7.0","@babel/preset-typescript":"^7.24.1","@typescript-eslint/parser":"^8.32.1","@typescript-eslint/eslint-plugin":"^8.32.1"},"_npmOperationalInternal":{"tmp":"tmp/akifast-secure-form_2.0.1_1763730990646_0.6201234199600143","host":"s3://npm-registry-packages-npm-production"}},"2.0.2":{"name":"@akinon/akifast-secure-form","version":"2.0.2","keywords":["payment","pci-dss","secure-form","iframe","akinon"],"author":{"name":"Akinon"},"license":"ISC","_id":"@akinon/akifast-secure-form@2.0.2","maintainers":[{"name":"akinon","email":"dev@akinon.com"}],"homepage":"https://bitbucket.org/akinonteam/akipay_secure_form_library#readme","bugs":{"url":"https://bitbucket.org/akinonteam/akipay_secure_form_library/issues"},"dist":{"shasum":"1dc39eabb084d533943afa49262b07729c861b5d","tarball":"https://registry.npmjs.org/@akinon/akifast-secure-form/-/akifast-secure-form-2.0.2.tgz","fileCount":38,"integrity":"sha512-3HK2lB+qNJMVJnuIgBVdp+/DrXR5z0yogbizMKIA97l16BIR0vO90WCmJGM/oCx52/57AKCIOnwXlquqKa+YHQ==","signatures":[{"sig":"MEQCIBDjB6daXmE9mLR0M8Tvu5kkN3nEjter95fuQFG6NEh+AiB1MQ3+7Pt+yxv7is7+eT+Z8JTos60OtctGBDlXOJ9MjA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":345386},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","browser":"dist/index.umd.js","engines":{"npm":">=9.0.0","node":">=18.17.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","browser":"./dist/index.umd.js","require":"./dist/index.js"}},"gitHead":"d364cb67bd2b8d51665f00720c6da1e16e91f960","scripts":{"dev":"NODE_ENV=development webpack serve --config webpack.config.js","lint":"eslint 'src/**/*.{ts,tsx}'","test":"jest --clearCache && jest","build":"npm run clean:dist && npm run build:webpack && npm run build:types","format":"prettier --check .","prepare":"husky","lint:fix":"eslint 'src/**/*.{ts,tsx}' --fix","prebuild":"npm run clean:dist","clean:dist":"rm -rf dist","format:fix":"prettier --write .","build:types":"tsc --project tsconfig.build.json","build:webpack":"NODE_ENV=production webpack --config webpack.config.cjs","release:major":"npm version major && npm publish","release:minor":"npm version minor && npm publish","release:patch":"npm version patch && npm publish","test:coverage":"jest --clearCache && jest --coverage","prepublishOnly":"npm run test && npm run build && npm run lint"},"_npmUser":{"name":"akinon","email":"dev@akinon.com"},"repository":{"url":"git+https://bitbucket.org/akinonteam/akipay_secure_form_library.git","type":"git"},"_npmVersion":"11.6.2","description":"Akifast Secure Form Library. This library allows clients to create payment forms within their styles. By using this form clients are also stay in secure field of PCI-DSS","directories":{},"lint-staged":{"src/**/*.{ts,tsx}":["eslint --fix","prettier --write"]},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.1.7","dotenv":"^16.5.0","eslint":"^9.26.0","rimraf":"^6.0.1","ts-jest":"^29.4.0","webpack":"^5.88.0","prettier":"^3.5.3","cross-env":"^7.0.3","ts-loader":"^9.5.0","@eslint/js":"^9.34.0","typescript":"^5.3.0","@babel/core":"^7.24.4","@types/jest":"^30.0.0","@types/node":"^24.0.13","@types/uuid":"^9.0.8","lint-staged":"^16.0.0","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","concurrently":"^8.2.2","ignore-loader":"^0.1.2","webpack-merge":"^6.0.1","@babel/preset-env":"^7.24.4","webpack-dev-server":"^5.2.1","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","eslint-plugin-security":"^3.0.1","jest-environment-jsdom":"^29.7.0","@babel/preset-typescript":"^7.24.1","@typescript-eslint/parser":"^8.32.1","@typescript-eslint/eslint-plugin":"^8.32.1"},"_npmOperationalInternal":{"tmp":"tmp/akifast-secure-form_2.0.2_1763973364787_0.36334091305814886","host":"s3://npm-registry-packages-npm-production"}},"2.0.3":{"name":"@akinon/akifast-secure-form","version":"2.0.3","type":"module","description":"Akifast Secure Form Library. This library allows clients to create payment forms within their styles. By using this form clients are also stay in secure field of PCI-DSS","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","browser":"dist/index.umd.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js","browser":"./dist/index.umd.js"}},"engines":{"node":">=18.17.0","npm":">=9.0.0"},"scripts":{"test":"jest --clearCache && jest","test:coverage":"jest --clearCache && jest --coverage","build:webpack":"NODE_ENV=production webpack --config webpack.config.cjs","build:types":"tsc --project tsconfig.build.json","build":"npm run clean:dist && npm run build:webpack && npm run build:types","dev":"NODE_ENV=development webpack serve --config webpack.config.js","prepublishOnly":"npm run test && npm run build && npm run lint","release:patch":"npm version patch && npm publish","release:minor":"npm version minor && npm publish","release:major":"npm version major && npm publish","lint":"eslint 'src/**/*.{ts,tsx}'","lint:fix":"eslint 'src/**/*.{ts,tsx}' --fix","format":"prettier --check .","format:fix":"prettier --write .","clean:dist":"rm -rf dist","prebuild":"npm run clean:dist","prepare":"husky"},"devDependencies":{"@babel/core":"^7.24.4","@babel/preset-env":"^7.24.4","@babel/preset-typescript":"^7.24.1","@eslint/js":"^9.34.0","@types/jest":"^30.0.0","@types/node":"^24.0.13","@types/uuid":"^9.0.8","@typescript-eslint/eslint-plugin":"^8.32.1","@typescript-eslint/parser":"^8.32.1","babel-loader":"^9.1.3","concurrently":"^8.2.2","cross-env":"^7.0.3","dotenv":"^16.5.0","eslint":"^9.26.0","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.4.0","eslint-plugin-security":"^3.0.1","husky":"^9.1.7","ignore-loader":"^0.1.2","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","lint-staged":"^16.0.0","prettier":"^3.5.3","rimraf":"^6.0.1","ts-jest":"^29.4.0","ts-loader":"^9.5.0","typescript":"^5.3.0","webpack":"^5.88.0","webpack-cli":"^5.1.4","webpack-dev-server":"^5.2.3","webpack-merge":"^6.0.1"},"keywords":["payment","pci-dss","secure-form","iframe","akinon"],"repository":{"type":"git","url":"git+https://bitbucket.org/akinonteam/akipay_secure_form_library.git"},"lint-staged":{"src/**/*.{ts,tsx}":["eslint --fix","prettier --write"]},"author":{"name":"Akinon"},"license":"ISC","bugs":{"url":"https://bitbucket.org/akinonteam/akipay_secure_form_library/issues"},"gitHead":"ef1fef59399b26e619c95f58833a9b016562e4d9","homepage":"https://bitbucket.org/akinonteam/akipay_secure_form_library#readme","_id":"@akinon/akifast-secure-form@2.0.3","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-U+5flrkkzm2mDpnZ3SPXitGp0y26MH3koGSjPBmhHPF6x3Mq9BCRN0FLXbT3oy1iTD0P8x3DgHtbqB5fcVLNAQ==","shasum":"1b4eb0ce336bd76233ddb36a8b32892f21364031","tarball":"https://registry.npmjs.org/@akinon/akifast-secure-form/-/akifast-secure-form-2.0.3.tgz","fileCount":38,"unpackedSize":345863,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEhPQcFT0InPqEIqvLmdwNAH3ZCPqzkdw9MIAj0z0TrFAiEAo1hJSifMNVZ/KyBQwrsqPMnIbKih9FEwxrw6lcYe+X0="}]},"_npmUser":{"name":"akinon","email":"dev@akinon.com"},"directories":{},"maintainers":[{"name":"akinon","email":"dev@akinon.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/akifast-secure-form_2.0.3_1773671071005_0.10871689743643831"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-08T08:27:32.691Z","modified":"2026-03-16T14:24:31.280Z","1.0.0":"2025-07-08T08:27:32.959Z","1.0.1":"2025-07-08T08:37:34.440Z","1.0.4":"2025-08-25T21:51:35.194Z","1.0.6":"2025-08-27T07:36:09.605Z","2.0.0":"2025-11-20T08:26:07.823Z","2.0.1":"2025-11-21T13:16:30.871Z","2.0.2":"2025-11-24T08:36:05.221Z","2.0.3":"2026-03-16T14:24:31.165Z"},"bugs":{"url":"https://bitbucket.org/akinonteam/akipay_secure_form_library/issues"},"author":{"name":"Akinon"},"license":"ISC","homepage":"https://bitbucket.org/akinonteam/akipay_secure_form_library#readme","keywords":["payment","pci-dss","secure-form","iframe","akinon"],"repository":{"type":"git","url":"git+https://bitbucket.org/akinonteam/akipay_secure_form_library.git"},"description":"Akifast Secure Form Library. This library allows clients to create payment forms within their styles. By using this form clients are also stay in secure field of PCI-DSS","maintainers":[{"name":"akinon","email":"dev@akinon.com"}],"readme":"# @akinon/akifast-secure-form\n\n**A comprehensive PCI-DSS compliant payment form library for secure card data collection in web applications.**\n\n[![npm version](https://img.shields.io/npm/v/@akinon/akifast-secure-form.svg)](https://www.npmjs.com/package/@akinon/akifast-secure-form)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue.svg)](https://www.typescriptlang.org/)\n[![License: ISC](https://img.shields.io/badge/License-ISC-yellow.svg)](https://opensource.org/licenses/ISC)\n\n## 📚 Table of Contents\n\n- [Overview](#overview)\n- [Features](#features)\n- [Installation](#installation)\n- [Two Implementation Approaches](#two-implementation-approaches)\n- [SecurePaymentForm (Single Iframe)](#securepaymentform-single-iframe)\n- [SecurePaymentFields (Multiple Iframes)](#securepaymentfields-multiple-iframes)\n- [Security](#security)\n- [TypeScript Support](#typescript-support)\n- [Browser Support](#browser-support)\n- [Migration Guide](#migration-guide)\n- [Troubleshooting](#troubleshooting)\n\n---\n\n## Overview\n\n`@akinon/akifast-secure-form` is a production-ready payment form library designed to help merchants collect card data securely without sensitive information touching their servers. Built with TypeScript and following PCI-DSS security standards, it provides two flexible implementation approaches to suit different use cases.\n\n### Why Use This Library?\n\n✅ **PCI-DSS Compliant** - Sensitive card data never touches your servers  \n✅ **Two Flexible Approaches** - Choose between single iframe or individual field iframes  \n✅ **Full TypeScript Support** - Comprehensive type definitions with JSDoc  \n✅ **Event-Driven Architecture** - Type-safe event subscriptions  \n✅ **Customizable Styling** - Full control over form appearance  \n✅ **Automatic Font Sync** - Seamlessly matches your site's typography  \n✅ **Input Validation** - Real-time validation with custom error messages  \n✅ **BIN Detection** - Automatic card brand detection  \n✅ **Production Ready** - Used in production by Akinon clients\n\n---\n\n## Features\n\n### Core Security Features\n\n- **Iframe Isolation**: Card data is processed in secure, isolated iframes\n- **Origin Validation**: Strict origin checking prevents XSS attacks\n- **PostMessage Communication**: Secure cross-origin communication\n- **No Data Leakage**: Card details never exposed to parent page JavaScript\n- **CSP Support**: Content Security Policy headers for additional protection\n\n### Developer Experience\n\n- **TypeScript First**: Written in TypeScript with full type definitions\n- **Event System**: Comprehensive event system for all form interactions\n- **Custom Validation**: Define custom validation rules and error messages\n- **Dynamic Styling**: Apply styles programmatically or via configuration\n- **Font Management**: Automatic detection and synchronization of web fonts\n- **Automatic Resizing**: Iframe height adjusts automatically to content\n\n### Payment Features\n\n- **Multiple Card Types**: Visa, Mastercard, American Express, and more\n- **BIN Lookup**: Automatic card brand detection from first 6-8 digits\n- **Card Tokenization**: Secure token generation for payment processing\n- **Provider Tokenization**: Support for payment provider-specific tokenization (e.g., Tap)\n- **Input Masking**: Automatic formatting for card numbers, expiry dates\n- **CVV Protection**: Built-in secret field support with toggle visibility\n\n---\n\n## Installation\n\n### NPM\n\n```bash\nnpm install @akinon/akifast-secure-form\n```\n\n### Yarn\n\n```bash\nyarn add @akinon/akifast-secure-form\n```\n\n### Requirements\n\n- Node.js >= 18.17.0\n- Modern browser with ES6+ support\n- iframe-enabled environment\n\n---\n\n## Two Implementation Approaches\n\nThis library offers two distinct approaches for integrating secure payment forms:\n\n| Feature | SecurePaymentForm | SecurePaymentFields |\n|---------|------------------|---------------------|\n| **Iframe Structure** | Single iframe containing entire form | Multiple iframes, one per field |\n| **Use Case** | Complete form solutions, simple integration | Fine-grained control, custom layouts |\n| **Styling Flexibility** | Form-level styling | Individual field-level styling |\n| **DOM Integration** | Single container element | Multiple container elements |\n| **Event Granularity** | Form-level events | Field-level events |\n| **Best For** | Checkout pages, simple forms | Complex UIs, custom designs |\n\n---\n\n## SecurePaymentForm (Single Iframe)\n\n### Overview\n\n`SecurePaymentForm` (also available as `AkifastSecureForm`) renders the entire payment form inside a single iframe. This approach is ideal for straightforward implementations where you want a complete, self-contained payment form.\n\n### Quick Start\n\n```typescript\nimport { SecurePaymentForm } from '@akinon/akifast-secure-form';\n\nconst paymentForm = new SecurePaymentForm({\n  iframeHostUrl: 'https://secure-form.example.com',\n  publicKeyToken: 'pk_test_your_public_key_here',\n  iframeContainerId: 'payment-form-container',\n  lang: 'tr', // optional, defaults to 'tr'\n  formFields: {\n    groups: [\n      {\n        direction: 'column',\n        fields: [\n          {\n            name: 'cardNumber',\n            type: 'card',\n            label: 'Kart Numarası',\n            placeholder: '1234 5678 9012 3456',\n            style: {\n              width: '100%',\n              padding: '12px 16px',\n              fontSize: '16px',\n              border: '2px solid #e2e8f0',\n              borderRadius: '8px'\n            }\n          },\n          {\n            name: 'cardHolder',\n            type: 'cardHolder',\n            label: 'Kart Üzerindeki İsim',\n            placeholder: 'JOHN DOE'\n          },\n          {\n            name: 'expiryMonth',\n            type: 'monthText',\n            label: 'Ay',\n            placeholder: '12'\n          },\n          {\n            name: 'expiryYear',\n            type: 'yearText',\n            label: 'Yıl',\n            placeholder: '25'\n          },\n          {\n            name: 'cvv',\n            type: 'cvv',\n            label: 'CVV',\n            placeholder: '123',\n            secret: true,\n            showSecretToggle: true\n          }\n        ]\n      }\n    ]\n  }\n});\n\n// Initialize the form\npaymentForm.init();\n\n// Listen for events\npaymentForm.onReady(() => {\n  console.log('Form is ready');\n});\n\npaymentForm.onTokenizeSuccess((response) => {\n  const { merchant_card_token, masked_card_number } = response.data;\n  console.log('Token:', merchant_card_token);\n  console.log('Masked Card:', masked_card_number);\n  // Send token to your backend for payment processing\n});\n\n// Trigger tokenization\ndocument.getElementById('pay-button').addEventListener('click', () => {\n  paymentForm.tokenize();\n});\n```\n\n### Configuration Options\n\n#### Constructor Parameters\n\n```typescript\ninterface IAkifastSecureForm {\n  iframeHostUrl: string;        // Required: HPP server URL\n  publicKeyToken: string;        // Required: Your public API key\n  iframeContainerId: string;     // Required: Container element ID\n  formFields: IFieldset;         // Required: Form structure definition\n  lang?: string;                 // Optional: Language code (default: 'tr')\n  baseStyles?: {                 // Optional: Global iframe styles\n    [selector: string]: Partial<CSSStyleDeclaration>;\n  };\n}\n```\n\n#### Field Types\n\n| Type | Description | Validation |\n|------|-------------|------------|\n| `card` | Card number input | Luhn algorithm, brand detection |\n| `cvv` | Security code | 3-4 digits |\n| `cardHolder` | Full cardholder name | String validation |\n| `firstname` | First name only | String validation |\n| `lastname` | Last name only | String validation |\n| `expiryDate` | MM/YY combined (masked input) | Date validation |\n| `expiryDateText` | MM/YY combined (text inputs) | Date validation |\n| `monthText` | Expiry month (select/input) | 01-12 |\n| `yearText` | Expiry year (select/input) | Current year + range |\n\n#### Field Configuration\n\n```typescript\ninterface IFlatField {\n  name: string;                              // Required: Unique field identifier\n  type: IFieldType;                          // Required: Field type from table above\n  label: string;                             // Required: Display label\n  placeholder?: string;                      // Optional: Placeholder text\n  style?: Partial<CSSStyleDeclaration>;      // Optional: Field-specific CSS\n  labelStyle?: 'normal' | 'normal-animated' | 'border' | 'border-animated'; // Optional\n  secret?: boolean;                          // Optional: Hide input (for CVV)\n  showSecretToggle?: boolean;                // Optional: Show/hide toggle button\n  maxLength?: number;                        // Optional: Max character length\n  minLength?: number;                        // Optional: Min character length\n  disabled?: boolean;                        // Optional: Disable field\n  disabledValidationErrors?: boolean;        // Optional: Suppress error messages\n  validationMessages?: {                     // Optional: Custom validation messages\n    required?: string;\n    invalid?: string;\n    min?: string;\n    max?: string;\n  };\n  customProperties?: {                       // Optional: For expiryDate field\n    year?: { /* year field config */ };\n    month?: { /* month field config */ };\n  };\n}\n```\n\n### Field Validation Rules\n\n**Conflicting Field Combinations (will throw error):**\n\n- ❌ `cardHolder` + (`firstname` OR `lastname`)\n- ❌ `expiryDate` + `expiryDateText`\n- ❌ (`expiryDate` OR `expiryDateText`) + (`monthText` OR `yearText`)\n- ❌ Duplicate field types in the same form\n\n### Event System\n\n#### Lifecycle Events\n\n```typescript\n// Form ready\npaymentForm.onReady((data: IReadyEvent) => {\n  console.log('Form is ready for user interaction');\n});\n```\n\n#### Validation Events\n\n```typescript\n// Form becomes valid\npaymentForm.onValid((data: IValidEvent) => {\n  console.log('All fields valid:', data.data);\n  document.getElementById('pay-button').disabled = false;\n});\n\n// Form becomes invalid\npaymentForm.onInvalid((data: IInvalidEvent) => {\n  console.log('Invalid fields:', data.data);\n  document.getElementById('pay-button').disabled = true;\n});\n\n// Field loses focus\npaymentForm.onBlur((data: IBlurEvent) => {\n  console.log(`Field ${data.fieldType} lost focus`);\n  console.log('Field state:', data.fieldState);\n});\n```\n\n#### Card Detection Events\n\n```typescript\n// Valid BIN entered (first 6-8 digits)\npaymentForm.onBinEntered((data: IBinEnteredEvent) => {\n  console.log('Card brand:', data.data.niceType); // e.g., \"Visa\"\n  console.log('Card type:', data.data.cardType);  // e.g., \"visa\"\n  console.log('BIN:', data.data.binNumber);\n  // Update UI with card brand logo\n});\n\n// Invalid BIN entered\npaymentForm.onInvalidBinEntered((data: IInvalidBinEnteredEvent) => {\n  console.log('Invalid card number detected');\n});\n\n// BIN lookup failed\npaymentForm.onBinNotFound((data: IBinNotFoundEvent) => {\n  console.log('Could not determine card brand');\n});\n```\n\n#### Tokenization Events\n\n```typescript\n// Tokenization success\npaymentForm.onTokenizeSuccess((data: ITokenizeSuccessEvent) => {\n  const {\n    merchant_card_token,  // Use this token for payment\n    masked_card_number,   // e.g., \"1234 56** **** 7890\"\n    trace_id              // For tracking/debugging\n  } = data.data;\n  \n  // Send to your backend\n  processPayment(merchant_card_token);\n});\n\n// Tokenization error\npaymentForm.onTokenizeError((data: ITokenizeErrorEvent) => {\n  console.error('Tokenization failed:', data.message);\n  showErrorToUser(data.message);\n});\n\n// Security violation detected\npaymentForm.onSecurityViolation((data: ISecurityViolationEvent) => {\n  console.warn('Security violation:', data);\n  // Log security incident\n});\n```\n\n#### Payment Provider Tokenization\n\n```typescript\n// Provider-specific tokenization success (e.g., Tap)\npaymentForm.onPaymentProviderTokenizationSuccess((data) => {\n  const {\n    token,\n    masked_card_number,\n    payment_system_code,\n    tokenization_type\n  } = data.data;\n  \n  console.log(`${payment_system_code} token:`, token);\n});\n\n// Provider tokenization error\npaymentForm.onPaymentProviderTokenizationError((data) => {\n  console.error('Provider tokenization failed:', data.message);\n});\n```\n\n### API Methods\n\n#### `init(): void`\n\nInitializes the secure form iframe and mounts it to the DOM.\n\n```typescript\npaymentForm.init();\n```\n\n#### `tokenize(): void`\n\nTriggers the card tokenization process. Listen for success/error with event handlers.\n\n```typescript\ndocument.getElementById('pay-button').onclick = () => {\n  paymentForm.tokenize();\n};\n```\n\n#### `paymentProviderTokenization(options): void`\n\nRequests tokenization from a payment provider (e.g., Tap for Apple Pay).\n\n```typescript\npaymentForm.paymentProviderTokenization({\n  paymentSystemCode: 'TAP',\n  tokenizationType: 'TAP_ENCRYPTION'\n});\n```\n\n#### `updateFontFamily(): void`\n\nManually syncs the current page's fonts with the iframe.\n\n```typescript\npaymentForm.updateFontFamily();\n```\n\n#### `setFontFamily(options): void`\n\nSets a specific font family for the iframe.\n\n```typescript\npaymentForm.setFontFamily({\n  fontFamily: \"'Inter', -apple-system, sans-serif\",\n  stylesheetUrls: [\n    'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'\n  ],\n  fontFaceRules: [\n    `@font-face {\n      font-family: 'CustomFont';\n      src: url('https://cdn.example.com/font.woff2') format('woff2');\n      font-weight: 400;\n      font-display: swap;\n    }`\n  ]\n});\n```\n\n#### `destroy(): void`\n\nCleans up resources, removes event listeners, and destroys the iframe.\n\n```typescript\nwindow.addEventListener('beforeunload', () => {\n  paymentForm.destroy();\n});\n```\n\n### Styling\n\n#### Global Styles (baseStyles)\n\nApply styles to all elements in the iframe:\n\n```typescript\nconst paymentForm = new SecurePaymentForm({\n  // ... other options\n  baseStyles: {\n    body: {\n      fontFamily: \"'Inter', sans-serif\",\n      fontSize: '16px',\n      color: '#1a202c',\n      backgroundColor: '#ffffff',\n      padding: '20px'\n    },\n    input: {\n      borderRadius: '8px',\n      border: '2px solid #e2e8f0',\n      padding: '12px 16px',\n      fontSize: '16px',\n      transition: 'border-color 0.2s ease',\n      backgroundColor: '#ffffff'\n    },\n    'input:focus': {\n      borderColor: '#3b82f6',\n      outline: 'none',\n      boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)'\n    },\n    label: {\n      fontSize: '14px',\n      fontWeight: '500',\n      color: '#4a5568',\n      marginBottom: '6px'\n    }\n  }\n});\n```\n\n#### Field-Specific Styles\n\n```typescript\n{\n  name: 'cardNumber',\n  type: 'card',\n  label: 'Card Number',\n  style: {\n    width: '100%',\n    padding: '14px 18px',\n    fontSize: '18px',\n    fontWeight: '500',\n    border: '2px solid #cbd5e0',\n    borderRadius: '12px',\n    backgroundColor: '#f7fafc',\n    color: '#2d3748',\n    transition: 'all 0.2s ease'\n  }\n}\n```\n\n#### Label Styles\n\nFour built-in label animation styles:\n\n```typescript\n// Static label above field\n{ labelStyle: 'normal' }\n\n// Label animates above field on focus/fill\n{ labelStyle: 'normal-animated' }\n\n// Label inside border (Material Design style)\n{ labelStyle: 'border' }\n\n// Label animates to border on focus/fill (Material Design animated)\n{ labelStyle: 'border-animated' }\n```\n\n### Font Management\n\n#### Automatic Font Synchronization\n\nFonts are automatically detected and synchronized from:\n\n- Google Fonts\n- Adobe Fonts (Typekit)\n- Font Awesome\n- Custom @font-face rules\n- System fonts\n\n```html\n<!-- These fonts are automatically synced to the iframe -->\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n  @font-face {\n    font-family: 'CustomFont';\n    src: url('/fonts/custom.woff2') format('woff2');\n  }\n  \n  body {\n    font-family: 'Inter', sans-serif;\n  }\n</style>\n```\n\n#### Dynamic Font Changes\n\nFont changes are automatically detected via MutationObserver when:\n\n- CSS files are loaded/unloaded\n- Style attributes change\n- CSS classes affecting fonts are modified\n\n```typescript\n// Fonts will auto-sync when this happens:\ndocument.body.style.fontFamily = \"'Roboto', sans-serif\";\n```\n\n---\n\n## SecurePaymentFields (Multiple Iframes)\n\n### Overview\n\n`SecurePaymentFields` renders each payment field in its own isolated iframe. This approach provides maximum flexibility and control, allowing you to:\n\n- Position fields anywhere in your layout\n- Apply individual styling to each field\n- Handle events at the field level\n- Create completely custom payment UIs\n\n### Quick Start\n\n```typescript\nimport { SecurePaymentFields } from '@akinon/akifast-secure-form';\n\n// Initialize the payment form instance\nconst paymentForm = SecurePaymentFields({\n  iframeHostUrl: 'https://secure-form.example.com',\n  publicKeyToken: 'pk_test_your_public_key_here',\n  locale: 'tr' // optional\n});\n\n// Create individual fields\nconst cardNumber = paymentForm.createElement('cardNumber', {\n  placeholder: '1234 5678 9012 3456',\n  style: {\n    base: {\n      fontSize: '16px',\n      color: '#2d3748',\n      '::placeholder': {\n        color: '#a0aec0'\n      }\n    },\n    invalid: {\n      color: '#e53e3e',\n      borderColor: '#fc8181'\n    },\n    complete: {\n      borderColor: '#48bb78'\n    }\n  },\n  classes: {\n    base: 'secure-field',\n    focus: 'secure-field--focus',\n    invalid: 'secure-field--invalid',\n    complete: 'secure-field--complete'\n  }\n});\n\nconst cardExpiry = paymentForm.createElement('cardExpiry', {\n  placeholder: 'MM / YY',\n  useExpirySelect: false // true for dropdown, false for input\n});\n\nconst cardCvv = paymentForm.createElement('cardCvv', {\n  placeholder: '123'\n});\n\nconst cardHolder = paymentForm.createElement('cardHolder', {\n  placeholder: 'JOHN DOE'\n});\n\n// Mount fields to DOM elements\ncardNumber.mount('#card-number-element');\ncardExpiry.mount('#card-expiry-element');\ncardCvv.mount('#card-cvv-element');\ncardHolder.mount('#card-holder-element');\n\n// Field-level events\ncardNumber.on('change', (state) => {\n  console.log('Card number changed:', state);\n  if (state.brand) {\n    updateCardBrandIcon(state.brand);\n  }\n});\n\n// Form-level events (fires for any field)\npaymentForm.on('change', (fieldType, state) => {\n  console.log(`${fieldType} changed:`, state);\n});\n\n// Tokenization\ndocument.getElementById('pay-button').addEventListener('click', async () => {\n  try {\n    const result = await paymentForm.tokenize();\n    console.log('Token:', result);\n    // Send to backend\n  } catch (error) {\n    console.error('Tokenization failed:', error);\n  }\n});\n```\n\n### HTML Structure\n\n```html\n<form id=\"payment-form\">\n  <div class=\"form-row\">\n    <label for=\"card-number-element\">Card Number</label>\n    <div id=\"card-number-element\" class=\"field-container\"></div>\n  </div>\n  \n  <div class=\"form-row\">\n    <label for=\"card-holder-element\">Cardholder Name</label>\n    <div id=\"card-holder-element\" class=\"field-container\"></div>\n  </div>\n  \n  <div class=\"form-row\">\n    <div class=\"form-col\">\n      <label for=\"card-expiry-element\">Expiry</label>\n      <div id=\"card-expiry-element\" class=\"field-container\"></div>\n    </div>\n    \n    <div class=\"form-col\">\n      <label for=\"card-cvv-element\">CVV</label>\n      <div id=\"card-cvv-element\" class=\"field-container\"></div>\n    </div>\n  </div>\n  \n  <button type=\"submit\" id=\"pay-button\">Pay Now</button>\n</form>\n```\n\n### Configuration\n\n#### PaymentForm Constructor\n\n```typescript\ninterface PaymentFieldConfig {\n  iframeHostUrl: string;    // Required: HPP server URL\n  publicKeyToken: string;   // Required: Your public API key\n  locale?: string;          // Optional: Language code\n}\n```\n\n#### Field Types\n\n```typescript\ntype FieldType = 'cardNumber' | 'cardExpiry' | 'cardCvv' | 'cardHolder';\n```\n\n#### Field Options\n\n```typescript\ninterface FieldOptions {\n  placeholder?: string;\n  useExpirySelect?: boolean;  // Only for cardExpiry - use dropdowns instead of input\n  \n  // Styling via CSS properties (applied to iframe input)\n  style?: {\n    base?: CSSProperties;     // Default state\n    complete?: CSSProperties; // When field is complete\n    empty?: CSSProperties;    // When field is empty\n    invalid?: CSSProperties;  // When field is invalid\n    focus?: CSSProperties;    // When field is focused\n  };\n  \n  // Styling via CSS classes (applied to container element)\n  classes?: {\n    base?: string;\n    complete?: string;\n    empty?: string;\n    invalid?: string;\n    focus?: string;\n  };\n}\n```\n\n### Styling Approaches\n\n#### Approach 1: CSS Classes (Recommended)\n\nApply classes to the container element based on field state:\n\n```typescript\nconst cardNumber = paymentForm.createElement('cardNumber', {\n  classes: {\n    base: 'secure-field',\n    focus: 'is-focused',\n    invalid: 'has-error',\n    complete: 'is-complete',\n    empty: 'is-empty'\n  }\n});\n```\n\n```css\n.secure-field {\n  border: 2px solid #e2e8f0;\n  border-radius: 8px;\n  padding: 12px;\n  transition: all 0.2s ease;\n}\n\n.secure-field.is-focused {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.secure-field.has-error {\n  border-color: #ef4444;\n}\n\n.secure-field.is-complete {\n  border-color: #10b981;\n}\n\n.secure-field iframe {\n  border: none;\n  width: 100%;\n  height: 40px;\n}\n```\n\n#### Approach 2: Direct Styles\n\nApply styles directly to the input element inside the iframe:\n\n```typescript\nconst cardNumber = paymentForm.createElement('cardNumber', {\n  style: {\n    base: {\n      fontSize: '16px',\n      fontFamily: \"'Inter', sans-serif\",\n      color: '#2d3748',\n      '::placeholder': {\n        color: '#a0aec0'\n      }\n    },\n    focus: {\n      color: '#1a202c'\n    },\n    invalid: {\n      color: '#e53e3e'\n    },\n    complete: {\n      color: '#10b981'\n    }\n  }\n});\n```\n\n#### Approach 3: Hybrid (Both Classes and Styles)\n\nCombine both approaches for maximum flexibility:\n\n```typescript\nconst cardNumber = paymentForm.createElement('cardNumber', {\n  classes: {\n    base: 'field-wrapper',\n    focus: 'field-wrapper--focus'\n  },\n  style: {\n    base: {\n      fontSize: '16px',\n      padding: '12px'\n    },\n    invalid: {\n      color: '#e53e3e'\n    }\n  }\n});\n```\n\n### Field Events\n\nEach field supports individual event listeners:\n\n```typescript\n// ready: Field iframe is loaded and ready\ncardNumber.on('ready', (state) => {\n  console.log('Card number field is ready');\n});\n\n// focus: Field received focus\ncardNumber.on('focus', (state) => {\n  console.log('Card number focused');\n});\n\n// blur: Field lost focus\ncardNumber.on('blur', (state) => {\n  console.log('Card number blurred');\n  if (!state.isValid && !state.isEmpty) {\n    showFieldError('Please enter a valid card number');\n  }\n});\n\n// change: Field value changed\ncardNumber.on('change', (state) => {\n  console.log('Card number state:', state);\n  \n  // state properties:\n  // - isValid: boolean\n  // - isEmpty: boolean\n  // - isComplete: boolean\n  // - isFocused: boolean\n  // - error?: string\n  // - brand?: string (only for cardNumber)\n  // - bin?: string (only for cardNumber, first 8 digits)\n});\n\n// validation: Field validation state changed\ncardNumber.on('validation', (state) => {\n  if (!state.isValid && !state.isEmpty) {\n    console.error('Invalid card number');\n  }\n});\n\n// binEntered: Valid BIN detected (cardNumber only)\ncardNumber.on('binEntered', (state) => {\n  console.log('BIN detected:', state.bin);\n  console.log('Card brand:', state.brand);\n  updateCardBrandIcon(state.brand);\n});\n\n// binCleared: BIN cleared (cardNumber only)\ncardNumber.on('binCleared', (state) => {\n  console.log('BIN cleared');\n  removeCardBrandIcon();\n});\n```\n\n### Form-Level Events\n\nListen to events from all fields:\n\n```typescript\n// Fires when any field changes\npaymentForm.on('change', (fieldType, state) => {\n  console.log(`${fieldType} changed:`, state);\n  updateFormValidation();\n});\n\n// Fires when any field receives focus\npaymentForm.on('focus', (fieldType, state) => {\n  console.log(`${fieldType} focused`);\n});\n\n// Fires when any field loses focus\npaymentForm.on('blur', (fieldType, state) => {\n  console.log(`${fieldType} blurred`);\n});\n\n// Fires when any field is ready\npaymentForm.on('ready', (fieldType, state) => {\n  console.log(`${fieldType} is ready`);\n});\n\n// Fires when BIN is entered in card number field\npaymentForm.on('binEntered', (fieldType, state) => {\n  if (fieldType === 'cardNumber') {\n    console.log('Card brand:', state.brand);\n  }\n});\n```\n\n### Field Methods\n\n#### `mount(selector: string | HTMLElement): void`\n\nMounts the field iframe to a DOM element.\n\n```typescript\ncardNumber.mount('#card-number-element');\n// or\ncardNumber.mount(document.getElementById('card-number-element'));\n```\n\n#### `unmount(): void`\n\nRemoves the field iframe from the DOM.\n\n```typescript\ncardNumber.unmount();\n```\n\n#### `clear(): void`\n\nClears the field value.\n\n```typescript\ncardNumber.clear();\n```\n\n#### `focus(): void`\n\nProgrammatically focuses the field.\n\n```typescript\ncardNumber.focus();\n```\n\n#### `blur(): void`\n\nProgrammatically blurs the field.\n\n```typescript\ncardNumber.blur();\n```\n\n#### `update(options: FieldOptions): void`\n\nUpdates field options (styles, placeholder, etc.).\n\n```typescript\ncardNumber.update({\n  placeholder: 'Enter your card number',\n  style: {\n    base: {\n      fontSize: '18px'\n    }\n  }\n});\n```\n\n#### `getState(): FieldState`\n\nGets the current field state.\n\n```typescript\nconst state = cardNumber.getState();\nconsole.log('Is valid:', state.isValid);\nconsole.log('Is complete:', state.isComplete);\nconsole.log('Card brand:', state.brand);\n```\n\n### Form Methods\n\n#### `createElement(fieldType: FieldType, options?: FieldOptions): SecureField`\n\nCreates a new secure field.\n\n```typescript\nconst cardNumber = paymentForm.createElement('cardNumber', {\n  placeholder: '1234 5678 9012 3456'\n});\n```\n\n#### `getField(fieldType: FieldType): SecureField | undefined`\n\nGets a field by type.\n\n```typescript\nconst cardNumber = paymentForm.getField('cardNumber');\n```\n\n#### `removeField(fieldType: FieldType): void`\n\nRemoves a field and unmounts it.\n\n```typescript\npaymentForm.removeField('cardNumber');\n```\n\n#### `tokenize(): Promise<TokenResult>`\n\nCreates a payment token from all field values.\n\n```typescript\ntry {\n  const result = await paymentForm.tokenize();\n  console.log('Token:', result.token);\n  // Send token to backend\n  await processPayment(result.token);\n} catch (error) {\n  console.error('Tokenization failed:', error.message);\n  showErrorToUser(error.message);\n}\n```\n\n#### `paymentProviderTokenization(options): Promise<TokenResult>`\n\nCreates a token using a payment provider.\n\n```typescript\ntry {\n  const result = await paymentForm.paymentProviderTokenization({\n    paymentSystemCode: 'TAP',\n    tokenizationType: 'TAP_ENCRYPTION'\n  });\n  console.log('Provider token:', result.token);\n} catch (error) {\n  console.error('Provider tokenization failed:', error);\n}\n```\n\n#### `getStates(): Map<FieldType, FieldState>`\n\nGets all field states.\n\n```typescript\nconst states = paymentForm.getStates();\nstates.forEach((state, fieldType) => {\n  console.log(`${fieldType}:`, state.isValid);\n});\n```\n\n#### `clear(): void`\n\nClears all fields.\n\n```typescript\npaymentForm.clear();\n```\n\n#### `destroy(): void`\n\nDestroys all fields and cleans up resources.\n\n```typescript\npaymentForm.destroy();\n```\n\n### Complete Example\n\n```typescript\nimport { SecurePaymentFields } from '@akinon/akifast-secure-form';\n\n// Initialize\nconst paymentForm = SecurePaymentFields({\n  iframeHostUrl: 'https://secure-form.example.com',\n  publicKeyToken: 'pk_test_abc123',\n  locale: 'tr'\n});\n\n// Create fields\nconst fields = {\n  cardNumber: paymentForm.createElement('cardNumber', {\n    placeholder: 'Card Number',\n    classes: {\n      base: 'field',\n      focus: 'field--focus',\n      invalid: 'field--error',\n      complete: 'field--success'\n    }\n  }),\n  \n  cardExpiry: paymentForm.createElement('cardExpiry', {\n    placeholder: 'MM / YY',\n    classes: { base: 'field' }\n  }),\n  \n  cardCvv: paymentForm.createElement('cardCvv', {\n    placeholder: 'CVV',\n    classes: { base: 'field' }\n  }),\n  \n  cardHolder: paymentForm.createElement('cardHolder', {\n    placeholder: 'CARDHOLDER NAME',\n    classes: { base: 'field' }\n  })\n};\n\n// Mount fields\nfields.cardNumber.mount('#card-number');\nfields.cardExpiry.mount('#card-expiry');\nfields.cardCvv.mount('#card-cvv');\nfields.cardHolder.mount('#card-holder');\n\n// Field events\nfields.cardNumber.on('binEntered', (state) => {\n  document.getElementById('card-brand').textContent = state.brand;\n});\n\n// Form validation\nconst payButton = document.getElementById('pay-button');\npaymentForm.on('change', () => {\n  const states = paymentForm.getStates();\n  const allValid = Array.from(states.values()).every(s => s.isValid);\n  payButton.disabled = !allValid;\n});\n\n// Handle payment\ndocument.getElementById('payment-form').addEventListener('submit', async (e) => {\n  e.preventDefault();\n  \n  payButton.disabled = true;\n  payButton.textContent = 'Processing...';\n  \n  try {\n    const result = await paymentForm.tokenize();\n    \n    // Send to backend\n    const response = await fetch('/api/process-payment', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ token: result.token })\n    });\n    \n    if (response.ok) {\n      window.location.href = '/success';\n    } else {\n      throw new Error('Payment failed');\n    }\n  } catch (error) {\n    alert('Payment failed: ' + error.message);\n    payButton.disabled = false;\n    payButton.textContent = 'Pay Now';\n  }\n});\n\n// Cleanup\nwindow.addEventListener('beforeunload', () => {\n  paymentForm.destroy();\n});\n```\n\n---\n\n## Security\n\n### PCI-DSS Compliance\n\nThis library helps maintain PCI-DSS compliance by:\n\n1. **Iframe Isolation**: Sensitive data is processed in iframes hosted on your secure domain\n2. **No Direct Access**: Card data never touches your client-side JavaScript\n3. **Tokenization**: Card data is converted to tokens before leaving the iframe\n4. **Origin Validation**: Strict cross-origin checks prevent data leakage\n\n### Security Best Practices\n\n#### 1. Use HTTPS Everywhere\n\n```typescript\n// ✅ GOOD\niframeHostUrl: 'https://secure-form.example.com'\n\n// ❌ BAD\niframeHostUrl: 'http://secure-form.example.com'\n```\n\n#### 2. Implement CSP Headers\n\n```http\nContent-Security-Policy: \n  default-src 'self'; \n  frame-src https://secure-form.example.com;\n  script-src 'self';\n  style-src 'self' 'unsafe-inline';\n```\n\n#### 3. Validate Tokens Server-Side\n\n```javascript\n// Never trust client-side validation\n// Always verify tokens on your backend\napp.post('/process-payment', async (req, res) => {\n  const { token } = req.body;\n  \n  // Verify token with payment provider\n  const result = await paymentProvider.verifyToken(token);\n  \n  if (!result.valid) {\n    return res.status(400).json({ error: 'Invalid token' });\n  }\n  \n  // Process payment\n});\n```\n\n#### 4. Monitor Security Events\n\n```typescript\npaymentForm.onSecurityViolation((data) => {\n  // Log to security monitoring system\n  logSecurityIncident({\n    type: 'form_violation',\n    timestamp: new Date(),\n    data: data\n  });\n});\n```\n\n---\n\n## TypeScript Support\n\nFull TypeScript support with comprehensive type definitions.\n\n### Importing Types\n\n```typescript\n// SecurePaymentForm types\nimport {\n  SecurePaymentForm,\n  IAkifastSecureForm,\n  IFieldset,\n  IGroup,\n  IFlatField,\n  IFieldType,\n  IReadyEvent,\n  IBlurEvent,\n  IValidEvent,\n  IInvalidEvent,\n  IBinEnteredEvent,\n  ITokenizeSuccessEvent,\n  ITokenizeErrorEvent,\n  IFontInfo\n} from '@akinon/akifast-secure-form';\n\n// SecurePaymentFields types\nimport {\n  SecurePaymentFields,\n  PaymentForm,\n  SecureField,\n  FieldType,\n  FieldOptions,\n  FieldState,\n  PaymentFieldConfig,\n  TokenResult,\n  EventType,\n  EventHandler\n} from '@akinon/akifast-secure-form';\n\n// Utility types (validators, formatters)\nimport {\n  validateCardNumber,\n  validateCVV,\n  formatCardNumber,\n  formatExpiry\n} from '@akinon/akifast-secure-form';\n```\n\n### Type-Safe Configuration\n\n```typescript\nconst config: IAkifastSecureForm = {\n  iframeHostUrl: 'https://secure.example.com',\n  publicKeyToken: 'pk_test_123',\n  iframeContainerId: 'form-container',\n  formFields: {\n    groups: [\n      {\n        direction: 'column',\n        fields: [\n          {\n            name: 'cardNumber',\n            type: 'card',\n            label: 'Card Number',\n            placeholder: '1234 5678 9012 3456'\n          }\n        ]\n      }\n    ]\n  }\n};\n\nconst form = new SecurePaymentForm(config);\n```\n\n### Type-Safe Event Handlers\n\n```typescript\nform.onTokenizeSuccess((response: ITokenizeSuccessEvent) => {\n  // response.data is fully typed\n  const token: string = response.data.merchant_card_token;\n  const masked: string = response.data.masked_card_number;\n});\n\nform.onBinEntered((response: IBinEnteredEvent) => {\n  const cardType: string | null = response.data.cardType;\n  const niceType: string | null = response.data.niceType;\n});\n```\n\n---\n\n## Browser Support\n\n### Minimum Requirements\n\n- **Chrome**: 80+\n- **Firefox**: 75+\n- **Safari**: 13+\n- **Edge**: 80+\n- **iOS Safari**: 13+\n- **Chrome Mobile**: 80+\n\n### Required Browser Features\n\n- ✅ ES6+ JavaScript support\n- ✅ `postMessage` API\n- ✅ `MutationObserver` API\n- ✅ `Promise` support\n- ✅ CSS Custom Properties\n- ✅ iframe support\n\n### Polyfills\n\nNo polyfills required for modern browsers. For older browsers, include:\n\n```html\n<script src=\"https://cdn.polyfill.io/v3/polyfill.min.js?features=Promise,MutationObserver\"></script>\n```\n\n---\n\n## Migration Guide\n\n### From Custom Solution to SecurePaymentForm\n\n#### Before (Custom Form)\n\n```html\n<form>\n  <input type=\"text\" name=\"cardNumber\" />\n  <input type=\"text\" name=\"cvv\" />\n  <button>Pay</button>\n</form>\n```\n\n#### After (SecurePaymentForm)\n\n```typescript\nimport { SecurePaymentForm } from '@akinon/akifast-secure-form';\n\nconst form = new SecurePaymentForm({\n  iframeHostUrl: 'https://secure.example.com',\n  publicKeyToken: 'pk_test_xxx',\n  iframeContainerId: 'payment-form',\n  formFields: {\n    groups: [{\n      direction: 'column',\n      fields: [\n        { name: 'card', type: 'card', label: 'Card Number' },\n        { name: 'cvv', type: 'cvv', label: 'CVV' }\n      ]\n    }]\n  }\n});\n\nform.init();\n```\n\n### From SecurePaymentForm to SecurePaymentFields\n\nIf you need more control, migrate to individual field iframes:\n\n#### Before (Single Iframe)\n\n```typescript\nconst form = new SecurePaymentForm({\n  iframeHostUrl: 'https://secure.example.com',\n  publicKeyToken: 'pk_test_xxx',\n  iframeContainerId: 'form',\n  formFields: { /* ... */ }\n});\n```\n\n#### After (Multiple Iframes)\n\n```typescript\nconst form = SecurePaymentFields({\n  iframeHostUrl: 'https://secure.example.com',\n  publicKeyToken: 'pk_test_xxx'\n});\n\nconst cardNumber = form.createElement('cardNumber');\ncardNumber.mount('#card-number');\n\nconst cardCvv = form.createElement('cardCvv');\ncardCvv.mount('#card-cvv');\n```\n\n---\n\n## Troubleshooting\n\n### Common Issues\n\n#### Form Not Loading\n\n**Symptoms**: Iframe doesn't appear or shows blank content\n\n**Solutions**:\n1. Verify `iframeHostUrl` is correct and accessible\n2. Check browser console for CORS errors\n3. Ensure `publicKeyToken` is valid\n4. Verify container element exists: `document.getElementById(iframeContainerId)`\n\n```typescript\n// Debug\nconsole.log('Container exists:', !!document.getElementById('form-container'));\nconsole.log('HPP URL accessible:', 'https://secure.example.com');\n```\n\n#### Events Not Firing\n\n**Symptoms**: Event handlers are not being called\n\n**Solutions**:\n1. Call `init()` before setting up event listeners (SecurePaymentForm)\n2. Call `mount()` before adding event listeners (SecurePaymentFields)\n3. Verify origin matches iframe URL\n4. Check browser console for security errors\n\n```typescript\n// ✅ CORRECT ORDER\nform.init();\nform.onReady(() => console.log('Ready'));\n\n// ❌ WRONG ORDER\nform.onReady(() => console.log('Ready'));\nform.init();\n```\n\n#### Styling Not Applied\n\n**Symptoms**: Custom styles don't appear in iframe\n\n**Solutions**:\n1. Use camelCase for CSS properties: `fontSize` not `font-size`\n2. Ensure styles don't violate iframe CSP\n3. Check browser console for style injection errors\n4. Verify selectors in `baseStyles` target correct elements\n\n```typescript\n// ✅ CORRECT\nstyle: {\n  fontSize: '16px',\n  borderRadius: '8px'\n}\n\n// ❌ INCORRECT\nstyle: {\n  'font-size': '16px',  // Use camelCase\n  border-radius: '8px'  // Use camelCase\n}\n```\n\n#### Font Synchronization Issues\n\n**Symptoms**: Iframe uses different fonts than parent page\n\n**Solutions**:\n1. Ensure fonts are loaded before calling `init()`\n2. Verify font URLs are accessible from iframe domain\n3. Call `updateFontFamily()` after dynamic font changes\n4. Use `setFontFamily()` for manual font control\n\n```typescript\n// Wait for fonts to load\ndocument.fonts.ready.then(() => {\n  form.init();\n});\n\n// Or manually set fonts\nform.setFontFamily({\n  fontFamily: \"'Inter', sans-serif\",\n  stylesheetUrls: ['https://fonts.googleapis.com/css2?family=Inter']\n});\n```\n\n#### Tokenization Fails\n\n**Symptoms**: `onTokenizeError` fires instead of `onTokenizeSuccess`\n\n**Solutions**:\n1. Verify all required fields are filled\n2. Check validation state before calling `tokenize()`\n3. Ensure network connection to HPP server\n4. Verify `publicKeyToken` is valid and not expired\n\n```typescript\n// Check form validity first\nform.onValid(() => {\n  document.getElementById('pay-button').disabled = false;\n});\n\nform.onInvalid(() => {\n  document.getElementById('pay-button').disabled = true;\n});\n```\n\n### Debugging Tips\n\n#### Enable Verbose Logging\n\n```typescript\n// Check iframe creation\nform.onReady(() => {\n  console.log('✅ Form is ready');\n});\n\n// Monitor all events\nform.onBlur((data) => {\n  console.log('Field blurred:', data);\n});\n\nform.onValid((data) => {\n  console.log('Form valid:', data);\n});\n\nform.onInvalid((data) => {\n  console.log('Form invalid:', data);\n});\n```\n\n#### Inspect Field States (SecurePaymentFields)\n\n```typescript\nconst states = paymentForm.getStates();\nstates.forEach((state, fieldType) => {\n  console.log(`${fieldType}:`, {\n    isValid: state.isValid,\n    isEmpty: state.isEmpty,\n    isComplete: state.isComplete,\n    error: state.error\n  });\n});\n```\n\n#### Network Debugging\n\nCheck browser Network tab for:\n- Iframe HTML loading correctly\n- postMessage communication working\n- No CORS errors\n- API calls to tokenization endpoint\n\n---\n\n## License\n\nISC License - Copyright (c) Akinon\n\n---\n","readmeFilename":"README.md"}