@funnelfox/billing 0.6.5-beta.0 → 0.6.5-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/chunk-index.cjs.js +20 -27
  2. package/dist/chunk-index.cjs3.js +31 -24
  3. package/dist/chunk-index.es.js +20 -27
  4. package/dist/chunk-index.es3.js +31 -24
  5. package/dist/funnelfox-billing.js +51 -51
  6. package/dist/funnelfox-billing.min.js +1 -1
  7. package/package.json +2 -2
  8. package/src/types.d.ts +4 -3
package/dist/chunk-index.es3.js CHANGED
@@ -5,9 +5,9 @@
5
5
  * @author Funnelfox
6
6
  * @license MIT
7
7
  */
8
- var template = "<div>\n <label class=\"ff-card-form-label\" for=\"cardNumberInput\">Card number</label>\n <div id=\"cardNumberInput\"></div>\n <div class=\"errorContainer\"></div>\n</div>\n<div class=\"card-form-row\">\n <div>\n <label class=\"ff-card-form-label\" for=\"expiryInput\">Expiration date</label>\n <div id=\"expiryInput\"></div>\n <div class=\"errorContainer\"></div>\n </div>\n <div>\n <label class=\"ff-card-form-label\" for=\"cvvInput\">Security code</label>\n <div id=\"cvvInput\">\n <svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"200\" height=\"200\" fill=\"transparent\"/>\n <g clip-path=\"url(#clip0_0_1)\">\n <path d=\"M157.555 23C168.279 23.0002 177 31.7394 177 42.4854V80.5889C171.946 72.0151 164.749 64.8558 156.146 59.8457H166.394V42.4854C166.393 37.6004 162.43 33.6291 157.555 33.6289H27.4453C22.5704 33.6291 18.6066 37.6004 18.6064 42.4854V59.8457H97.8535C88.9153 65.0512 81.4954 72.5771 76.4189 81.5986H18.6064V127.515C18.6066 132.4 22.5704 136.371 27.4453 136.371H75.3281C77.2742 140.177 79.6285 143.739 82.333 147H27.4453C16.7215 147 8.00019 138.261 8 127.515V42.4854C8.0002 31.7394 16.7215 23.0002 27.4453 23H157.555Z\" fill=\"#93939A\"/>\n <mask id=\"path-2-outside-1_0_1\" maskUnits=\"userSpaceOnUse\" x=\"68.5012\" y=\"52.0311\" width=\"135\" height=\"135\" fill=\"black\">\n <rect fill=\"white\" x=\"68.5012\" y=\"52.0311\" width=\"135\" height=\"135\"/>\n <path d=\"M190.242 160.457L170.136 140.351C166.533 145.552 162.023 150.063 156.821 153.666L176.927 173.772C178.693 175.538 181.088 176.53 183.585 176.53C186.082 176.53 188.477 175.538 190.242 173.772C192.008 172.007 193 169.612 193 167.115C193 164.618 192.008 162.223 190.242 160.457ZM126.436 157.901C116.955 157.901 107.688 155.089 99.8048 149.822C91.922 144.555 85.7781 137.069 82.15 128.31C78.5219 119.551 77.5727 109.913 79.4222 100.614C81.2718 91.3158 85.8371 82.7746 92.5409 76.0708C99.2447 69.367 107.786 64.8017 117.084 62.9521C126.383 61.1026 136.021 62.0518 144.78 65.6799C153.539 69.308 161.025 75.4519 166.292 83.3347C171.559 91.2175 174.371 100.485 174.371 109.966C174.371 122.679 169.32 134.871 160.331 143.861C151.341 152.85 139.149 157.901 126.436 157.901ZM163.719 109.966C163.719 102.592 161.532 95.3838 157.435 89.2527C153.339 83.1216 147.516 78.343 140.703 75.5212C133.891 72.6994 126.395 71.9611 119.162 73.3996C111.93 74.8382 105.287 78.389 100.073 83.6031C94.8591 88.8171 91.3083 95.4602 89.8697 102.692C88.4312 109.924 89.1695 117.421 91.9913 124.233C94.8131 131.046 99.5918 136.869 105.723 140.965C111.854 145.062 119.062 147.248 126.436 147.248C136.324 147.248 145.807 143.32 152.799 136.329C159.791 129.337 163.719 119.854 163.719 109.966ZM133.645 102.757C133.398 102.51 133.104 102.313 132.781 102.179C132.458 102.046 132.112 101.977 131.762 101.977C131.412 101.977 131.066 102.046 130.743 102.179C130.42 102.313 130.126 102.51 129.879 102.757L126.436 106.2L122.993 102.757C122.49 102.272 121.818 102.003 121.119 102.01C120.421 102.016 119.753 102.296 119.26 102.789C118.766 103.283 118.486 103.951 118.48 104.649C118.474 105.348 118.742 106.02 119.227 106.523L122.67 109.966L119.227 113.409C118.973 113.655 118.77 113.949 118.63 114.274C118.491 114.598 118.417 114.948 118.414 115.301C118.411 115.655 118.479 116.006 118.612 116.333C118.746 116.66 118.944 116.958 119.194 117.208C119.444 117.458 119.741 117.655 120.069 117.789C120.396 117.923 120.747 117.991 121.1 117.988C121.454 117.985 121.803 117.911 122.128 117.771C122.453 117.632 122.747 117.429 122.993 117.175L126.436 113.732L129.879 117.175C130.382 117.66 131.054 117.928 131.752 117.922C132.451 117.916 133.119 117.636 133.612 117.142C134.106 116.648 134.386 115.981 134.392 115.282C134.398 114.584 134.13 113.911 133.645 113.409L130.202 109.966L133.645 106.523C133.892 106.275 134.088 105.982 134.222 105.659C134.356 105.336 134.425 104.989 134.425 104.64C134.425 104.29 134.356 103.944 134.222 103.621C134.088 103.298 133.892 103.004 133.645 102.757ZM112.34 102.757C112.093 102.51 111.8 102.313 111.477 102.179C111.154 102.046 110.807 101.977 110.458 101.977C110.108 101.977 109.762 102.046 109.439 102.179C109.116 102.313 108.822 102.51 108.575 102.757L105.132 106.2L101.688 102.757C101.186 102.272 100.513 102.003 99.8151 102.01C99.1169 102.016 98.4489 102.296 97.9552 102.789C97.4614 103.283 97.1814 103.951 97.1753 104.649C97.1692 105.348 97.4377 106.02 97.9227 106.523L101.366 109.966L97.9227 113.409C97.6684 113.655 97.4655 113.949 97.326 114.274C97.1864 114.598 97.1129 114.948 97.1098 115.301C97.1068 115.655 97.1742 116.006 97.3081 116.333C97.442 116.66 97.6397 116.958 97.8897 117.208C98.1398 117.458 98.4371 117.655 98.7644 117.789C99.0917 117.923 99.4423 117.991 99.7959 117.988C100.15 117.985 100.499 117.911 100.824 117.771C101.149 117.632 101.443 117.429 101.688 117.175L105.132 113.732L108.575 117.175C109.077 117.66 109.75 117.928 110.448 117.922C111.146 117.916 111.814 117.636 112.308 117.142C112.802 116.648 113.082 115.981 113.088 115.282C113.094 114.584 112.826 113.911 112.34 113.409L108.897 109.966L112.34 106.523C112.588 106.275 112.784 105.982 112.918 105.659C113.052 105.336 113.121 104.989 113.121 104.64C113.121 104.29 113.052 103.944 112.918 103.621C112.784 103.298 112.588 103.004 112.34 102.757ZM151.506 109.966L154.949 106.523C155.434 106.02 155.703 105.348 155.697 104.649C155.691 103.951 155.41 103.283 154.917 102.789C154.423 102.296 153.755 102.016 153.057 102.01C152.359 102.003 151.686 102.272 151.184 102.757L147.74 106.2L144.297 102.757C143.795 102.272 143.122 102.003 142.424 102.01C141.726 102.016 141.058 102.296 140.564 102.789C140.07 103.283 139.79 103.951 139.784 104.649C139.778 105.348 140.046 106.02 140.531 106.523L143.974 109.966L140.531 113.409C140.277 113.655 140.074 113.949 139.935 114.274C139.795 114.598 139.722 114.948 139.719 115.301C139.715 115.655 139.783 116.006 139.917 116.333C140.051 116.66 140.248 116.958 140.498 117.208C140.748 117.458 141.046 117.655 141.373 117.789C141.7 117.923 142.051 117.991 142.405 117.988C142.758 117.985 143.108 117.911 143.433 117.771C143.757 117.632 144.051 117.429 144.297 117.175L147.74 113.732L151.184 117.175C151.686 117.66 152.359 117.928 153.057 117.922C153.755 117.916 154.423 117.636 154.917 117.142C155.41 116.648 155.691 115.981 155.697 115.282C155.703 114.584 155.434 113.911 154.949 113.409L151.506 109.966Z\"/>\n </mask>\n <path d=\"M190.242 160.457L170.136 140.351C166.533 145.552 162.023 150.063 156.821 153.666L176.927 173.772C178.693 175.538 181.088 176.53 183.585 176.53C186.082 176.53 188.477 175.538 190.242 173.772C192.008 172.007 193 169.612 193 167.115C193 164.618 192.008 162.223 190.242 160.457ZM126.436 157.901C116.955 157.901 107.688 155.089 99.8048 149.822C91.922 144.555 85.7781 137.069 82.15 128.31C78.5219 119.551 77.5727 109.913 79.4222 100.614C81.2718 91.3158 85.8371 82.7746 92.5409 76.0708C99.2447 69.367 107.786 64.8017 117.084 62.9521C126.383 61.1026 136.021 62.0518 144.78 65.6799C153.539 69.308 161.025 75.4519 166.292 83.3347C171.559 91.2175 174.371 100.485 174.371 109.966C174.371 122.679 169.32 134.871 160.331 143.861C151.341 152.85 139.149 157.901 126.436 157.901ZM163.719 109.966C163.719 102.592 161.532 95.3838 157.435 89.2527C153.339 83.1216 147.516 78.343 140.703 75.5212C133.891 72.6994 126.395 71.9611 119.162 73.3996C111.93 74.8382 105.287 78.389 100.073 83.6031C94.8591 88.8171 91.3083 95.4602 89.8697 102.692C88.4312 109.924 89.1695 117.421 91.9913 124.233C94.8131 131.046 99.5918 136.869 105.723 140.965C111.854 145.062 119.062 147.248 126.436 147.248C136.324 147.248 145.807 143.32 152.799 136.329C159.791 129.337 163.719 119.854 163.719 109.966ZM133.645 102.757C133.398 102.51 133.104 102.313 132.781 102.179C132.458 102.046 132.112 101.977 131.762 101.977C131.412 101.977 131.066 102.046 130.743 102.179C130.42 102.313 130.126 102.51 129.879 102.757L126.436 106.2L122.993 102.757C122.49 102.272 121.818 102.003 121.119 102.01C120.421 102.016 119.753 102.296 119.26 102.789C118.766 103.283 118.486 103.951 118.48 104.649C118.474 105.348 118.742 106.02 119.227 106.523L122.67 109.966L119.227 113.409C118.973 113.655 118.77 113.949 118.63 114.274C118.491 114.598 118.417 114.948 118.414 115.301C118.411 115.655 118.479 116.006 118.612 116.333C118.746 116.66 118.944 116.958 119.194 117.208C119.444 117.458 119.741 117.655 120.069 117.789C120.396 117.923 120.747 117.991 121.1 117.988C121.454 117.985 121.803 117.911 122.128 117.771C122.453 117.632 122.747 117.429 122.993 117.175L126.436 113.732L129.879 117.175C130.382 117.66 131.054 117.928 131.752 117.922C132.451 117.916 133.119 117.636 133.612 117.142C134.106 116.648 134.386 115.981 134.392 115.282C134.398 114.584 134.13 113.911 133.645 113.409L130.202 109.966L133.645 106.523C133.892 106.275 134.088 105.982 134.222 105.659C134.356 105.336 134.425 104.989 134.425 104.64C134.425 104.29 134.356 103.944 134.222 103.621C134.088 103.298 133.892 103.004 133.645 102.757ZM112.34 102.757C112.093 102.51 111.8 102.313 111.477 102.179C111.154 102.046 110.807 101.977 110.458 101.977C110.108 101.977 109.762 102.046 109.439 102.179C109.116 102.313 108.822 102.51 108.575 102.757L105.132 106.2L101.688 102.757C101.186 102.272 100.513 102.003 99.8151 102.01C99.1169 102.016 98.4489 102.296 97.9552 102.789C97.4614 103.283 97.1814 103.951 97.1753 104.649C97.1692 105.348 97.4377 106.02 97.9227 106.523L101.366 109.966L97.9227 113.409C97.6684 113.655 97.4655 113.949 97.326 114.274C97.1864 114.598 97.1129 114.948 97.1098 115.301C97.1068 115.655 97.1742 116.006 97.3081 116.333C97.442 116.66 97.6397 116.958 97.8897 117.208C98.1398 117.458 98.4371 117.655 98.7644 117.789C99.0917 117.923 99.4423 117.991 99.7959 117.988C100.15 117.985 100.499 117.911 100.824 117.771C101.149 117.632 101.443 117.429 101.688 117.175L105.132 113.732L108.575 117.175C109.077 117.66 109.75 117.928 110.448 117.922C111.146 117.916 111.814 117.636 112.308 117.142C112.802 116.648 113.082 115.981 113.088 115.282C113.094 114.584 112.826 113.911 112.34 113.409L108.897 109.966L112.34 106.523C112.588 106.275 112.784 105.982 112.918 105.659C113.052 105.336 113.121 104.989 113.121 104.64C113.121 104.29 113.052 103.944 112.918 103.621C112.784 103.298 112.588 103.004 112.34 102.757ZM151.506 109.966L154.949 106.523C155.434 106.02 155.703 105.348 155.697 104.649C155.691 103.951 155.41 103.283 154.917 102.789C154.423 102.296 153.755 102.016 153.057 102.01C152.359 102.003 151.686 102.272 151.184 102.757L147.74 106.2L144.297 102.757C143.795 102.272 143.122 102.003 142.424 102.01C141.726 102.016 141.058 102.296 140.564 102.789C140.07 103.283 139.79 103.951 139.784 104.649C139.778 105.348 140.046 106.02 140.531 106.523L143.974 109.966L140.531 113.409C140.277 113.655 140.074 113.949 139.935 114.274C139.795 114.598 139.722 114.948 139.719 115.301C139.715 115.655 139.783 116.006 139.917 116.333C140.051 116.66 140.248 116.958 140.498 117.208C140.748 117.458 141.046 117.655 141.373 117.789C141.7 117.923 142.051 117.991 142.405 117.988C142.758 117.985 143.108 117.911 143.433 117.771C143.757 117.632 144.051 117.429 144.297 117.175L147.74 113.732L151.184 117.175C151.686 117.66 152.359 117.928 153.057 117.922C153.755 117.916 154.423 117.636 154.917 117.142C155.41 116.648 155.691 115.981 155.697 115.282C155.703 114.584 155.434 113.911 154.949 113.409L151.506 109.966Z\" fill=\"#93939A\"/>\n <path d=\"M190.242 160.457L170.136 140.351C166.533 145.552 162.023 150.063 156.821 153.666L176.927 173.772C178.693 175.538 181.088 176.53 183.585 176.53C186.082 176.53 188.477 175.538 190.242 173.772C192.008 172.007 193 169.612 193 167.115C193 164.618 192.008 162.223 190.242 160.457ZM126.436 157.901C116.955 157.901 107.688 155.089 99.8048 149.822C91.922 144.555 85.7781 137.069 82.15 128.31C78.5219 119.551 77.5727 109.913 79.4222 100.614C81.2718 91.3158 85.8371 82.7746 92.5409 76.0708C99.2447 69.367 107.786 64.8017 117.084 62.9521C126.383 61.1026 136.021 62.0518 144.78 65.6799C153.539 69.308 161.025 75.4519 166.292 83.3347C171.559 91.2175 174.371 100.485 174.371 109.966C174.371 122.679 169.32 134.871 160.331 143.861C151.341 152.85 139.149 157.901 126.436 157.901ZM163.719 109.966C163.719 102.592 161.532 95.3838 157.435 89.2527C153.339 83.1216 147.516 78.343 140.703 75.5212C133.891 72.6994 126.395 71.9611 119.162 73.3996C111.93 74.8382 105.287 78.389 100.073 83.6031C94.8591 88.8171 91.3083 95.4602 89.8697 102.692C88.4312 109.924 89.1695 117.421 91.9913 124.233C94.8131 131.046 99.5918 136.869 105.723 140.965C111.854 145.062 119.062 147.248 126.436 147.248C136.324 147.248 145.807 143.32 152.799 136.329C159.791 129.337 163.719 119.854 163.719 109.966ZM133.645 102.757C133.398 102.51 133.104 102.313 132.781 102.179C132.458 102.046 132.112 101.977 131.762 101.977C131.412 101.977 131.066 102.046 130.743 102.179C130.42 102.313 130.126 102.51 129.879 102.757L126.436 106.2L122.993 102.757C122.49 102.272 121.818 102.003 121.119 102.01C120.421 102.016 119.753 102.296 119.26 102.789C118.766 103.283 118.486 103.951 118.48 104.649C118.474 105.348 118.742 106.02 119.227 106.523L122.67 109.966L119.227 113.409C118.973 113.655 118.77 113.949 118.63 114.274C118.491 114.598 118.417 114.948 118.414 115.301C118.411 115.655 118.479 116.006 118.612 116.333C118.746 116.66 118.944 116.958 119.194 117.208C119.444 117.458 119.741 117.655 120.069 117.789C120.396 117.923 120.747 117.991 121.1 117.988C121.454 117.985 121.803 117.911 122.128 117.771C122.453 117.632 122.747 117.429 122.993 117.175L126.436 113.732L129.879 117.175C130.382 117.66 131.054 117.928 131.752 117.922C132.451 117.916 133.119 117.636 133.612 117.142C134.106 116.648 134.386 115.981 134.392 115.282C134.398 114.584 134.13 113.911 133.645 113.409L130.202 109.966L133.645 106.523C133.892 106.275 134.088 105.982 134.222 105.659C134.356 105.336 134.425 104.989 134.425 104.64C134.425 104.29 134.356 103.944 134.222 103.621C134.088 103.298 133.892 103.004 133.645 102.757ZM112.34 102.757C112.093 102.51 111.8 102.313 111.477 102.179C111.154 102.046 110.807 101.977 110.458 101.977C110.108 101.977 109.762 102.046 109.439 102.179C109.116 102.313 108.822 102.51 108.575 102.757L105.132 106.2L101.688 102.757C101.186 102.272 100.513 102.003 99.8151 102.01C99.1169 102.016 98.4489 102.296 97.9552 102.789C97.4614 103.283 97.1814 103.951 97.1753 104.649C97.1692 105.348 97.4377 106.02 97.9227 106.523L101.366 109.966L97.9227 113.409C97.6684 113.655 97.4655 113.949 97.326 114.274C97.1864 114.598 97.1129 114.948 97.1098 115.301C97.1068 115.655 97.1742 116.006 97.3081 116.333C97.442 116.66 97.6397 116.958 97.8897 117.208C98.1398 117.458 98.4371 117.655 98.7644 117.789C99.0917 117.923 99.4423 117.991 99.7959 117.988C100.15 117.985 100.499 117.911 100.824 117.771C101.149 117.632 101.443 117.429 101.688 117.175L105.132 113.732L108.575 117.175C109.077 117.66 109.75 117.928 110.448 117.922C111.146 117.916 111.814 117.636 112.308 117.142C112.802 116.648 113.082 115.981 113.088 115.282C113.094 114.584 112.826 113.911 112.34 113.409L108.897 109.966L112.34 106.523C112.588 106.275 112.784 105.982 112.918 105.659C113.052 105.336 113.121 104.989 113.121 104.64C113.121 104.29 113.052 103.944 112.918 103.621C112.784 103.298 112.588 103.004 112.34 102.757ZM151.506 109.966L154.949 106.523C155.434 106.02 155.703 105.348 155.697 104.649C155.691 103.951 155.41 103.283 154.917 102.789C154.423 102.296 153.755 102.016 153.057 102.01C152.359 102.003 151.686 102.272 151.184 102.757L147.74 106.2L144.297 102.757C143.795 102.272 143.122 102.003 142.424 102.01C141.726 102.016 141.058 102.296 140.564 102.789C140.07 103.283 139.79 103.951 139.784 104.649C139.778 105.348 140.046 106.02 140.531 106.523L143.974 109.966L140.531 113.409C140.277 113.655 140.074 113.949 139.935 114.274C139.795 114.598 139.722 114.948 139.719 115.301C139.715 115.655 139.783 116.006 139.917 116.333C140.051 116.66 140.248 116.958 140.498 117.208C140.748 117.458 141.046 117.655 141.373 117.789C141.7 117.923 142.051 117.991 142.405 117.988C142.758 117.985 143.108 117.911 143.433 117.771C143.757 117.632 144.051 117.429 144.297 117.175L147.74 113.732L151.184 117.175C151.686 117.66 152.359 117.928 153.057 117.922C153.755 117.916 154.423 117.636 154.917 117.142C155.41 116.648 155.691 115.981 155.697 115.282C155.703 114.584 155.434 113.911 154.949 113.409L151.506 109.966Z\" stroke=\"transparent\" stroke-width=\"20\" mask=\"url(#path-2-outside-1_0_1)\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_0_1\">\n <rect width=\"200\" height=\"200\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n </div>\n <div class=\"errorContainer\"></div>\n </div>\n</div>\n<div>\n <label class=\"ff-card-form-label\" for=\"emailAddressInput\">Email</label>\n <input class=\"ff-card-form-text-input\" id=\"emailAddressInput\" placeholder=\"Email\" type=\"email\">\n <div class=\"errorContainer\"></div>\n</div>\n<div>\n <label class=\"ff-card-form-label\" for=\"cardHolderInput\">Card holder</label>\n <input class=\"ff-card-form-text-input\" id=\"cardHolderInput\" placeholder=\"Card holder\">\n <div class=\"errorContainer\"></div>\n</div>\n<div>\n <label class=\"ff-card-form-label\" for=\"countrySelectorInput\">Country</label>\n <div class=\"ff-select-wrap\">\n <select class=\"ff-card-form-text-input ff-card-form-select\" id=\"countrySelectorInput\"></select>\n <div class=\"ff-select-arrow\" aria-hidden=\"true\"></div>\n </div>\n</div>\n<div>\n <label class=\"ff-card-form-label\" for=\"postalCodeInput\">Postal code</label>\n <input class=\"ff-card-form-text-input\" id=\"postalCodeInput\" placeholder=\"Postal code\">\n</div>\n";
8
+ var template = "<div>\n <label class=\"ff-card-form-label\" for=\"cardNumberInput\">Card number</label>\n <div id=\"cardNumberInput\"></div>\n <div class=\"errorContainer\"></div>\n</div>\n<div class=\"card-form-row\">\n <div>\n <label class=\"ff-card-form-label\" for=\"expiryInput\">Expiration date</label>\n <div id=\"expiryInput\"></div>\n <div class=\"errorContainer\"></div>\n </div>\n <div>\n <label class=\"ff-card-form-label\" for=\"cvvInput\">Security code</label>\n <div id=\"cvvInput\">\n <svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"200\" height=\"200\" fill=\"transparent\"/>\n <g clip-path=\"url(#clip0_0_1)\">\n <path d=\"M157.555 23C168.279 23.0002 177 31.7394 177 42.4854V80.5889C171.946 72.0151 164.749 64.8558 156.146 59.8457H166.394V42.4854C166.393 37.6004 162.43 33.6291 157.555 33.6289H27.4453C22.5704 33.6291 18.6066 37.6004 18.6064 42.4854V59.8457H97.8535C88.9153 65.0512 81.4954 72.5771 76.4189 81.5986H18.6064V127.515C18.6066 132.4 22.5704 136.371 27.4453 136.371H75.3281C77.2742 140.177 79.6285 143.739 82.333 147H27.4453C16.7215 147 8.00019 138.261 8 127.515V42.4854C8.0002 31.7394 16.7215 23.0002 27.4453 23H157.555Z\" fill=\"#93939A\"/>\n <mask id=\"path-2-outside-1_0_1\" maskUnits=\"userSpaceOnUse\" x=\"68.5012\" y=\"52.0311\" width=\"135\" height=\"135\" fill=\"black\">\n <rect fill=\"white\" x=\"68.5012\" y=\"52.0311\" width=\"135\" height=\"135\"/>\n <path d=\"M190.242 160.457L170.136 140.351C166.533 145.552 162.023 150.063 156.821 153.666L176.927 173.772C178.693 175.538 181.088 176.53 183.585 176.53C186.082 176.53 188.477 175.538 190.242 173.772C192.008 172.007 193 169.612 193 167.115C193 164.618 192.008 162.223 190.242 160.457ZM126.436 157.901C116.955 157.901 107.688 155.089 99.8048 149.822C91.922 144.555 85.7781 137.069 82.15 128.31C78.5219 119.551 77.5727 109.913 79.4222 100.614C81.2718 91.3158 85.8371 82.7746 92.5409 76.0708C99.2447 69.367 107.786 64.8017 117.084 62.9521C126.383 61.1026 136.021 62.0518 144.78 65.6799C153.539 69.308 161.025 75.4519 166.292 83.3347C171.559 91.2175 174.371 100.485 174.371 109.966C174.371 122.679 169.32 134.871 160.331 143.861C151.341 152.85 139.149 157.901 126.436 157.901ZM163.719 109.966C163.719 102.592 161.532 95.3838 157.435 89.2527C153.339 83.1216 147.516 78.343 140.703 75.5212C133.891 72.6994 126.395 71.9611 119.162 73.3996C111.93 74.8382 105.287 78.389 100.073 83.6031C94.8591 88.8171 91.3083 95.4602 89.8697 102.692C88.4312 109.924 89.1695 117.421 91.9913 124.233C94.8131 131.046 99.5918 136.869 105.723 140.965C111.854 145.062 119.062 147.248 126.436 147.248C136.324 147.248 145.807 143.32 152.799 136.329C159.791 129.337 163.719 119.854 163.719 109.966ZM133.645 102.757C133.398 102.51 133.104 102.313 132.781 102.179C132.458 102.046 132.112 101.977 131.762 101.977C131.412 101.977 131.066 102.046 130.743 102.179C130.42 102.313 130.126 102.51 129.879 102.757L126.436 106.2L122.993 102.757C122.49 102.272 121.818 102.003 121.119 102.01C120.421 102.016 119.753 102.296 119.26 102.789C118.766 103.283 118.486 103.951 118.48 104.649C118.474 105.348 118.742 106.02 119.227 106.523L122.67 109.966L119.227 113.409C118.973 113.655 118.77 113.949 118.63 114.274C118.491 114.598 118.417 114.948 118.414 115.301C118.411 115.655 118.479 116.006 118.612 116.333C118.746 116.66 118.944 116.958 119.194 117.208C119.444 117.458 119.741 117.655 120.069 117.789C120.396 117.923 120.747 117.991 121.1 117.988C121.454 117.985 121.803 117.911 122.128 117.771C122.453 117.632 122.747 117.429 122.993 117.175L126.436 113.732L129.879 117.175C130.382 117.66 131.054 117.928 131.752 117.922C132.451 117.916 133.119 117.636 133.612 117.142C134.106 116.648 134.386 115.981 134.392 115.282C134.398 114.584 134.13 113.911 133.645 113.409L130.202 109.966L133.645 106.523C133.892 106.275 134.088 105.982 134.222 105.659C134.356 105.336 134.425 104.989 134.425 104.64C134.425 104.29 134.356 103.944 134.222 103.621C134.088 103.298 133.892 103.004 133.645 102.757ZM112.34 102.757C112.093 102.51 111.8 102.313 111.477 102.179C111.154 102.046 110.807 101.977 110.458 101.977C110.108 101.977 109.762 102.046 109.439 102.179C109.116 102.313 108.822 102.51 108.575 102.757L105.132 106.2L101.688 102.757C101.186 102.272 100.513 102.003 99.8151 102.01C99.1169 102.016 98.4489 102.296 97.9552 102.789C97.4614 103.283 97.1814 103.951 97.1753 104.649C97.1692 105.348 97.4377 106.02 97.9227 106.523L101.366 109.966L97.9227 113.409C97.6684 113.655 97.4655 113.949 97.326 114.274C97.1864 114.598 97.1129 114.948 97.1098 115.301C97.1068 115.655 97.1742 116.006 97.3081 116.333C97.442 116.66 97.6397 116.958 97.8897 117.208C98.1398 117.458 98.4371 117.655 98.7644 117.789C99.0917 117.923 99.4423 117.991 99.7959 117.988C100.15 117.985 100.499 117.911 100.824 117.771C101.149 117.632 101.443 117.429 101.688 117.175L105.132 113.732L108.575 117.175C109.077 117.66 109.75 117.928 110.448 117.922C111.146 117.916 111.814 117.636 112.308 117.142C112.802 116.648 113.082 115.981 113.088 115.282C113.094 114.584 112.826 113.911 112.34 113.409L108.897 109.966L112.34 106.523C112.588 106.275 112.784 105.982 112.918 105.659C113.052 105.336 113.121 104.989 113.121 104.64C113.121 104.29 113.052 103.944 112.918 103.621C112.784 103.298 112.588 103.004 112.34 102.757ZM151.506 109.966L154.949 106.523C155.434 106.02 155.703 105.348 155.697 104.649C155.691 103.951 155.41 103.283 154.917 102.789C154.423 102.296 153.755 102.016 153.057 102.01C152.359 102.003 151.686 102.272 151.184 102.757L147.74 106.2L144.297 102.757C143.795 102.272 143.122 102.003 142.424 102.01C141.726 102.016 141.058 102.296 140.564 102.789C140.07 103.283 139.79 103.951 139.784 104.649C139.778 105.348 140.046 106.02 140.531 106.523L143.974 109.966L140.531 113.409C140.277 113.655 140.074 113.949 139.935 114.274C139.795 114.598 139.722 114.948 139.719 115.301C139.715 115.655 139.783 116.006 139.917 116.333C140.051 116.66 140.248 116.958 140.498 117.208C140.748 117.458 141.046 117.655 141.373 117.789C141.7 117.923 142.051 117.991 142.405 117.988C142.758 117.985 143.108 117.911 143.433 117.771C143.757 117.632 144.051 117.429 144.297 117.175L147.74 113.732L151.184 117.175C151.686 117.66 152.359 117.928 153.057 117.922C153.755 117.916 154.423 117.636 154.917 117.142C155.41 116.648 155.691 115.981 155.697 115.282C155.703 114.584 155.434 113.911 154.949 113.409L151.506 109.966Z\"/>\n </mask>\n <path d=\"M190.242 160.457L170.136 140.351C166.533 145.552 162.023 150.063 156.821 153.666L176.927 173.772C178.693 175.538 181.088 176.53 183.585 176.53C186.082 176.53 188.477 175.538 190.242 173.772C192.008 172.007 193 169.612 193 167.115C193 164.618 192.008 162.223 190.242 160.457ZM126.436 157.901C116.955 157.901 107.688 155.089 99.8048 149.822C91.922 144.555 85.7781 137.069 82.15 128.31C78.5219 119.551 77.5727 109.913 79.4222 100.614C81.2718 91.3158 85.8371 82.7746 92.5409 76.0708C99.2447 69.367 107.786 64.8017 117.084 62.9521C126.383 61.1026 136.021 62.0518 144.78 65.6799C153.539 69.308 161.025 75.4519 166.292 83.3347C171.559 91.2175 174.371 100.485 174.371 109.966C174.371 122.679 169.32 134.871 160.331 143.861C151.341 152.85 139.149 157.901 126.436 157.901ZM163.719 109.966C163.719 102.592 161.532 95.3838 157.435 89.2527C153.339 83.1216 147.516 78.343 140.703 75.5212C133.891 72.6994 126.395 71.9611 119.162 73.3996C111.93 74.8382 105.287 78.389 100.073 83.6031C94.8591 88.8171 91.3083 95.4602 89.8697 102.692C88.4312 109.924 89.1695 117.421 91.9913 124.233C94.8131 131.046 99.5918 136.869 105.723 140.965C111.854 145.062 119.062 147.248 126.436 147.248C136.324 147.248 145.807 143.32 152.799 136.329C159.791 129.337 163.719 119.854 163.719 109.966ZM133.645 102.757C133.398 102.51 133.104 102.313 132.781 102.179C132.458 102.046 132.112 101.977 131.762 101.977C131.412 101.977 131.066 102.046 130.743 102.179C130.42 102.313 130.126 102.51 129.879 102.757L126.436 106.2L122.993 102.757C122.49 102.272 121.818 102.003 121.119 102.01C120.421 102.016 119.753 102.296 119.26 102.789C118.766 103.283 118.486 103.951 118.48 104.649C118.474 105.348 118.742 106.02 119.227 106.523L122.67 109.966L119.227 113.409C118.973 113.655 118.77 113.949 118.63 114.274C118.491 114.598 118.417 114.948 118.414 115.301C118.411 115.655 118.479 116.006 118.612 116.333C118.746 116.66 118.944 116.958 119.194 117.208C119.444 117.458 119.741 117.655 120.069 117.789C120.396 117.923 120.747 117.991 121.1 117.988C121.454 117.985 121.803 117.911 122.128 117.771C122.453 117.632 122.747 117.429 122.993 117.175L126.436 113.732L129.879 117.175C130.382 117.66 131.054 117.928 131.752 117.922C132.451 117.916 133.119 117.636 133.612 117.142C134.106 116.648 134.386 115.981 134.392 115.282C134.398 114.584 134.13 113.911 133.645 113.409L130.202 109.966L133.645 106.523C133.892 106.275 134.088 105.982 134.222 105.659C134.356 105.336 134.425 104.989 134.425 104.64C134.425 104.29 134.356 103.944 134.222 103.621C134.088 103.298 133.892 103.004 133.645 102.757ZM112.34 102.757C112.093 102.51 111.8 102.313 111.477 102.179C111.154 102.046 110.807 101.977 110.458 101.977C110.108 101.977 109.762 102.046 109.439 102.179C109.116 102.313 108.822 102.51 108.575 102.757L105.132 106.2L101.688 102.757C101.186 102.272 100.513 102.003 99.8151 102.01C99.1169 102.016 98.4489 102.296 97.9552 102.789C97.4614 103.283 97.1814 103.951 97.1753 104.649C97.1692 105.348 97.4377 106.02 97.9227 106.523L101.366 109.966L97.9227 113.409C97.6684 113.655 97.4655 113.949 97.326 114.274C97.1864 114.598 97.1129 114.948 97.1098 115.301C97.1068 115.655 97.1742 116.006 97.3081 116.333C97.442 116.66 97.6397 116.958 97.8897 117.208C98.1398 117.458 98.4371 117.655 98.7644 117.789C99.0917 117.923 99.4423 117.991 99.7959 117.988C100.15 117.985 100.499 117.911 100.824 117.771C101.149 117.632 101.443 117.429 101.688 117.175L105.132 113.732L108.575 117.175C109.077 117.66 109.75 117.928 110.448 117.922C111.146 117.916 111.814 117.636 112.308 117.142C112.802 116.648 113.082 115.981 113.088 115.282C113.094 114.584 112.826 113.911 112.34 113.409L108.897 109.966L112.34 106.523C112.588 106.275 112.784 105.982 112.918 105.659C113.052 105.336 113.121 104.989 113.121 104.64C113.121 104.29 113.052 103.944 112.918 103.621C112.784 103.298 112.588 103.004 112.34 102.757ZM151.506 109.966L154.949 106.523C155.434 106.02 155.703 105.348 155.697 104.649C155.691 103.951 155.41 103.283 154.917 102.789C154.423 102.296 153.755 102.016 153.057 102.01C152.359 102.003 151.686 102.272 151.184 102.757L147.74 106.2L144.297 102.757C143.795 102.272 143.122 102.003 142.424 102.01C141.726 102.016 141.058 102.296 140.564 102.789C140.07 103.283 139.79 103.951 139.784 104.649C139.778 105.348 140.046 106.02 140.531 106.523L143.974 109.966L140.531 113.409C140.277 113.655 140.074 113.949 139.935 114.274C139.795 114.598 139.722 114.948 139.719 115.301C139.715 115.655 139.783 116.006 139.917 116.333C140.051 116.66 140.248 116.958 140.498 117.208C140.748 117.458 141.046 117.655 141.373 117.789C141.7 117.923 142.051 117.991 142.405 117.988C142.758 117.985 143.108 117.911 143.433 117.771C143.757 117.632 144.051 117.429 144.297 117.175L147.74 113.732L151.184 117.175C151.686 117.66 152.359 117.928 153.057 117.922C153.755 117.916 154.423 117.636 154.917 117.142C155.41 116.648 155.691 115.981 155.697 115.282C155.703 114.584 155.434 113.911 154.949 113.409L151.506 109.966Z\" fill=\"#93939A\"/>\n <path d=\"M190.242 160.457L170.136 140.351C166.533 145.552 162.023 150.063 156.821 153.666L176.927 173.772C178.693 175.538 181.088 176.53 183.585 176.53C186.082 176.53 188.477 175.538 190.242 173.772C192.008 172.007 193 169.612 193 167.115C193 164.618 192.008 162.223 190.242 160.457ZM126.436 157.901C116.955 157.901 107.688 155.089 99.8048 149.822C91.922 144.555 85.7781 137.069 82.15 128.31C78.5219 119.551 77.5727 109.913 79.4222 100.614C81.2718 91.3158 85.8371 82.7746 92.5409 76.0708C99.2447 69.367 107.786 64.8017 117.084 62.9521C126.383 61.1026 136.021 62.0518 144.78 65.6799C153.539 69.308 161.025 75.4519 166.292 83.3347C171.559 91.2175 174.371 100.485 174.371 109.966C174.371 122.679 169.32 134.871 160.331 143.861C151.341 152.85 139.149 157.901 126.436 157.901ZM163.719 109.966C163.719 102.592 161.532 95.3838 157.435 89.2527C153.339 83.1216 147.516 78.343 140.703 75.5212C133.891 72.6994 126.395 71.9611 119.162 73.3996C111.93 74.8382 105.287 78.389 100.073 83.6031C94.8591 88.8171 91.3083 95.4602 89.8697 102.692C88.4312 109.924 89.1695 117.421 91.9913 124.233C94.8131 131.046 99.5918 136.869 105.723 140.965C111.854 145.062 119.062 147.248 126.436 147.248C136.324 147.248 145.807 143.32 152.799 136.329C159.791 129.337 163.719 119.854 163.719 109.966ZM133.645 102.757C133.398 102.51 133.104 102.313 132.781 102.179C132.458 102.046 132.112 101.977 131.762 101.977C131.412 101.977 131.066 102.046 130.743 102.179C130.42 102.313 130.126 102.51 129.879 102.757L126.436 106.2L122.993 102.757C122.49 102.272 121.818 102.003 121.119 102.01C120.421 102.016 119.753 102.296 119.26 102.789C118.766 103.283 118.486 103.951 118.48 104.649C118.474 105.348 118.742 106.02 119.227 106.523L122.67 109.966L119.227 113.409C118.973 113.655 118.77 113.949 118.63 114.274C118.491 114.598 118.417 114.948 118.414 115.301C118.411 115.655 118.479 116.006 118.612 116.333C118.746 116.66 118.944 116.958 119.194 117.208C119.444 117.458 119.741 117.655 120.069 117.789C120.396 117.923 120.747 117.991 121.1 117.988C121.454 117.985 121.803 117.911 122.128 117.771C122.453 117.632 122.747 117.429 122.993 117.175L126.436 113.732L129.879 117.175C130.382 117.66 131.054 117.928 131.752 117.922C132.451 117.916 133.119 117.636 133.612 117.142C134.106 116.648 134.386 115.981 134.392 115.282C134.398 114.584 134.13 113.911 133.645 113.409L130.202 109.966L133.645 106.523C133.892 106.275 134.088 105.982 134.222 105.659C134.356 105.336 134.425 104.989 134.425 104.64C134.425 104.29 134.356 103.944 134.222 103.621C134.088 103.298 133.892 103.004 133.645 102.757ZM112.34 102.757C112.093 102.51 111.8 102.313 111.477 102.179C111.154 102.046 110.807 101.977 110.458 101.977C110.108 101.977 109.762 102.046 109.439 102.179C109.116 102.313 108.822 102.51 108.575 102.757L105.132 106.2L101.688 102.757C101.186 102.272 100.513 102.003 99.8151 102.01C99.1169 102.016 98.4489 102.296 97.9552 102.789C97.4614 103.283 97.1814 103.951 97.1753 104.649C97.1692 105.348 97.4377 106.02 97.9227 106.523L101.366 109.966L97.9227 113.409C97.6684 113.655 97.4655 113.949 97.326 114.274C97.1864 114.598 97.1129 114.948 97.1098 115.301C97.1068 115.655 97.1742 116.006 97.3081 116.333C97.442 116.66 97.6397 116.958 97.8897 117.208C98.1398 117.458 98.4371 117.655 98.7644 117.789C99.0917 117.923 99.4423 117.991 99.7959 117.988C100.15 117.985 100.499 117.911 100.824 117.771C101.149 117.632 101.443 117.429 101.688 117.175L105.132 113.732L108.575 117.175C109.077 117.66 109.75 117.928 110.448 117.922C111.146 117.916 111.814 117.636 112.308 117.142C112.802 116.648 113.082 115.981 113.088 115.282C113.094 114.584 112.826 113.911 112.34 113.409L108.897 109.966L112.34 106.523C112.588 106.275 112.784 105.982 112.918 105.659C113.052 105.336 113.121 104.989 113.121 104.64C113.121 104.29 113.052 103.944 112.918 103.621C112.784 103.298 112.588 103.004 112.34 102.757ZM151.506 109.966L154.949 106.523C155.434 106.02 155.703 105.348 155.697 104.649C155.691 103.951 155.41 103.283 154.917 102.789C154.423 102.296 153.755 102.016 153.057 102.01C152.359 102.003 151.686 102.272 151.184 102.757L147.74 106.2L144.297 102.757C143.795 102.272 143.122 102.003 142.424 102.01C141.726 102.016 141.058 102.296 140.564 102.789C140.07 103.283 139.79 103.951 139.784 104.649C139.778 105.348 140.046 106.02 140.531 106.523L143.974 109.966L140.531 113.409C140.277 113.655 140.074 113.949 139.935 114.274C139.795 114.598 139.722 114.948 139.719 115.301C139.715 115.655 139.783 116.006 139.917 116.333C140.051 116.66 140.248 116.958 140.498 117.208C140.748 117.458 141.046 117.655 141.373 117.789C141.7 117.923 142.051 117.991 142.405 117.988C142.758 117.985 143.108 117.911 143.433 117.771C143.757 117.632 144.051 117.429 144.297 117.175L147.74 113.732L151.184 117.175C151.686 117.66 152.359 117.928 153.057 117.922C153.755 117.916 154.423 117.636 154.917 117.142C155.41 116.648 155.691 115.981 155.697 115.282C155.703 114.584 155.434 113.911 154.949 113.409L151.506 109.966Z\" stroke=\"transparent\" stroke-width=\"20\" mask=\"url(#path-2-outside-1_0_1)\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_0_1\">\n <rect width=\"200\" height=\"200\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n </div>\n <div class=\"errorContainer\"></div>\n </div>\n</div>\n<div>\n <label class=\"ff-card-form-label\" for=\"cardHolderInput\">Cardholder name</label>\n <input class=\"ff-card-form-text-input\" id=\"cardHolderInput\" type=\"text\" pattern=\"[A-Za-z\\s]+\" placeholder=\"Full name on card\">\n <div class=\"errorContainer\"></div>\n</div>\n<div>\n <label class=\"ff-card-form-label\" for=\"emailAddressInput\">Email</label>\n <input class=\"ff-card-form-text-input\" id=\"emailAddressInput\" placeholder=\"Email\" type=\"email\">\n <div class=\"errorContainer\"></div>\n</div>\n<div id=\"countrySelectorField\">\n <label class=\"ff-card-form-label\" for=\"countrySelectorInput\">Country</label>\n <div class=\"ff-select-wrap\">\n <select class=\"ff-card-form-text-input ff-card-form-select\" id=\"countrySelectorInput\"></select>\n <div class=\"ff-select-arrow\" aria-hidden=\"true\"></div>\n </div>\n</div>\n<div>\n <label class=\"ff-card-form-label\" for=\"postalCodeInput\">Zip code</label>\n <input class=\"ff-card-form-text-input\" id=\"postalCodeInput\" placeholder=\"12345\">\n</div>\n";
9
9
 
10
- if(typeof document!=="undefined")document.head.appendChild(document.createElement("style")).textContent="\n\n.ff-card-form-label {\n display: block;\n font-size: 16px;\n margin-bottom: 5px;\n }\n \n .card-form-row {\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n \n .ff-card-form-text-input {\n margin: 0 0 3px;\n padding-left: 10px;\n padding-right: 10px;\n box-sizing: border-box;\n height: 36px;\n width: 100%;\n font-size: 1rem;\n background-color: transparent;\n border: 1px solid rgb(0 0 0 / 10%);\n border-radius: 6px;\n transition: all 0.3s ease;\n box-shadow: none;\n outline: none;\n }\n .ff-card-form-text-input.error {\n border-color: #e32f41;\n }\n\n.ff-select-wrap {\n position: relative;\n}\n\n.ff-card-form-select {\n padding-right: 34px;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n background-image: none;\n}\n\n.ff-card-form-select::-ms-expand {\n display: none;\n}\n\n.ff-select-arrow {\n position: absolute;\n top: 50%;\n right: 12px;\n width: 8px;\n height: 8px;\n border-right: 1.5px solid #6b7280;\n border-bottom: 1.5px solid #6b7280;\n transform: translateY(-65%) rotate(45deg);\n pointer-events: none;\n}\n\n.ff-select-wrap:focus-within .ff-select-arrow {\n border-right-color: #111827;\n border-bottom-color: #111827;\n}\n \n .errorContainer:not(:empty) {\n color: #d10000;\n font-size: 16px;\n line-height: 1;\n margin: 0 0 10px;\n }\n\n #cvvInput {\n position: relative;\n }\n \n #cvvInput > svg {\n z-index: 1;\n position: absolute;\n top: 5px;\n right: 5px;\n width: 26px;\n height: 26px;\n }";
10
+ if(typeof document!=="undefined")document.head.appendChild(document.createElement("style")).textContent="\n\n.ff-card-form-label {\n display: block;\n font-size: 16px;\n margin-bottom: 5px;\n }\n \n .card-form-row {\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n \n .ff-card-form-text-input {\n margin: 0 0 3px;\n padding-left: 10px;\n padding-right: 10px;\n box-sizing: border-box;\n height: 36px;\n width: 100%;\n font-size: 1rem;\n background-color: transparent;\n border: 1px solid rgb(0 0 0 / 10%);\n border-radius: 6px;\n transition: all 0.3s ease;\n box-shadow: none;\n outline: none;\n }\n .ff-card-form-text-input.error {\n border-color: #e32f41;\n }\n\n.ff-select-wrap {\n position: relative;\n}\n\n.ff-card-form-select {\n padding-right: 34px;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n background-image: none;\n}\n\n.ff-card-form-select::-ms-expand {\n display: none;\n}\n\n.ff-card-form-select:disabled {\n color: #6b7280;\n cursor: not-allowed;\n}\n\n.ff-select-arrow {\n position: absolute;\n top: 50%;\n right: 12px;\n width: 8px;\n height: 8px;\n border-right: 1.5px solid #6b7280;\n border-bottom: 1.5px solid #6b7280;\n transform: translateY(-65%) rotate(45deg);\n pointer-events: none;\n}\n\n.ff-select-wrap:focus-within .ff-select-arrow {\n border-right-color: #111827;\n border-bottom-color: #111827;\n}\n \n .errorContainer:not(:empty) {\n color: #d10000;\n font-size: 16px;\n line-height: 1;\n margin: 0 0 10px;\n }\n\n #cvvInput {\n position: relative;\n }\n \n #cvvInput > svg {\n z-index: 1;\n position: absolute;\n top: 5px;\n right: 5px;\n width: 26px;\n height: 26px;\n }";
11
11
 
12
12
  class CardSkin {
13
13
  constructor(containerEl, checkoutConfig, cardSessionFieldConfig) {
@@ -20,15 +20,20 @@ class CardSkin {
20
20
  cvv: cardInputElements.cvv.parentElement,
21
21
  cardholderName: cardInputElements.cardholderName?.parentElement,
22
22
  emailAddress: cardInputElements.emailAddress?.parentElement,
23
+ postalCode: cardInputElements.postalCode?.parentElement,
23
24
  };
24
25
  const errorContainer = elementsMap[name]?.querySelector('.errorContainer');
25
26
  if (errorContainer) {
26
27
  errorContainer.textContent = error || '';
27
28
  }
28
- if (name === 'cardholderName' || name === 'emailAddress') {
29
+ if (name === 'cardholderName' ||
30
+ name === 'emailAddress' ||
31
+ name === 'postalCode') {
29
32
  const field = name === 'cardholderName'
30
33
  ? cardInputElements.cardholderName
31
- : cardInputElements.emailAddress;
34
+ : name === 'emailAddress'
35
+ ? cardInputElements.emailAddress
36
+ : cardInputElements.postalCode;
32
37
  if (error) {
33
38
  field?.classList?.add('error');
34
39
  }
@@ -69,20 +74,10 @@ class CardSkin {
69
74
  return this.cardSessionFieldConfig?.countryFieldOverrides?.[countryCode];
70
75
  }
71
76
  isCountrySelectorVisible() {
72
- return !!(this.cardSessionFieldConfig?.showCountrySelector &&
73
- this.cardSessionFieldConfig?.validCountries?.length);
77
+ return !!this.cardSessionFieldConfig?.showCountrySelector;
74
78
  }
75
- isCardholderNameVisible(countryCode = this.getSelectedCountryCode()) {
76
- const defaultVisible = !!this.checkoutConfig.card?.cardholderName?.required;
77
- const shouldApplyOverrides = !!this.cardSessionFieldConfig?.applyCardholderNameOverrides;
78
- if (!shouldApplyOverrides) {
79
- return defaultVisible;
80
- }
81
- const overrideValue = this.getCountryFieldOverride(countryCode)?.show_cardholder_name;
82
- if (overrideValue === null || overrideValue === undefined) {
83
- return defaultVisible;
84
- }
85
- return overrideValue;
79
+ isCardholderNameVisible() {
80
+ return !!this.checkoutConfig.card?.cardholderName?.required;
86
81
  }
87
82
  isPostalCodeVisible(countryCode = this.getSelectedCountryCode()) {
88
83
  const defaultVisible = !!this.cardSessionFieldConfig?.showPostalCode;
@@ -98,10 +93,27 @@ class CardSkin {
98
93
  field.parentElement.style.display = isVisible ? '' : 'none';
99
94
  }
100
95
  }
96
+ setContainerVisibility(containerId, isVisible) {
97
+ const container = this.containerEl.querySelector(`#${containerId}`);
98
+ if (container) {
99
+ container.style.display = isVisible ? '' : 'none';
100
+ }
101
+ }
101
102
  populateCountrySelector(selectEl) {
102
103
  const validCountries = this.cardSessionFieldConfig?.validCountries || [];
103
104
  const selectedCountryCode = this.getSelectedCountryCode();
104
105
  selectEl.innerHTML = '';
106
+ selectEl.disabled = false;
107
+ if (!validCountries.length) {
108
+ const fallbackOption = document.createElement('option');
109
+ fallbackOption.value = selectedCountryCode || '';
110
+ fallbackOption.textContent = selectedCountryCode
111
+ ? `Detected country: ${selectedCountryCode}`
112
+ : 'Country unavailable';
113
+ selectEl.appendChild(fallbackOption);
114
+ selectEl.disabled = true;
115
+ return;
116
+ }
105
117
  const placeholderOption = document.createElement('option');
106
118
  placeholderOption.value = '';
107
119
  placeholderOption.textContent = 'Select country';
@@ -117,7 +129,7 @@ class CardSkin {
117
129
  }
118
130
  }
119
131
  updateDynamicFieldVisibility(countryCode = this.getSelectedCountryCode()) {
120
- this.setFieldVisibility('cardHolderInput', this.isCardholderNameVisible(countryCode));
132
+ this.setFieldVisibility('cardHolderInput', this.isCardholderNameVisible());
121
133
  this.setFieldVisibility('postalCodeInput', this.isPostalCodeVisible(countryCode));
122
134
  const postalCodeInput = this.containerEl.querySelector('#postalCodeInput');
123
135
  if (!this.isPostalCodeVisible(countryCode) && postalCodeInput) {
@@ -149,7 +161,7 @@ class CardSkin {
149
161
  this.updateDynamicFieldVisibility(this.normalizeCountryCode(countrySelector.value));
150
162
  });
151
163
  }
152
- this.setFieldVisibility('countrySelectorInput', this.isCountrySelectorVisible());
164
+ this.setContainerVisibility('countrySelectorField', this.isCountrySelectorVisible());
153
165
  this.updateDynamicFieldVisibility();
154
166
  if (!cardNumber ||
155
167
  !expiryDate ||
@@ -183,11 +195,6 @@ class CardSkin {
183
195
  getCheckoutOptions() {
184
196
  return {
185
197
  cardElements: this.getCardInputElements(),
186
- card: {
187
- cardholderName: {
188
- required: false,
189
- },
190
- },
191
198
  };
192
199
  }
193
200
  }
package/dist/funnelfox-billing.js CHANGED
@@ -426,7 +426,7 @@
426
426
  /**
427
427
  * @fileoverview Constants for Funnefox SDK
428
428
  */
429
- const SDK_VERSION = '0.6.5-beta.0';
429
+ const SDK_VERSION = '0.6.5-beta.3';
430
430
  const DEFAULTS = {
431
431
  BASE_URL: 'https://billing.funnelfox.com',
432
432
  REGION: 'default',
@@ -677,6 +677,8 @@
677
677
  onMethodRenderError: options.onMethodRenderError,
678
678
  onMethodRender: options.onMethodRender,
679
679
  onCardInputValueChange: options.onCardInputValueChange,
680
+ isCardholderNameRequired: options.isCardholderNameRequired,
681
+ isPostalCodeRequired: options.isPostalCodeRequired,
680
682
  });
681
683
  this.paymentMethodsInterfaces.push(cardInterface);
682
684
  return cardInterface;
@@ -695,7 +697,7 @@
695
697
  throw new PrimerError('Failed to initialize Primer checkout', error);
696
698
  }
697
699
  }
698
- async renderCardCheckoutWithElements(elements, { onSubmit, onInputChange, onCardInputValueChange, isCardholderNameRequired, onMethodRenderError, onMethodRender, }) {
700
+ async renderCardCheckoutWithElements(elements, { onSubmit, onInputChange, onCardInputValueChange, isCardholderNameRequired, isPostalCodeRequired, onMethodRenderError, onMethodRender, }) {
699
701
  try {
700
702
  if (!this.currentHeadless) {
701
703
  throw new PrimerError('Headless checkout not found');
@@ -709,10 +711,9 @@
709
711
  const validateForm = async () => {
710
712
  if (!pmManager)
711
713
  return false;
712
- const { valid } = await pmManager.validate();
713
- const cardholderName = elements.cardholderName?.value?.trim();
714
- const cardHolderError = isCardholderNameRequired?.() && !cardholderName
715
- ? 'Please enter the cardholder name'
714
+ const { valid, validationErrors } = await pmManager.validate();
715
+ const cardHolderError = isCardholderNameRequired?.()
716
+ ? validationErrors.find(v => v.name === 'cardholderName')?.message
716
717
  : null;
717
718
  dispatchError('cardholderName', cardHolderError);
718
719
  const emailAddress = elements.emailAddress?.value?.trim();
@@ -720,7 +721,12 @@
720
721
  ? 'Please enter a valid email address'
721
722
  : null;
722
723
  dispatchError('emailAddress', emailError);
723
- return valid && !emailError && !cardHolderError;
724
+ const postalCode = elements.postalCode?.value?.trim();
725
+ const postalCodeError = isPostalCodeRequired?.() && !postalCode
726
+ ? 'Please enter a postal code'
727
+ : null;
728
+ dispatchError('postalCode', postalCodeError);
729
+ return valid && !emailError && !cardHolderError && !postalCodeError;
724
730
  };
725
731
  const dispatchError = (inputName, error) => {
726
732
  onInputChange(inputName, error);
@@ -750,6 +756,7 @@
750
756
  const postalCodeOnChange = (e) => {
751
757
  const postalCode = e.target.value.trim();
752
758
  onCardInputValueChange?.('postalCode', postalCode);
759
+ dispatchError('postalCode', null);
753
760
  };
754
761
  elements.cardholderName?.addEventListener('input', cardHolderOnChange);
755
762
  elements.emailAddress?.addEventListener('input', emailAddressOnChange);
@@ -844,7 +851,7 @@
844
851
  });
845
852
  }
846
853
  async renderCheckout(clientToken, checkoutOptions, checkoutRenderOptions) {
847
- const { cardElements, paymentButtonElements, container, onSubmit, onInputChange, onMethodRender, onMethodRenderError, onMethodsAvailable, onCardInputValueChange, isCardholderNameRequired, } = checkoutRenderOptions;
854
+ const { cardElements, paymentButtonElements, container, onSubmit, onInputChange, onMethodRender, onMethodRenderError, onMethodsAvailable, onCardInputValueChange, isCardholderNameRequired, isPostalCodeRequired, } = checkoutRenderOptions;
848
855
  await this.initializeHeadlessCheckout(clientToken, checkoutOptions);
849
856
  onMethodsAvailable?.(this.availableMethods);
850
857
  await Promise.all(this.availableMethods.map(method => {
@@ -858,6 +865,7 @@
858
865
  onMethodRenderError,
859
866
  onCardInputValueChange,
860
867
  isCardholderNameRequired,
868
+ isPostalCodeRequired,
861
869
  });
862
870
  }
863
871
  else {
@@ -1632,7 +1640,6 @@
1632
1640
  this.cardSessionFieldConfig.validCountries,
1633
1641
  countryFieldOverrides: countryFieldOverrides ||
1634
1642
  this.cardSessionFieldConfig.countryFieldOverrides,
1635
- applyCardholderNameOverrides: this.shouldApplySessionCardholderNameConfig,
1636
1643
  };
1637
1644
  if (Object.keys(cardConfig).length > 0) {
1638
1645
  this.checkoutConfig.card = cardConfig;
@@ -1648,12 +1655,6 @@
1648
1655
  ...(this.checkoutConfig.card || {}),
1649
1656
  };
1650
1657
  delete cardConfig.emailAddress;
1651
- if (cardConfig.cardholderName) {
1652
- cardConfig.cardholderName = {
1653
- ...cardConfig.cardholderName,
1654
- required: false,
1655
- };
1656
- }
1657
1658
  return Object.keys(cardConfig).length
1658
1659
  ? cardConfig
1659
1660
  : undefined;
@@ -1774,6 +1775,7 @@
1774
1775
  onInputChange: this.handleInputChange,
1775
1776
  onCardInputValueChange: this.handleCardInputValueChange,
1776
1777
  isCardholderNameRequired: () => this.isCardholderNameRequired(),
1778
+ isPostalCodeRequired: () => this.isPostalCodeVisible(),
1777
1779
  onMethodRender: this.handleMethodRender,
1778
1780
  onMethodsAvailable: this.handleMethodsAvailable,
1779
1781
  onMethodRenderError: this.handleMethodRenderError,
@@ -1958,18 +1960,8 @@
1958
1960
  }
1959
1961
  return this.cardSessionFieldConfig.countryFieldOverrides?.[countryCode];
1960
1962
  }
1961
- isCardholderNameRequired(countryCode = this.getSelectedCountryCode()) {
1962
- const defaultValue = !!this.checkoutConfig.card?.cardholderName?.required;
1963
- const shouldApplyOverrides = this.cardSessionFieldConfig.applyCardholderNameOverrides &&
1964
- this.shouldApplySessionCardholderNameConfig;
1965
- if (!shouldApplyOverrides) {
1966
- return defaultValue;
1967
- }
1968
- const overrideValue = this.getCountryFieldOverride(countryCode)?.show_cardholder_name;
1969
- if (overrideValue === null || overrideValue === undefined) {
1970
- return defaultValue;
1971
- }
1972
- return overrideValue;
1963
+ isCardholderNameRequired() {
1964
+ return !!this.checkoutConfig.card?.cardholderName?.required;
1973
1965
  }
1974
1966
  isPostalCodeVisible(countryCode = this.getSelectedCountryCode()) {
1975
1967
  const defaultValue = !!this.cardSessionFieldConfig.showPostalCode;
@@ -2071,6 +2063,7 @@
2071
2063
  onInputChange: this.handleInputChange,
2072
2064
  onCardInputValueChange: this.handleCardInputValueChange,
2073
2065
  isCardholderNameRequired: () => this.isCardholderNameRequired(),
2066
+ isPostalCodeRequired: () => this.isPostalCodeVisible(),
2074
2067
  onMethodRender: this.handleMethodRender,
2075
2068
  onMethodRenderError: this.handleMethodRenderError,
2076
2069
  };
@@ -2318,9 +2311,9 @@
2318
2311
 
2319
2312
  if(typeof document!=="undefined")document.head.appendChild(document.createElement("style")).textContent="/* Main container */\n.ff-skin-default {\n display: flex;\n flex-direction: column;\n text-align: left;\n gap: 8px;\n width: 100%;\n max-width: 400px;\n margin: 0 auto;\n color: #000000;\n}\n\n/* Payment method cards */\n.ff-payment-method-card {\n display: none;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n background-color: #ffffff;\n padding: 20px;\n transition: border-color 0.2s ease;\n height: auto;\n box-shadow: 0px 0px 10px 0px #eee;\n}\n\n.ff-payment-method-card.visible {\n display: block;\n}\n\n.payment-errors-container {\n background-color: #d1000033;\n color: #d10000;\n font-size: 14px;\n padding: 16px 12px;\n border-radius: 8px;\n}\n.payment-errors-container:empty {\n display: none;\n}\n\n/* Label wrapper */\n.ff-payment-method-label {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n cursor: pointer;\n width: 100%;\n}\n\n.ff-google-pay-header {\n align-items: center;\n}\n\n/* Custom radio button styling */\n.ff-payment-method-radio {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n width: 24px;\n height: 24px;\n min-width: 24px;\n min-height: 24px;\n border: 1px solid #9e9e9e;\n border-radius: 50%;\n background-color: #ffffff;\n cursor: pointer;\n position: relative;\n margin: 0;\n flex-shrink: 0;\n transition: border-color 0.2s ease;\n}\n\n.ff-card-form-submit-button {\n display: block;\n cursor: pointer;\n width: 100%;\n padding: 16px 0;\n border-radius: 16px;\n background-color: #000000;\n color: #ffffff;\n border: none;\n font-size: 16px;\n margin: 12px 0 16px;\n}\n\n.ff-payment-method-radio:checked {\n border-color: #e32f41;\n background-color: #ffffff;\n}\n\n.ff-payment-method-radio:checked::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background-color: #e32f41;\n}\n\n/* Payment method content */\n.ff-payment-method-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-height: 0;\n height: 0;\n overflow: hidden;\n opacity: 0;\n transition:\n opacity 0.3s ease,\n margin-top 0.3s ease;\n margin-top: 0;\n}\n\n.ff-payment-method-card.expanded .ff-payment-method-content {\n max-height: 2000px;\n height: auto;\n opacity: 1;\n margin-top: 16px;\n}\n.ff-payment-method-card.expanded .ff-payment-method-label {\n margin-bottom: 16px;\n}\n\n/* Payment method header */\n.ff-payment-method-header {\n display: flex;\n align-items: center;\n}\n\n/* Google Pay Logo */\n.ff-google-pay-logo {\n display: flex;\n align-items: center;\n gap: 4px;\n font-weight: 500;\n font-size: 18px;\n}\n.ff-google-pay-logo img {\n height: 38px;\n}\n\n/* Payment features list */\n.ff-payment-features {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.ff-payment-feature {\n display: flex;\n align-items: baseline;\n text-align: left;\n gap: 8px;\n}\n\n.ff-checkmark-icon {\n width: 20px;\n height: 20px;\n min-width: 20px;\n color: #e32f41;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.ff-payment-feature span {\n color: #333333;\n font-size: 14px;\n line-height: 1.5;\n}\n\n/* Google Pay button container */\n.ff-google-pay-button-container {\n display: flex;\n justify-content: center;\n}\n\n/* Security message */\n.ff-security-message {\n text-align: center;\n color: #999999;\n font-size: 14px;\n padding: 0;\n margin: 0\n}\n\n/* Card logos container */\n.ff-card-logos {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n/* Card form container */\n.ff-card-form-container {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.loader-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: rgba(255, 255, 255);\n z-index: 2;\n}\n\n.payment-button-loader {\n position: relative;\n height: 50px;\n}\n\n.loader {\n width: 24px;\n height: 24px;\n border: 4px solid #e32f41;\n border-top: 4px solid transparent;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n .ff-payment-method-card {\n padding: 16px;\n }\n\n .ff-payment-method-label {\n gap: 12px;\n }\n\n .ff-card-logos {\n gap: 8px;\n }\n}\n\n.ff-payment-container {\n position: relative;\n}\n\n.success {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n}\n";
2320
2313
 
2321
- var template = "<div>\n <label class=\"ff-card-form-label\" for=\"cardNumberInput\">Card number</label>\n <div id=\"cardNumberInput\"></div>\n <div class=\"errorContainer\"></div>\n</div>\n<div class=\"card-form-row\">\n <div>\n <label class=\"ff-card-form-label\" for=\"expiryInput\">Expiration date</label>\n <div id=\"expiryInput\"></div>\n <div class=\"errorContainer\"></div>\n </div>\n <div>\n <label class=\"ff-card-form-label\" for=\"cvvInput\">Security code</label>\n <div id=\"cvvInput\">\n <svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"200\" height=\"200\" fill=\"transparent\"/>\n <g clip-path=\"url(#clip0_0_1)\">\n <path d=\"M157.555 23C168.279 23.0002 177 31.7394 177 42.4854V80.5889C171.946 72.0151 164.749 64.8558 156.146 59.8457H166.394V42.4854C166.393 37.6004 162.43 33.6291 157.555 33.6289H27.4453C22.5704 33.6291 18.6066 37.6004 18.6064 42.4854V59.8457H97.8535C88.9153 65.0512 81.4954 72.5771 76.4189 81.5986H18.6064V127.515C18.6066 132.4 22.5704 136.371 27.4453 136.371H75.3281C77.2742 140.177 79.6285 143.739 82.333 147H27.4453C16.7215 147 8.00019 138.261 8 127.515V42.4854C8.0002 31.7394 16.7215 23.0002 27.4453 23H157.555Z\" fill=\"#93939A\"/>\n <mask id=\"path-2-outside-1_0_1\" maskUnits=\"userSpaceOnUse\" x=\"68.5012\" y=\"52.0311\" width=\"135\" height=\"135\" fill=\"black\">\n <rect fill=\"white\" x=\"68.5012\" y=\"52.0311\" width=\"135\" height=\"135\"/>\n <path d=\"M190.242 160.457L170.136 140.351C166.533 145.552 162.023 150.063 156.821 153.666L176.927 173.772C178.693 175.538 181.088 176.53 183.585 176.53C186.082 176.53 188.477 175.538 190.242 173.772C192.008 172.007 193 169.612 193 167.115C193 164.618 192.008 162.223 190.242 160.457ZM126.436 157.901C116.955 157.901 107.688 155.089 99.8048 149.822C91.922 144.555 85.7781 137.069 82.15 128.31C78.5219 119.551 77.5727 109.913 79.4222 100.614C81.2718 91.3158 85.8371 82.7746 92.5409 76.0708C99.2447 69.367 107.786 64.8017 117.084 62.9521C126.383 61.1026 136.021 62.0518 144.78 65.6799C153.539 69.308 161.025 75.4519 166.292 83.3347C171.559 91.2175 174.371 100.485 174.371 109.966C174.371 122.679 169.32 134.871 160.331 143.861C151.341 152.85 139.149 157.901 126.436 157.901ZM163.719 109.966C163.719 102.592 161.532 95.3838 157.435 89.2527C153.339 83.1216 147.516 78.343 140.703 75.5212C133.891 72.6994 126.395 71.9611 119.162 73.3996C111.93 74.8382 105.287 78.389 100.073 83.6031C94.8591 88.8171 91.3083 95.4602 89.8697 102.692C88.4312 109.924 89.1695 117.421 91.9913 124.233C94.8131 131.046 99.5918 136.869 105.723 140.965C111.854 145.062 119.062 147.248 126.436 147.248C136.324 147.248 145.807 143.32 152.799 136.329C159.791 129.337 163.719 119.854 163.719 109.966ZM133.645 102.757C133.398 102.51 133.104 102.313 132.781 102.179C132.458 102.046 132.112 101.977 131.762 101.977C131.412 101.977 131.066 102.046 130.743 102.179C130.42 102.313 130.126 102.51 129.879 102.757L126.436 106.2L122.993 102.757C122.49 102.272 121.818 102.003 121.119 102.01C120.421 102.016 119.753 102.296 119.26 102.789C118.766 103.283 118.486 103.951 118.48 104.649C118.474 105.348 118.742 106.02 119.227 106.523L122.67 109.966L119.227 113.409C118.973 113.655 118.77 113.949 118.63 114.274C118.491 114.598 118.417 114.948 118.414 115.301C118.411 115.655 118.479 116.006 118.612 116.333C118.746 116.66 118.944 116.958 119.194 117.208C119.444 117.458 119.741 117.655 120.069 117.789C120.396 117.923 120.747 117.991 121.1 117.988C121.454 117.985 121.803 117.911 122.128 117.771C122.453 117.632 122.747 117.429 122.993 117.175L126.436 113.732L129.879 117.175C130.382 117.66 131.054 117.928 131.752 117.922C132.451 117.916 133.119 117.636 133.612 117.142C134.106 116.648 134.386 115.981 134.392 115.282C134.398 114.584 134.13 113.911 133.645 113.409L130.202 109.966L133.645 106.523C133.892 106.275 134.088 105.982 134.222 105.659C134.356 105.336 134.425 104.989 134.425 104.64C134.425 104.29 134.356 103.944 134.222 103.621C134.088 103.298 133.892 103.004 133.645 102.757ZM112.34 102.757C112.093 102.51 111.8 102.313 111.477 102.179C111.154 102.046 110.807 101.977 110.458 101.977C110.108 101.977 109.762 102.046 109.439 102.179C109.116 102.313 108.822 102.51 108.575 102.757L105.132 106.2L101.688 102.757C101.186 102.272 100.513 102.003 99.8151 102.01C99.1169 102.016 98.4489 102.296 97.9552 102.789C97.4614 103.283 97.1814 103.951 97.1753 104.649C97.1692 105.348 97.4377 106.02 97.9227 106.523L101.366 109.966L97.9227 113.409C97.6684 113.655 97.4655 113.949 97.326 114.274C97.1864 114.598 97.1129 114.948 97.1098 115.301C97.1068 115.655 97.1742 116.006 97.3081 116.333C97.442 116.66 97.6397 116.958 97.8897 117.208C98.1398 117.458 98.4371 117.655 98.7644 117.789C99.0917 117.923 99.4423 117.991 99.7959 117.988C100.15 117.985 100.499 117.911 100.824 117.771C101.149 117.632 101.443 117.429 101.688 117.175L105.132 113.732L108.575 117.175C109.077 117.66 109.75 117.928 110.448 117.922C111.146 117.916 111.814 117.636 112.308 117.142C112.802 116.648 113.082 115.981 113.088 115.282C113.094 114.584 112.826 113.911 112.34 113.409L108.897 109.966L112.34 106.523C112.588 106.275 112.784 105.982 112.918 105.659C113.052 105.336 113.121 104.989 113.121 104.64C113.121 104.29 113.052 103.944 112.918 103.621C112.784 103.298 112.588 103.004 112.34 102.757ZM151.506 109.966L154.949 106.523C155.434 106.02 155.703 105.348 155.697 104.649C155.691 103.951 155.41 103.283 154.917 102.789C154.423 102.296 153.755 102.016 153.057 102.01C152.359 102.003 151.686 102.272 151.184 102.757L147.74 106.2L144.297 102.757C143.795 102.272 143.122 102.003 142.424 102.01C141.726 102.016 141.058 102.296 140.564 102.789C140.07 103.283 139.79 103.951 139.784 104.649C139.778 105.348 140.046 106.02 140.531 106.523L143.974 109.966L140.531 113.409C140.277 113.655 140.074 113.949 139.935 114.274C139.795 114.598 139.722 114.948 139.719 115.301C139.715 115.655 139.783 116.006 139.917 116.333C140.051 116.66 140.248 116.958 140.498 117.208C140.748 117.458 141.046 117.655 141.373 117.789C141.7 117.923 142.051 117.991 142.405 117.988C142.758 117.985 143.108 117.911 143.433 117.771C143.757 117.632 144.051 117.429 144.297 117.175L147.74 113.732L151.184 117.175C151.686 117.66 152.359 117.928 153.057 117.922C153.755 117.916 154.423 117.636 154.917 117.142C155.41 116.648 155.691 115.981 155.697 115.282C155.703 114.584 155.434 113.911 154.949 113.409L151.506 109.966Z\"/>\n </mask>\n <path d=\"M190.242 160.457L170.136 140.351C166.533 145.552 162.023 150.063 156.821 153.666L176.927 173.772C178.693 175.538 181.088 176.53 183.585 176.53C186.082 176.53 188.477 175.538 190.242 173.772C192.008 172.007 193 169.612 193 167.115C193 164.618 192.008 162.223 190.242 160.457ZM126.436 157.901C116.955 157.901 107.688 155.089 99.8048 149.822C91.922 144.555 85.7781 137.069 82.15 128.31C78.5219 119.551 77.5727 109.913 79.4222 100.614C81.2718 91.3158 85.8371 82.7746 92.5409 76.0708C99.2447 69.367 107.786 64.8017 117.084 62.9521C126.383 61.1026 136.021 62.0518 144.78 65.6799C153.539 69.308 161.025 75.4519 166.292 83.3347C171.559 91.2175 174.371 100.485 174.371 109.966C174.371 122.679 169.32 134.871 160.331 143.861C151.341 152.85 139.149 157.901 126.436 157.901ZM163.719 109.966C163.719 102.592 161.532 95.3838 157.435 89.2527C153.339 83.1216 147.516 78.343 140.703 75.5212C133.891 72.6994 126.395 71.9611 119.162 73.3996C111.93 74.8382 105.287 78.389 100.073 83.6031C94.8591 88.8171 91.3083 95.4602 89.8697 102.692C88.4312 109.924 89.1695 117.421 91.9913 124.233C94.8131 131.046 99.5918 136.869 105.723 140.965C111.854 145.062 119.062 147.248 126.436 147.248C136.324 147.248 145.807 143.32 152.799 136.329C159.791 129.337 163.719 119.854 163.719 109.966ZM133.645 102.757C133.398 102.51 133.104 102.313 132.781 102.179C132.458 102.046 132.112 101.977 131.762 101.977C131.412 101.977 131.066 102.046 130.743 102.179C130.42 102.313 130.126 102.51 129.879 102.757L126.436 106.2L122.993 102.757C122.49 102.272 121.818 102.003 121.119 102.01C120.421 102.016 119.753 102.296 119.26 102.789C118.766 103.283 118.486 103.951 118.48 104.649C118.474 105.348 118.742 106.02 119.227 106.523L122.67 109.966L119.227 113.409C118.973 113.655 118.77 113.949 118.63 114.274C118.491 114.598 118.417 114.948 118.414 115.301C118.411 115.655 118.479 116.006 118.612 116.333C118.746 116.66 118.944 116.958 119.194 117.208C119.444 117.458 119.741 117.655 120.069 117.789C120.396 117.923 120.747 117.991 121.1 117.988C121.454 117.985 121.803 117.911 122.128 117.771C122.453 117.632 122.747 117.429 122.993 117.175L126.436 113.732L129.879 117.175C130.382 117.66 131.054 117.928 131.752 117.922C132.451 117.916 133.119 117.636 133.612 117.142C134.106 116.648 134.386 115.981 134.392 115.282C134.398 114.584 134.13 113.911 133.645 113.409L130.202 109.966L133.645 106.523C133.892 106.275 134.088 105.982 134.222 105.659C134.356 105.336 134.425 104.989 134.425 104.64C134.425 104.29 134.356 103.944 134.222 103.621C134.088 103.298 133.892 103.004 133.645 102.757ZM112.34 102.757C112.093 102.51 111.8 102.313 111.477 102.179C111.154 102.046 110.807 101.977 110.458 101.977C110.108 101.977 109.762 102.046 109.439 102.179C109.116 102.313 108.822 102.51 108.575 102.757L105.132 106.2L101.688 102.757C101.186 102.272 100.513 102.003 99.8151 102.01C99.1169 102.016 98.4489 102.296 97.9552 102.789C97.4614 103.283 97.1814 103.951 97.1753 104.649C97.1692 105.348 97.4377 106.02 97.9227 106.523L101.366 109.966L97.9227 113.409C97.6684 113.655 97.4655 113.949 97.326 114.274C97.1864 114.598 97.1129 114.948 97.1098 115.301C97.1068 115.655 97.1742 116.006 97.3081 116.333C97.442 116.66 97.6397 116.958 97.8897 117.208C98.1398 117.458 98.4371 117.655 98.7644 117.789C99.0917 117.923 99.4423 117.991 99.7959 117.988C100.15 117.985 100.499 117.911 100.824 117.771C101.149 117.632 101.443 117.429 101.688 117.175L105.132 113.732L108.575 117.175C109.077 117.66 109.75 117.928 110.448 117.922C111.146 117.916 111.814 117.636 112.308 117.142C112.802 116.648 113.082 115.981 113.088 115.282C113.094 114.584 112.826 113.911 112.34 113.409L108.897 109.966L112.34 106.523C112.588 106.275 112.784 105.982 112.918 105.659C113.052 105.336 113.121 104.989 113.121 104.64C113.121 104.29 113.052 103.944 112.918 103.621C112.784 103.298 112.588 103.004 112.34 102.757ZM151.506 109.966L154.949 106.523C155.434 106.02 155.703 105.348 155.697 104.649C155.691 103.951 155.41 103.283 154.917 102.789C154.423 102.296 153.755 102.016 153.057 102.01C152.359 102.003 151.686 102.272 151.184 102.757L147.74 106.2L144.297 102.757C143.795 102.272 143.122 102.003 142.424 102.01C141.726 102.016 141.058 102.296 140.564 102.789C140.07 103.283 139.79 103.951 139.784 104.649C139.778 105.348 140.046 106.02 140.531 106.523L143.974 109.966L140.531 113.409C140.277 113.655 140.074 113.949 139.935 114.274C139.795 114.598 139.722 114.948 139.719 115.301C139.715 115.655 139.783 116.006 139.917 116.333C140.051 116.66 140.248 116.958 140.498 117.208C140.748 117.458 141.046 117.655 141.373 117.789C141.7 117.923 142.051 117.991 142.405 117.988C142.758 117.985 143.108 117.911 143.433 117.771C143.757 117.632 144.051 117.429 144.297 117.175L147.74 113.732L151.184 117.175C151.686 117.66 152.359 117.928 153.057 117.922C153.755 117.916 154.423 117.636 154.917 117.142C155.41 116.648 155.691 115.981 155.697 115.282C155.703 114.584 155.434 113.911 154.949 113.409L151.506 109.966Z\" fill=\"#93939A\"/>\n <path d=\"M190.242 160.457L170.136 140.351C166.533 145.552 162.023 150.063 156.821 153.666L176.927 173.772C178.693 175.538 181.088 176.53 183.585 176.53C186.082 176.53 188.477 175.538 190.242 173.772C192.008 172.007 193 169.612 193 167.115C193 164.618 192.008 162.223 190.242 160.457ZM126.436 157.901C116.955 157.901 107.688 155.089 99.8048 149.822C91.922 144.555 85.7781 137.069 82.15 128.31C78.5219 119.551 77.5727 109.913 79.4222 100.614C81.2718 91.3158 85.8371 82.7746 92.5409 76.0708C99.2447 69.367 107.786 64.8017 117.084 62.9521C126.383 61.1026 136.021 62.0518 144.78 65.6799C153.539 69.308 161.025 75.4519 166.292 83.3347C171.559 91.2175 174.371 100.485 174.371 109.966C174.371 122.679 169.32 134.871 160.331 143.861C151.341 152.85 139.149 157.901 126.436 157.901ZM163.719 109.966C163.719 102.592 161.532 95.3838 157.435 89.2527C153.339 83.1216 147.516 78.343 140.703 75.5212C133.891 72.6994 126.395 71.9611 119.162 73.3996C111.93 74.8382 105.287 78.389 100.073 83.6031C94.8591 88.8171 91.3083 95.4602 89.8697 102.692C88.4312 109.924 89.1695 117.421 91.9913 124.233C94.8131 131.046 99.5918 136.869 105.723 140.965C111.854 145.062 119.062 147.248 126.436 147.248C136.324 147.248 145.807 143.32 152.799 136.329C159.791 129.337 163.719 119.854 163.719 109.966ZM133.645 102.757C133.398 102.51 133.104 102.313 132.781 102.179C132.458 102.046 132.112 101.977 131.762 101.977C131.412 101.977 131.066 102.046 130.743 102.179C130.42 102.313 130.126 102.51 129.879 102.757L126.436 106.2L122.993 102.757C122.49 102.272 121.818 102.003 121.119 102.01C120.421 102.016 119.753 102.296 119.26 102.789C118.766 103.283 118.486 103.951 118.48 104.649C118.474 105.348 118.742 106.02 119.227 106.523L122.67 109.966L119.227 113.409C118.973 113.655 118.77 113.949 118.63 114.274C118.491 114.598 118.417 114.948 118.414 115.301C118.411 115.655 118.479 116.006 118.612 116.333C118.746 116.66 118.944 116.958 119.194 117.208C119.444 117.458 119.741 117.655 120.069 117.789C120.396 117.923 120.747 117.991 121.1 117.988C121.454 117.985 121.803 117.911 122.128 117.771C122.453 117.632 122.747 117.429 122.993 117.175L126.436 113.732L129.879 117.175C130.382 117.66 131.054 117.928 131.752 117.922C132.451 117.916 133.119 117.636 133.612 117.142C134.106 116.648 134.386 115.981 134.392 115.282C134.398 114.584 134.13 113.911 133.645 113.409L130.202 109.966L133.645 106.523C133.892 106.275 134.088 105.982 134.222 105.659C134.356 105.336 134.425 104.989 134.425 104.64C134.425 104.29 134.356 103.944 134.222 103.621C134.088 103.298 133.892 103.004 133.645 102.757ZM112.34 102.757C112.093 102.51 111.8 102.313 111.477 102.179C111.154 102.046 110.807 101.977 110.458 101.977C110.108 101.977 109.762 102.046 109.439 102.179C109.116 102.313 108.822 102.51 108.575 102.757L105.132 106.2L101.688 102.757C101.186 102.272 100.513 102.003 99.8151 102.01C99.1169 102.016 98.4489 102.296 97.9552 102.789C97.4614 103.283 97.1814 103.951 97.1753 104.649C97.1692 105.348 97.4377 106.02 97.9227 106.523L101.366 109.966L97.9227 113.409C97.6684 113.655 97.4655 113.949 97.326 114.274C97.1864 114.598 97.1129 114.948 97.1098 115.301C97.1068 115.655 97.1742 116.006 97.3081 116.333C97.442 116.66 97.6397 116.958 97.8897 117.208C98.1398 117.458 98.4371 117.655 98.7644 117.789C99.0917 117.923 99.4423 117.991 99.7959 117.988C100.15 117.985 100.499 117.911 100.824 117.771C101.149 117.632 101.443 117.429 101.688 117.175L105.132 113.732L108.575 117.175C109.077 117.66 109.75 117.928 110.448 117.922C111.146 117.916 111.814 117.636 112.308 117.142C112.802 116.648 113.082 115.981 113.088 115.282C113.094 114.584 112.826 113.911 112.34 113.409L108.897 109.966L112.34 106.523C112.588 106.275 112.784 105.982 112.918 105.659C113.052 105.336 113.121 104.989 113.121 104.64C113.121 104.29 113.052 103.944 112.918 103.621C112.784 103.298 112.588 103.004 112.34 102.757ZM151.506 109.966L154.949 106.523C155.434 106.02 155.703 105.348 155.697 104.649C155.691 103.951 155.41 103.283 154.917 102.789C154.423 102.296 153.755 102.016 153.057 102.01C152.359 102.003 151.686 102.272 151.184 102.757L147.74 106.2L144.297 102.757C143.795 102.272 143.122 102.003 142.424 102.01C141.726 102.016 141.058 102.296 140.564 102.789C140.07 103.283 139.79 103.951 139.784 104.649C139.778 105.348 140.046 106.02 140.531 106.523L143.974 109.966L140.531 113.409C140.277 113.655 140.074 113.949 139.935 114.274C139.795 114.598 139.722 114.948 139.719 115.301C139.715 115.655 139.783 116.006 139.917 116.333C140.051 116.66 140.248 116.958 140.498 117.208C140.748 117.458 141.046 117.655 141.373 117.789C141.7 117.923 142.051 117.991 142.405 117.988C142.758 117.985 143.108 117.911 143.433 117.771C143.757 117.632 144.051 117.429 144.297 117.175L147.74 113.732L151.184 117.175C151.686 117.66 152.359 117.928 153.057 117.922C153.755 117.916 154.423 117.636 154.917 117.142C155.41 116.648 155.691 115.981 155.697 115.282C155.703 114.584 155.434 113.911 154.949 113.409L151.506 109.966Z\" stroke=\"transparent\" stroke-width=\"20\" mask=\"url(#path-2-outside-1_0_1)\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_0_1\">\n <rect width=\"200\" height=\"200\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n </div>\n <div class=\"errorContainer\"></div>\n </div>\n</div>\n<div>\n <label class=\"ff-card-form-label\" for=\"emailAddressInput\">Email</label>\n <input class=\"ff-card-form-text-input\" id=\"emailAddressInput\" placeholder=\"Email\" type=\"email\">\n <div class=\"errorContainer\"></div>\n</div>\n<div>\n <label class=\"ff-card-form-label\" for=\"cardHolderInput\">Card holder</label>\n <input class=\"ff-card-form-text-input\" id=\"cardHolderInput\" placeholder=\"Card holder\">\n <div class=\"errorContainer\"></div>\n</div>\n<div>\n <label class=\"ff-card-form-label\" for=\"countrySelectorInput\">Country</label>\n <div class=\"ff-select-wrap\">\n <select class=\"ff-card-form-text-input ff-card-form-select\" id=\"countrySelectorInput\"></select>\n <div class=\"ff-select-arrow\" aria-hidden=\"true\"></div>\n </div>\n</div>\n<div>\n <label class=\"ff-card-form-label\" for=\"postalCodeInput\">Postal code</label>\n <input class=\"ff-card-form-text-input\" id=\"postalCodeInput\" placeholder=\"Postal code\">\n</div>\n";
2314
+ var template = "<div>\n <label class=\"ff-card-form-label\" for=\"cardNumberInput\">Card number</label>\n <div id=\"cardNumberInput\"></div>\n <div class=\"errorContainer\"></div>\n</div>\n<div class=\"card-form-row\">\n <div>\n <label class=\"ff-card-form-label\" for=\"expiryInput\">Expiration date</label>\n <div id=\"expiryInput\"></div>\n <div class=\"errorContainer\"></div>\n </div>\n <div>\n <label class=\"ff-card-form-label\" for=\"cvvInput\">Security code</label>\n <div id=\"cvvInput\">\n <svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"200\" height=\"200\" fill=\"transparent\"/>\n <g clip-path=\"url(#clip0_0_1)\">\n <path d=\"M157.555 23C168.279 23.0002 177 31.7394 177 42.4854V80.5889C171.946 72.0151 164.749 64.8558 156.146 59.8457H166.394V42.4854C166.393 37.6004 162.43 33.6291 157.555 33.6289H27.4453C22.5704 33.6291 18.6066 37.6004 18.6064 42.4854V59.8457H97.8535C88.9153 65.0512 81.4954 72.5771 76.4189 81.5986H18.6064V127.515C18.6066 132.4 22.5704 136.371 27.4453 136.371H75.3281C77.2742 140.177 79.6285 143.739 82.333 147H27.4453C16.7215 147 8.00019 138.261 8 127.515V42.4854C8.0002 31.7394 16.7215 23.0002 27.4453 23H157.555Z\" fill=\"#93939A\"/>\n <mask id=\"path-2-outside-1_0_1\" maskUnits=\"userSpaceOnUse\" x=\"68.5012\" y=\"52.0311\" width=\"135\" height=\"135\" fill=\"black\">\n <rect fill=\"white\" x=\"68.5012\" y=\"52.0311\" width=\"135\" height=\"135\"/>\n <path d=\"M190.242 160.457L170.136 140.351C166.533 145.552 162.023 150.063 156.821 153.666L176.927 173.772C178.693 175.538 181.088 176.53 183.585 176.53C186.082 176.53 188.477 175.538 190.242 173.772C192.008 172.007 193 169.612 193 167.115C193 164.618 192.008 162.223 190.242 160.457ZM126.436 157.901C116.955 157.901 107.688 155.089 99.8048 149.822C91.922 144.555 85.7781 137.069 82.15 128.31C78.5219 119.551 77.5727 109.913 79.4222 100.614C81.2718 91.3158 85.8371 82.7746 92.5409 76.0708C99.2447 69.367 107.786 64.8017 117.084 62.9521C126.383 61.1026 136.021 62.0518 144.78 65.6799C153.539 69.308 161.025 75.4519 166.292 83.3347C171.559 91.2175 174.371 100.485 174.371 109.966C174.371 122.679 169.32 134.871 160.331 143.861C151.341 152.85 139.149 157.901 126.436 157.901ZM163.719 109.966C163.719 102.592 161.532 95.3838 157.435 89.2527C153.339 83.1216 147.516 78.343 140.703 75.5212C133.891 72.6994 126.395 71.9611 119.162 73.3996C111.93 74.8382 105.287 78.389 100.073 83.6031C94.8591 88.8171 91.3083 95.4602 89.8697 102.692C88.4312 109.924 89.1695 117.421 91.9913 124.233C94.8131 131.046 99.5918 136.869 105.723 140.965C111.854 145.062 119.062 147.248 126.436 147.248C136.324 147.248 145.807 143.32 152.799 136.329C159.791 129.337 163.719 119.854 163.719 109.966ZM133.645 102.757C133.398 102.51 133.104 102.313 132.781 102.179C132.458 102.046 132.112 101.977 131.762 101.977C131.412 101.977 131.066 102.046 130.743 102.179C130.42 102.313 130.126 102.51 129.879 102.757L126.436 106.2L122.993 102.757C122.49 102.272 121.818 102.003 121.119 102.01C120.421 102.016 119.753 102.296 119.26 102.789C118.766 103.283 118.486 103.951 118.48 104.649C118.474 105.348 118.742 106.02 119.227 106.523L122.67 109.966L119.227 113.409C118.973 113.655 118.77 113.949 118.63 114.274C118.491 114.598 118.417 114.948 118.414 115.301C118.411 115.655 118.479 116.006 118.612 116.333C118.746 116.66 118.944 116.958 119.194 117.208C119.444 117.458 119.741 117.655 120.069 117.789C120.396 117.923 120.747 117.991 121.1 117.988C121.454 117.985 121.803 117.911 122.128 117.771C122.453 117.632 122.747 117.429 122.993 117.175L126.436 113.732L129.879 117.175C130.382 117.66 131.054 117.928 131.752 117.922C132.451 117.916 133.119 117.636 133.612 117.142C134.106 116.648 134.386 115.981 134.392 115.282C134.398 114.584 134.13 113.911 133.645 113.409L130.202 109.966L133.645 106.523C133.892 106.275 134.088 105.982 134.222 105.659C134.356 105.336 134.425 104.989 134.425 104.64C134.425 104.29 134.356 103.944 134.222 103.621C134.088 103.298 133.892 103.004 133.645 102.757ZM112.34 102.757C112.093 102.51 111.8 102.313 111.477 102.179C111.154 102.046 110.807 101.977 110.458 101.977C110.108 101.977 109.762 102.046 109.439 102.179C109.116 102.313 108.822 102.51 108.575 102.757L105.132 106.2L101.688 102.757C101.186 102.272 100.513 102.003 99.8151 102.01C99.1169 102.016 98.4489 102.296 97.9552 102.789C97.4614 103.283 97.1814 103.951 97.1753 104.649C97.1692 105.348 97.4377 106.02 97.9227 106.523L101.366 109.966L97.9227 113.409C97.6684 113.655 97.4655 113.949 97.326 114.274C97.1864 114.598 97.1129 114.948 97.1098 115.301C97.1068 115.655 97.1742 116.006 97.3081 116.333C97.442 116.66 97.6397 116.958 97.8897 117.208C98.1398 117.458 98.4371 117.655 98.7644 117.789C99.0917 117.923 99.4423 117.991 99.7959 117.988C100.15 117.985 100.499 117.911 100.824 117.771C101.149 117.632 101.443 117.429 101.688 117.175L105.132 113.732L108.575 117.175C109.077 117.66 109.75 117.928 110.448 117.922C111.146 117.916 111.814 117.636 112.308 117.142C112.802 116.648 113.082 115.981 113.088 115.282C113.094 114.584 112.826 113.911 112.34 113.409L108.897 109.966L112.34 106.523C112.588 106.275 112.784 105.982 112.918 105.659C113.052 105.336 113.121 104.989 113.121 104.64C113.121 104.29 113.052 103.944 112.918 103.621C112.784 103.298 112.588 103.004 112.34 102.757ZM151.506 109.966L154.949 106.523C155.434 106.02 155.703 105.348 155.697 104.649C155.691 103.951 155.41 103.283 154.917 102.789C154.423 102.296 153.755 102.016 153.057 102.01C152.359 102.003 151.686 102.272 151.184 102.757L147.74 106.2L144.297 102.757C143.795 102.272 143.122 102.003 142.424 102.01C141.726 102.016 141.058 102.296 140.564 102.789C140.07 103.283 139.79 103.951 139.784 104.649C139.778 105.348 140.046 106.02 140.531 106.523L143.974 109.966L140.531 113.409C140.277 113.655 140.074 113.949 139.935 114.274C139.795 114.598 139.722 114.948 139.719 115.301C139.715 115.655 139.783 116.006 139.917 116.333C140.051 116.66 140.248 116.958 140.498 117.208C140.748 117.458 141.046 117.655 141.373 117.789C141.7 117.923 142.051 117.991 142.405 117.988C142.758 117.985 143.108 117.911 143.433 117.771C143.757 117.632 144.051 117.429 144.297 117.175L147.74 113.732L151.184 117.175C151.686 117.66 152.359 117.928 153.057 117.922C153.755 117.916 154.423 117.636 154.917 117.142C155.41 116.648 155.691 115.981 155.697 115.282C155.703 114.584 155.434 113.911 154.949 113.409L151.506 109.966Z\"/>\n </mask>\n <path d=\"M190.242 160.457L170.136 140.351C166.533 145.552 162.023 150.063 156.821 153.666L176.927 173.772C178.693 175.538 181.088 176.53 183.585 176.53C186.082 176.53 188.477 175.538 190.242 173.772C192.008 172.007 193 169.612 193 167.115C193 164.618 192.008 162.223 190.242 160.457ZM126.436 157.901C116.955 157.901 107.688 155.089 99.8048 149.822C91.922 144.555 85.7781 137.069 82.15 128.31C78.5219 119.551 77.5727 109.913 79.4222 100.614C81.2718 91.3158 85.8371 82.7746 92.5409 76.0708C99.2447 69.367 107.786 64.8017 117.084 62.9521C126.383 61.1026 136.021 62.0518 144.78 65.6799C153.539 69.308 161.025 75.4519 166.292 83.3347C171.559 91.2175 174.371 100.485 174.371 109.966C174.371 122.679 169.32 134.871 160.331 143.861C151.341 152.85 139.149 157.901 126.436 157.901ZM163.719 109.966C163.719 102.592 161.532 95.3838 157.435 89.2527C153.339 83.1216 147.516 78.343 140.703 75.5212C133.891 72.6994 126.395 71.9611 119.162 73.3996C111.93 74.8382 105.287 78.389 100.073 83.6031C94.8591 88.8171 91.3083 95.4602 89.8697 102.692C88.4312 109.924 89.1695 117.421 91.9913 124.233C94.8131 131.046 99.5918 136.869 105.723 140.965C111.854 145.062 119.062 147.248 126.436 147.248C136.324 147.248 145.807 143.32 152.799 136.329C159.791 129.337 163.719 119.854 163.719 109.966ZM133.645 102.757C133.398 102.51 133.104 102.313 132.781 102.179C132.458 102.046 132.112 101.977 131.762 101.977C131.412 101.977 131.066 102.046 130.743 102.179C130.42 102.313 130.126 102.51 129.879 102.757L126.436 106.2L122.993 102.757C122.49 102.272 121.818 102.003 121.119 102.01C120.421 102.016 119.753 102.296 119.26 102.789C118.766 103.283 118.486 103.951 118.48 104.649C118.474 105.348 118.742 106.02 119.227 106.523L122.67 109.966L119.227 113.409C118.973 113.655 118.77 113.949 118.63 114.274C118.491 114.598 118.417 114.948 118.414 115.301C118.411 115.655 118.479 116.006 118.612 116.333C118.746 116.66 118.944 116.958 119.194 117.208C119.444 117.458 119.741 117.655 120.069 117.789C120.396 117.923 120.747 117.991 121.1 117.988C121.454 117.985 121.803 117.911 122.128 117.771C122.453 117.632 122.747 117.429 122.993 117.175L126.436 113.732L129.879 117.175C130.382 117.66 131.054 117.928 131.752 117.922C132.451 117.916 133.119 117.636 133.612 117.142C134.106 116.648 134.386 115.981 134.392 115.282C134.398 114.584 134.13 113.911 133.645 113.409L130.202 109.966L133.645 106.523C133.892 106.275 134.088 105.982 134.222 105.659C134.356 105.336 134.425 104.989 134.425 104.64C134.425 104.29 134.356 103.944 134.222 103.621C134.088 103.298 133.892 103.004 133.645 102.757ZM112.34 102.757C112.093 102.51 111.8 102.313 111.477 102.179C111.154 102.046 110.807 101.977 110.458 101.977C110.108 101.977 109.762 102.046 109.439 102.179C109.116 102.313 108.822 102.51 108.575 102.757L105.132 106.2L101.688 102.757C101.186 102.272 100.513 102.003 99.8151 102.01C99.1169 102.016 98.4489 102.296 97.9552 102.789C97.4614 103.283 97.1814 103.951 97.1753 104.649C97.1692 105.348 97.4377 106.02 97.9227 106.523L101.366 109.966L97.9227 113.409C97.6684 113.655 97.4655 113.949 97.326 114.274C97.1864 114.598 97.1129 114.948 97.1098 115.301C97.1068 115.655 97.1742 116.006 97.3081 116.333C97.442 116.66 97.6397 116.958 97.8897 117.208C98.1398 117.458 98.4371 117.655 98.7644 117.789C99.0917 117.923 99.4423 117.991 99.7959 117.988C100.15 117.985 100.499 117.911 100.824 117.771C101.149 117.632 101.443 117.429 101.688 117.175L105.132 113.732L108.575 117.175C109.077 117.66 109.75 117.928 110.448 117.922C111.146 117.916 111.814 117.636 112.308 117.142C112.802 116.648 113.082 115.981 113.088 115.282C113.094 114.584 112.826 113.911 112.34 113.409L108.897 109.966L112.34 106.523C112.588 106.275 112.784 105.982 112.918 105.659C113.052 105.336 113.121 104.989 113.121 104.64C113.121 104.29 113.052 103.944 112.918 103.621C112.784 103.298 112.588 103.004 112.34 102.757ZM151.506 109.966L154.949 106.523C155.434 106.02 155.703 105.348 155.697 104.649C155.691 103.951 155.41 103.283 154.917 102.789C154.423 102.296 153.755 102.016 153.057 102.01C152.359 102.003 151.686 102.272 151.184 102.757L147.74 106.2L144.297 102.757C143.795 102.272 143.122 102.003 142.424 102.01C141.726 102.016 141.058 102.296 140.564 102.789C140.07 103.283 139.79 103.951 139.784 104.649C139.778 105.348 140.046 106.02 140.531 106.523L143.974 109.966L140.531 113.409C140.277 113.655 140.074 113.949 139.935 114.274C139.795 114.598 139.722 114.948 139.719 115.301C139.715 115.655 139.783 116.006 139.917 116.333C140.051 116.66 140.248 116.958 140.498 117.208C140.748 117.458 141.046 117.655 141.373 117.789C141.7 117.923 142.051 117.991 142.405 117.988C142.758 117.985 143.108 117.911 143.433 117.771C143.757 117.632 144.051 117.429 144.297 117.175L147.74 113.732L151.184 117.175C151.686 117.66 152.359 117.928 153.057 117.922C153.755 117.916 154.423 117.636 154.917 117.142C155.41 116.648 155.691 115.981 155.697 115.282C155.703 114.584 155.434 113.911 154.949 113.409L151.506 109.966Z\" fill=\"#93939A\"/>\n <path d=\"M190.242 160.457L170.136 140.351C166.533 145.552 162.023 150.063 156.821 153.666L176.927 173.772C178.693 175.538 181.088 176.53 183.585 176.53C186.082 176.53 188.477 175.538 190.242 173.772C192.008 172.007 193 169.612 193 167.115C193 164.618 192.008 162.223 190.242 160.457ZM126.436 157.901C116.955 157.901 107.688 155.089 99.8048 149.822C91.922 144.555 85.7781 137.069 82.15 128.31C78.5219 119.551 77.5727 109.913 79.4222 100.614C81.2718 91.3158 85.8371 82.7746 92.5409 76.0708C99.2447 69.367 107.786 64.8017 117.084 62.9521C126.383 61.1026 136.021 62.0518 144.78 65.6799C153.539 69.308 161.025 75.4519 166.292 83.3347C171.559 91.2175 174.371 100.485 174.371 109.966C174.371 122.679 169.32 134.871 160.331 143.861C151.341 152.85 139.149 157.901 126.436 157.901ZM163.719 109.966C163.719 102.592 161.532 95.3838 157.435 89.2527C153.339 83.1216 147.516 78.343 140.703 75.5212C133.891 72.6994 126.395 71.9611 119.162 73.3996C111.93 74.8382 105.287 78.389 100.073 83.6031C94.8591 88.8171 91.3083 95.4602 89.8697 102.692C88.4312 109.924 89.1695 117.421 91.9913 124.233C94.8131 131.046 99.5918 136.869 105.723 140.965C111.854 145.062 119.062 147.248 126.436 147.248C136.324 147.248 145.807 143.32 152.799 136.329C159.791 129.337 163.719 119.854 163.719 109.966ZM133.645 102.757C133.398 102.51 133.104 102.313 132.781 102.179C132.458 102.046 132.112 101.977 131.762 101.977C131.412 101.977 131.066 102.046 130.743 102.179C130.42 102.313 130.126 102.51 129.879 102.757L126.436 106.2L122.993 102.757C122.49 102.272 121.818 102.003 121.119 102.01C120.421 102.016 119.753 102.296 119.26 102.789C118.766 103.283 118.486 103.951 118.48 104.649C118.474 105.348 118.742 106.02 119.227 106.523L122.67 109.966L119.227 113.409C118.973 113.655 118.77 113.949 118.63 114.274C118.491 114.598 118.417 114.948 118.414 115.301C118.411 115.655 118.479 116.006 118.612 116.333C118.746 116.66 118.944 116.958 119.194 117.208C119.444 117.458 119.741 117.655 120.069 117.789C120.396 117.923 120.747 117.991 121.1 117.988C121.454 117.985 121.803 117.911 122.128 117.771C122.453 117.632 122.747 117.429 122.993 117.175L126.436 113.732L129.879 117.175C130.382 117.66 131.054 117.928 131.752 117.922C132.451 117.916 133.119 117.636 133.612 117.142C134.106 116.648 134.386 115.981 134.392 115.282C134.398 114.584 134.13 113.911 133.645 113.409L130.202 109.966L133.645 106.523C133.892 106.275 134.088 105.982 134.222 105.659C134.356 105.336 134.425 104.989 134.425 104.64C134.425 104.29 134.356 103.944 134.222 103.621C134.088 103.298 133.892 103.004 133.645 102.757ZM112.34 102.757C112.093 102.51 111.8 102.313 111.477 102.179C111.154 102.046 110.807 101.977 110.458 101.977C110.108 101.977 109.762 102.046 109.439 102.179C109.116 102.313 108.822 102.51 108.575 102.757L105.132 106.2L101.688 102.757C101.186 102.272 100.513 102.003 99.8151 102.01C99.1169 102.016 98.4489 102.296 97.9552 102.789C97.4614 103.283 97.1814 103.951 97.1753 104.649C97.1692 105.348 97.4377 106.02 97.9227 106.523L101.366 109.966L97.9227 113.409C97.6684 113.655 97.4655 113.949 97.326 114.274C97.1864 114.598 97.1129 114.948 97.1098 115.301C97.1068 115.655 97.1742 116.006 97.3081 116.333C97.442 116.66 97.6397 116.958 97.8897 117.208C98.1398 117.458 98.4371 117.655 98.7644 117.789C99.0917 117.923 99.4423 117.991 99.7959 117.988C100.15 117.985 100.499 117.911 100.824 117.771C101.149 117.632 101.443 117.429 101.688 117.175L105.132 113.732L108.575 117.175C109.077 117.66 109.75 117.928 110.448 117.922C111.146 117.916 111.814 117.636 112.308 117.142C112.802 116.648 113.082 115.981 113.088 115.282C113.094 114.584 112.826 113.911 112.34 113.409L108.897 109.966L112.34 106.523C112.588 106.275 112.784 105.982 112.918 105.659C113.052 105.336 113.121 104.989 113.121 104.64C113.121 104.29 113.052 103.944 112.918 103.621C112.784 103.298 112.588 103.004 112.34 102.757ZM151.506 109.966L154.949 106.523C155.434 106.02 155.703 105.348 155.697 104.649C155.691 103.951 155.41 103.283 154.917 102.789C154.423 102.296 153.755 102.016 153.057 102.01C152.359 102.003 151.686 102.272 151.184 102.757L147.74 106.2L144.297 102.757C143.795 102.272 143.122 102.003 142.424 102.01C141.726 102.016 141.058 102.296 140.564 102.789C140.07 103.283 139.79 103.951 139.784 104.649C139.778 105.348 140.046 106.02 140.531 106.523L143.974 109.966L140.531 113.409C140.277 113.655 140.074 113.949 139.935 114.274C139.795 114.598 139.722 114.948 139.719 115.301C139.715 115.655 139.783 116.006 139.917 116.333C140.051 116.66 140.248 116.958 140.498 117.208C140.748 117.458 141.046 117.655 141.373 117.789C141.7 117.923 142.051 117.991 142.405 117.988C142.758 117.985 143.108 117.911 143.433 117.771C143.757 117.632 144.051 117.429 144.297 117.175L147.74 113.732L151.184 117.175C151.686 117.66 152.359 117.928 153.057 117.922C153.755 117.916 154.423 117.636 154.917 117.142C155.41 116.648 155.691 115.981 155.697 115.282C155.703 114.584 155.434 113.911 154.949 113.409L151.506 109.966Z\" stroke=\"transparent\" stroke-width=\"20\" mask=\"url(#path-2-outside-1_0_1)\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_0_1\">\n <rect width=\"200\" height=\"200\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n </div>\n <div class=\"errorContainer\"></div>\n </div>\n</div>\n<div>\n <label class=\"ff-card-form-label\" for=\"cardHolderInput\">Cardholder name</label>\n <input class=\"ff-card-form-text-input\" id=\"cardHolderInput\" type=\"text\" pattern=\"[A-Za-z\\s]+\" placeholder=\"Full name on card\">\n <div class=\"errorContainer\"></div>\n</div>\n<div>\n <label class=\"ff-card-form-label\" for=\"emailAddressInput\">Email</label>\n <input class=\"ff-card-form-text-input\" id=\"emailAddressInput\" placeholder=\"Email\" type=\"email\">\n <div class=\"errorContainer\"></div>\n</div>\n<div id=\"countrySelectorField\">\n <label class=\"ff-card-form-label\" for=\"countrySelectorInput\">Country</label>\n <div class=\"ff-select-wrap\">\n <select class=\"ff-card-form-text-input ff-card-form-select\" id=\"countrySelectorInput\"></select>\n <div class=\"ff-select-arrow\" aria-hidden=\"true\"></div>\n </div>\n</div>\n<div>\n <label class=\"ff-card-form-label\" for=\"postalCodeInput\">Zip code</label>\n <input class=\"ff-card-form-text-input\" id=\"postalCodeInput\" placeholder=\"12345\">\n</div>\n";
2322
2315
 
2323
- if(typeof document!=="undefined")document.head.appendChild(document.createElement("style")).textContent="\n\n.ff-card-form-label {\n display: block;\n font-size: 16px;\n margin-bottom: 5px;\n }\n \n .card-form-row {\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n \n .ff-card-form-text-input {\n margin: 0 0 3px;\n padding-left: 10px;\n padding-right: 10px;\n box-sizing: border-box;\n height: 36px;\n width: 100%;\n font-size: 1rem;\n background-color: transparent;\n border: 1px solid rgb(0 0 0 / 10%);\n border-radius: 6px;\n transition: all 0.3s ease;\n box-shadow: none;\n outline: none;\n }\n .ff-card-form-text-input.error {\n border-color: #e32f41;\n }\n\n.ff-select-wrap {\n position: relative;\n}\n\n.ff-card-form-select {\n padding-right: 34px;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n background-image: none;\n}\n\n.ff-card-form-select::-ms-expand {\n display: none;\n}\n\n.ff-select-arrow {\n position: absolute;\n top: 50%;\n right: 12px;\n width: 8px;\n height: 8px;\n border-right: 1.5px solid #6b7280;\n border-bottom: 1.5px solid #6b7280;\n transform: translateY(-65%) rotate(45deg);\n pointer-events: none;\n}\n\n.ff-select-wrap:focus-within .ff-select-arrow {\n border-right-color: #111827;\n border-bottom-color: #111827;\n}\n \n .errorContainer:not(:empty) {\n color: #d10000;\n font-size: 16px;\n line-height: 1;\n margin: 0 0 10px;\n }\n\n #cvvInput {\n position: relative;\n }\n \n #cvvInput > svg {\n z-index: 1;\n position: absolute;\n top: 5px;\n right: 5px;\n width: 26px;\n height: 26px;\n }";
2316
+ if(typeof document!=="undefined")document.head.appendChild(document.createElement("style")).textContent="\n\n.ff-card-form-label {\n display: block;\n font-size: 16px;\n margin-bottom: 5px;\n }\n \n .card-form-row {\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n \n .ff-card-form-text-input {\n margin: 0 0 3px;\n padding-left: 10px;\n padding-right: 10px;\n box-sizing: border-box;\n height: 36px;\n width: 100%;\n font-size: 1rem;\n background-color: transparent;\n border: 1px solid rgb(0 0 0 / 10%);\n border-radius: 6px;\n transition: all 0.3s ease;\n box-shadow: none;\n outline: none;\n }\n .ff-card-form-text-input.error {\n border-color: #e32f41;\n }\n\n.ff-select-wrap {\n position: relative;\n}\n\n.ff-card-form-select {\n padding-right: 34px;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n background-image: none;\n}\n\n.ff-card-form-select::-ms-expand {\n display: none;\n}\n\n.ff-card-form-select:disabled {\n color: #6b7280;\n cursor: not-allowed;\n}\n\n.ff-select-arrow {\n position: absolute;\n top: 50%;\n right: 12px;\n width: 8px;\n height: 8px;\n border-right: 1.5px solid #6b7280;\n border-bottom: 1.5px solid #6b7280;\n transform: translateY(-65%) rotate(45deg);\n pointer-events: none;\n}\n\n.ff-select-wrap:focus-within .ff-select-arrow {\n border-right-color: #111827;\n border-bottom-color: #111827;\n}\n \n .errorContainer:not(:empty) {\n color: #d10000;\n font-size: 16px;\n line-height: 1;\n margin: 0 0 10px;\n }\n\n #cvvInput {\n position: relative;\n }\n \n #cvvInput > svg {\n z-index: 1;\n position: absolute;\n top: 5px;\n right: 5px;\n width: 26px;\n height: 26px;\n }";
2324
2317
 
2325
2318
  class CardSkin {
2326
2319
  constructor(containerEl, checkoutConfig, cardSessionFieldConfig) {
@@ -2333,15 +2326,20 @@
2333
2326
  cvv: cardInputElements.cvv.parentElement,
2334
2327
  cardholderName: cardInputElements.cardholderName?.parentElement,
2335
2328
  emailAddress: cardInputElements.emailAddress?.parentElement,
2329
+ postalCode: cardInputElements.postalCode?.parentElement,
2336
2330
  };
2337
2331
  const errorContainer = elementsMap[name]?.querySelector('.errorContainer');
2338
2332
  if (errorContainer) {
2339
2333
  errorContainer.textContent = error || '';
2340
2334
  }
2341
- if (name === 'cardholderName' || name === 'emailAddress') {
2335
+ if (name === 'cardholderName' ||
2336
+ name === 'emailAddress' ||
2337
+ name === 'postalCode') {
2342
2338
  const field = name === 'cardholderName'
2343
2339
  ? cardInputElements.cardholderName
2344
- : cardInputElements.emailAddress;
2340
+ : name === 'emailAddress'
2341
+ ? cardInputElements.emailAddress
2342
+ : cardInputElements.postalCode;
2345
2343
  if (error) {
2346
2344
  field?.classList?.add('error');
2347
2345
  }
@@ -2382,20 +2380,10 @@
2382
2380
  return this.cardSessionFieldConfig?.countryFieldOverrides?.[countryCode];
2383
2381
  }
2384
2382
  isCountrySelectorVisible() {
2385
- return !!(this.cardSessionFieldConfig?.showCountrySelector &&
2386
- this.cardSessionFieldConfig?.validCountries?.length);
2383
+ return !!this.cardSessionFieldConfig?.showCountrySelector;
2387
2384
  }
2388
- isCardholderNameVisible(countryCode = this.getSelectedCountryCode()) {
2389
- const defaultVisible = !!this.checkoutConfig.card?.cardholderName?.required;
2390
- const shouldApplyOverrides = !!this.cardSessionFieldConfig?.applyCardholderNameOverrides;
2391
- if (!shouldApplyOverrides) {
2392
- return defaultVisible;
2393
- }
2394
- const overrideValue = this.getCountryFieldOverride(countryCode)?.show_cardholder_name;
2395
- if (overrideValue === null || overrideValue === undefined) {
2396
- return defaultVisible;
2397
- }
2398
- return overrideValue;
2385
+ isCardholderNameVisible() {
2386
+ return !!this.checkoutConfig.card?.cardholderName?.required;
2399
2387
  }
2400
2388
  isPostalCodeVisible(countryCode = this.getSelectedCountryCode()) {
2401
2389
  const defaultVisible = !!this.cardSessionFieldConfig?.showPostalCode;
@@ -2411,10 +2399,27 @@
2411
2399
  field.parentElement.style.display = isVisible ? '' : 'none';
2412
2400
  }
2413
2401
  }
2402
+ setContainerVisibility(containerId, isVisible) {
2403
+ const container = this.containerEl.querySelector(`#${containerId}`);
2404
+ if (container) {
2405
+ container.style.display = isVisible ? '' : 'none';
2406
+ }
2407
+ }
2414
2408
  populateCountrySelector(selectEl) {
2415
2409
  const validCountries = this.cardSessionFieldConfig?.validCountries || [];
2416
2410
  const selectedCountryCode = this.getSelectedCountryCode();
2417
2411
  selectEl.innerHTML = '';
2412
+ selectEl.disabled = false;
2413
+ if (!validCountries.length) {
2414
+ const fallbackOption = document.createElement('option');
2415
+ fallbackOption.value = selectedCountryCode || '';
2416
+ fallbackOption.textContent = selectedCountryCode
2417
+ ? `Detected country: ${selectedCountryCode}`
2418
+ : 'Country unavailable';
2419
+ selectEl.appendChild(fallbackOption);
2420
+ selectEl.disabled = true;
2421
+ return;
2422
+ }
2418
2423
  const placeholderOption = document.createElement('option');
2419
2424
  placeholderOption.value = '';
2420
2425
  placeholderOption.textContent = 'Select country';
@@ -2430,7 +2435,7 @@
2430
2435
  }
2431
2436
  }
2432
2437
  updateDynamicFieldVisibility(countryCode = this.getSelectedCountryCode()) {
2433
- this.setFieldVisibility('cardHolderInput', this.isCardholderNameVisible(countryCode));
2438
+ this.setFieldVisibility('cardHolderInput', this.isCardholderNameVisible());
2434
2439
  this.setFieldVisibility('postalCodeInput', this.isPostalCodeVisible(countryCode));
2435
2440
  const postalCodeInput = this.containerEl.querySelector('#postalCodeInput');
2436
2441
  if (!this.isPostalCodeVisible(countryCode) && postalCodeInput) {
@@ -2462,7 +2467,7 @@
2462
2467
  this.updateDynamicFieldVisibility(this.normalizeCountryCode(countrySelector.value));
2463
2468
  });
2464
2469
  }
2465
- this.setFieldVisibility('countrySelectorInput', this.isCountrySelectorVisible());
2470
+ this.setContainerVisibility('countrySelectorField', this.isCountrySelectorVisible());
2466
2471
  this.updateDynamicFieldVisibility();
2467
2472
  if (!cardNumber ||
2468
2473
  !expiryDate ||
@@ -2496,11 +2501,6 @@
2496
2501
  getCheckoutOptions() {
2497
2502
  return {
2498
2503
  cardElements: this.getCardInputElements(),
2499
- card: {
2500
- cardholderName: {
2501
- required: false,
2502
- },
2503
- },
2504
2504
  };
2505
2505
  }
2506
2506
  }