@funnelfox/billing 0.5.0-beta.0 → 0.5.0-beta.1

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 (9) hide show
  1. package/README.md +36 -0
  2. package/dist/chunk-index.cjs.js +29 -6
  3. package/dist/chunk-index.es.js +29 -6
  4. package/dist/funnelfox-billing.cjs.js +15 -2
  5. package/dist/funnelfox-billing.esm.js +15 -2
  6. package/dist/funnelfox-billing.js +43 -8
  7. package/dist/funnelfox-billing.min.js +1 -1
  8. package/package.json +2 -2
  9. package/src/types.d.ts +1 -0
package/README.md CHANGED
@@ -110,6 +110,7 @@ const checkout = await createCheckout({
110
110
  paypalButtonContainer: '#paypalButton', // Optional
111
111
  googlePayButtonContainer: '#googlePayButton', // Optional
112
112
  applePayButtonContainer: '#applePayButton', // Optional
113
+ paymentMethodOrder: ['PAYMENT_CARD', 'PAYPAL', 'GOOGLE_PAY', 'APPLE_PAY'], // Optional
113
114
 
114
115
  // Callbacks (alternative to events)
115
116
  onSuccess: result => {
@@ -138,6 +139,7 @@ const checkout = await createCheckout({
138
139
  - `options.paypalButtonContainer` (string, optional) - Container selector for PayPal button
139
140
  - `options.googlePayButtonContainer` (string, optional) - Container selector for Google Pay button
140
141
  - `options.applePayButtonContainer` (string, optional) - Container selector for Apple Pay button
142
+ - `options.paymentMethodOrder` (array, optional) - Custom order for payment methods. Available values: `'PAYMENT_CARD'`, `'PAYPAL'`, `'GOOGLE_PAY'`, `'APPLE_PAY'`. Defaults to `['PAYMENT_CARD', 'PAYPAL', 'GOOGLE_PAY', 'APPLE_PAY']`
141
143
  - `options.onInitialized` (function, optional) - Initialized callback
142
144
  - `options.onSuccess` (function, optional) - Success callback
143
145
  - `options.onError` (function, optional) - Error callback
@@ -427,6 +429,7 @@ import {
427
429
  CheckoutInstance,
428
430
  PaymentResult,
429
431
  CheckoutConfig,
432
+ PaymentMethod,
430
433
  } from '@funnelfox/billing';
431
434
 
432
435
  // Configure
@@ -447,6 +450,12 @@ const checkout: CheckoutInstance = await createCheckout({
447
450
  source: 'web',
448
451
  campaign: 'summer-sale',
449
452
  },
453
+ paymentMethodOrder: [
454
+ PaymentMethod.PAYPAL,
455
+ PaymentMethod.PAYMENT_CARD,
456
+ PaymentMethod.GOOGLE_PAY,
457
+ PaymentMethod.APPLE_PAY,
458
+ ],
450
459
  });
451
460
 
452
461
  // Type-safe event handlers
@@ -512,6 +521,33 @@ const checkout = await createCheckout({
512
521
  });
513
522
  ```
514
523
 
524
+ ### Custom Payment Method Order
525
+
526
+ You can customize the order in which payment methods are displayed to your customers:
527
+
528
+ ```javascript
529
+ const checkout = await createCheckout({
530
+ priceId: 'price_123',
531
+ customer: {
532
+ externalId: 'user_456',
533
+ email: 'user@example.com',
534
+ },
535
+ container: '#checkout',
536
+
537
+ // Customize payment method order
538
+ paymentMethodOrder: ['PAYPAL', 'GOOGLE_PAY', 'APPLE_PAY', 'PAYMENT_CARD'],
539
+ });
540
+ ```
541
+
542
+ **Available payment methods:**
543
+
544
+ - `'PAYMENT_CARD'` - Credit/debit card payment
545
+ - `'PAYPAL'` - PayPal payment
546
+ - `'GOOGLE_PAY'` - Google Pay payment
547
+ - `'APPLE_PAY'` - Apple Pay payment
548
+
549
+ By default, payment methods are shown in the order: Card, PayPal, Google Pay, Apple Pay. You can reorder them to match your business priorities or regional preferences.
550
+
515
551
  ### Manual Session Creation
516
552
 
517
553
  For advanced integrations where you want to control the Primer Headless Checkout directly:
package/dist/chunk-index.cjs.js CHANGED
@@ -7,14 +7,29 @@
7
7
  */
8
8
  'use strict';
9
9
 
10
+ var index$1 = require('./funnelfox-billing.cjs.js');
10
11
  var index = require('./chunk-index.cjs2.js');
11
12
 
12
- var template = "<div class=\"ff-skin-default\">\n <!-- Apple Pay Section -->\n <div class=\"ff-payment-method-card ff-payment-method-apple-pay\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"apple-pay\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-apple-pay-logo\">\n <svg class=\"payment-method-icon\" height=\"26\" viewBox=\"0 0 63 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.41022 4.82398C9.5916 4.92293 10.773 4.23026 11.5113 3.35205C12.2374 2.4491 12.7173 1.23692 12.5943 0C11.5483 0.0494767 10.2561 0.692674 9.51777 1.59562C8.84093 2.37488 8.26255 3.63654 8.41022 4.82398ZM22.4638 20.7555V1.47193H29.6628C33.3793 1.47193 35.9758 4.04471 35.9758 7.80494C35.9758 11.5652 33.33 14.1627 29.5644 14.1627H25.4418V20.7555H22.4638ZM12.5819 5.05898C11.5411 4.99877 10.5914 5.37358 9.82438 5.67633C9.33075 5.87116 8.91274 6.03614 8.59472 6.03614C8.23784 6.03614 7.80257 5.86234 7.31387 5.66719C6.6735 5.4115 5.94138 5.11916 5.17364 5.13319C3.41387 5.15793 1.77716 6.15983 0.878819 7.75545C-0.967091 10.9467 0.398882 15.6717 2.18326 18.2693C3.05699 19.5556 4.10301 20.9657 5.48129 20.9163C6.08765 20.8933 6.52383 20.7072 6.97524 20.5147C7.49492 20.293 8.0348 20.0628 8.87776 20.0628C9.69151 20.0628 10.2078 20.287 10.7033 20.5023C11.1746 20.707 11.6271 20.9036 12.2989 20.8915C13.7264 20.8668 14.6247 19.6051 15.4984 18.3187C16.4413 16.9381 16.8557 15.5906 16.9186 15.3861C16.9222 15.3745 16.9246 15.3665 16.9259 15.3625C16.9244 15.361 16.9128 15.3556 16.8922 15.3462C16.577 15.2011 14.1679 14.0926 14.1448 11.1199C14.1216 8.62473 16.0556 7.36054 16.3601 7.16153C16.3786 7.14944 16.3911 7.14125 16.3968 7.137C15.1662 5.30636 13.2464 5.10845 12.5819 5.05898ZM41.4153 20.9039C43.2858 20.9039 45.0209 19.9515 45.8085 18.4424H45.8701V20.7555H48.6266V11.157C48.6266 8.37393 46.4115 6.5804 43.0027 6.5804C39.8401 6.5804 37.5019 8.39866 37.4158 10.8972H40.0985C40.32 9.70979 41.4153 8.93054 42.9166 8.93054C44.7379 8.93054 45.7593 9.78401 45.7593 11.3549V12.4186L42.0429 12.6413C38.5849 12.8516 36.7143 14.274 36.7143 16.7479C36.7143 19.2464 38.6464 20.9039 41.4153 20.9039ZM42.215 18.6156C40.6275 18.6156 39.6184 17.8487 39.6184 16.6736C39.6184 15.4615 40.5906 14.7564 42.4488 14.6451L45.7591 14.4348V15.5233C45.7591 17.3292 44.2332 18.6156 42.215 18.6156ZM57.7699 21.51C56.5762 24.8868 55.2103 26 52.306 26C52.0845 26 51.3461 25.9753 51.1739 25.9258V23.6127C51.3585 23.6375 51.8138 23.6622 52.0476 23.6622C53.3643 23.6622 54.1027 23.1056 54.558 21.6584L54.8288 20.8049L49.7833 6.76594H52.8967L56.4039 18.1579H56.4655L59.9727 6.76594H63L57.7699 21.51ZM25.4416 3.99524H28.875C31.4592 3.99524 32.936 5.38059 32.936 7.81731C32.936 10.254 31.4592 11.6518 28.8627 11.6518H25.4416V3.99524Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Protected by Apple Pay’s unique Device Account Numbe</span>\n </li>\n </ul>\n <div class=\"ff-apple-pay-button-container ff-payment-container\" id=\"applePayButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with Apple Pay encryption\n </p>\n </div>\n </div>\n\n <!-- Google Pay Section -->\n <div class=\"ff-payment-method-card ff-payment-method-google-pay\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"google-pay\" class=\"ff-payment-method-radio\" checked=\"checked\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-google-pay-logo\">\n <svg class=\"payment-method-icon\" height=\"26\" viewBox=\"0 0 59 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M27.3601 11.6862V18.4674H25.208V1.72177H30.9132C32.3591 1.72177 33.592 2.20374 34.6008 3.16768C35.632 4.13162 36.1476 5.30852 36.1476 6.69838C36.1476 8.12187 35.632 9.29877 34.6008 10.2515C33.6032 11.2042 32.3703 11.675 30.9132 11.675H27.3601V11.6862ZM27.3601 3.78415V9.62382H30.958C31.8099 9.62382 32.5272 9.3324 33.0876 8.76076C33.6593 8.18912 33.9507 7.49419 33.9507 6.70959C33.9507 5.9362 33.6593 5.25248 33.0876 4.68084C32.5272 4.08678 31.8211 3.79536 30.958 3.79536H27.3601V3.78415Z\" fill=\"currentColor\"/>\n <path d=\"M41.7742 6.63107C43.3658 6.63107 44.6212 7.057 45.5403 7.90885C46.4594 8.7607 46.9189 9.9264 46.9189 11.4059V18.4673H44.8677V16.8757H44.7781C43.8926 18.1871 42.7045 18.8372 41.225 18.8372C39.9584 18.8372 38.9048 18.4673 38.0529 17.7164C37.2011 16.9654 36.7751 16.0351 36.7751 14.9142C36.7751 13.7261 37.2235 12.7846 38.1202 12.0896C39.0169 11.3835 40.2162 11.036 41.7069 11.036C42.9847 11.036 44.0383 11.2714 44.8565 11.7422V11.249C44.8565 10.498 44.5651 9.87035 43.9711 9.34355C43.377 8.81674 42.6821 8.55895 41.8863 8.55895C40.6869 8.55895 39.7342 9.06333 39.0393 10.0833L37.145 8.8952C38.1874 7.38205 39.7342 6.63107 41.7742 6.63107ZM38.9944 14.9478C38.9944 15.5083 39.2298 15.979 39.7118 16.3489C40.1826 16.7188 40.743 16.9093 41.3819 16.9093C42.2898 16.9093 43.0968 16.5731 43.8029 15.9006C44.5091 15.228 44.8677 14.4435 44.8677 13.5356C44.1952 13.0088 43.2649 12.7397 42.0656 12.7397C41.1913 12.7397 40.4628 12.9527 39.8799 13.3674C39.2859 13.8046 38.9944 14.3314 38.9944 14.9478Z\" fill=\"currentColor\"/>\n <path d=\"M58.6207 7.00095L51.4472 23.5H49.2279L51.8955 17.7276L47.1655 7.00095H49.5081L52.9155 15.228H52.9604L56.2781 7.00095H58.6207Z\" fill=\"currentColor\"/>\n <path d=\"M18.8001 10.3187C18.8001 9.61709 18.7373 8.94569 18.6208 8.30008H9.6001V11.9989L14.7953 12C14.5846 13.2307 13.9064 14.2799 12.8674 14.9793V17.379H15.9598C17.7655 15.7078 18.8001 13.2375 18.8001 10.3187Z\" fill=\"#4285F4\"/>\n <path d=\"M12.8685 14.9793C12.0076 15.5599 10.8991 15.8995 9.60228 15.8995C7.09717 15.8995 4.97202 14.2115 4.21096 11.9361H1.021V14.411C2.60141 17.5472 5.84965 19.6992 9.60228 19.6992C12.1959 19.6992 14.3749 18.8462 15.9609 17.3779L12.8685 14.9793Z\" fill=\"#34A853\"/>\n <path d=\"M3.91043 10.1002C3.91043 9.46129 4.01691 8.8437 4.21082 8.26309V5.78824H1.02086C0.367396 7.08507 -0.000244141 8.54891 -0.000244141 10.1002C-0.000244141 11.6514 0.368516 13.1153 1.02086 14.4121L4.21082 11.9373C4.01691 11.3567 3.91043 10.7391 3.91043 10.1002Z\" fill=\"#FABB05\"/>\n <path d=\"M9.60228 4.29974C11.0179 4.29974 12.2856 4.78731 13.2865 5.74004L16.027 3.00179C14.3626 1.45164 12.1926 0.500031 9.60228 0.500031C5.85077 0.500031 2.60141 2.65208 1.021 5.78824L4.21096 8.26309C4.97202 5.98775 7.09717 4.29974 9.60228 4.29974Z\" fill=\"#E94235\"/>\n </svg>\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Protected by Google Pay's unique Device Account Number</span>\n </li>\n </ul>\n <div class=\"ff-google-pay-button-container ff-payment-container\" id=\"googlePayButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n <!-- PayPal Section -->\n <div class=\"ff-payment-method-card ff-payment-method-paypal\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"paypal\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-paypal-logo\">\n <img class=\"payment-method-icon\" style=\"max-height: 22px\" src=\"https://assets.fnlfx.com/common/checkout/paypal.webp\" alt=\"PayPal logo\">\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span> Fast, convenient payment option </span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>\n Keeps your financial info safe with end-to-end encryption\n </span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span> Backed by PayPal’s industry-leading fraud protection </span>\n </li>\n </ul>\n <div class=\"ff-paypal-button-container ff-payment-container\" id=\"paypalButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n\n <!-- Card Payments Section -->\n <div class=\"ff-payment-method-card ff-payment-method-payment-card\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"card\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-card-logos\">\n <img class=\"payment-method-icon\" style=\"max-height: 30px\" src=\"https://assets.fnlfx.com/common/checkout/cards.webp\" alt=\"visa, mastercard\">\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <div class=\"ff-card-form-container ff-payment-container\" id=\"cardForm\">\n <div class=\"loader-container\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <button class=\"ff-card-form-submit-button\" id=\"submitButton\">\n Continue\n </button>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n </div>\n <div id=\"success-screen\" style=\"display: none\">\n <div class=\"success\">\n <img alt=\"Loading\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1IDAuMTExMzI4QzIwLjA3NzQgMC4xMTEzMjggMTUuMjY1NCAxLjU3MTA0IDExLjE3MjUgNC4zMDU4NkM3LjA3OTUyIDcuMDQwNjkgMy44ODk0NSAxMC45Mjc4IDIuMDA1NjYgMTUuNDc1N0MwLjEyMTg4MyAyMC4wMjM1IC0wLjM3MSAyNS4wMjc4IDAuNTg5MzQzIDI5Ljg1NThDMS41NDk2OSAzNC42ODM4IDMuOTIwMTIgMzkuMTE4NSA3LjQwMDkgNDIuNTk5M0MxMC44ODE3IDQ2LjA4MDEgMTUuMzE2NCA0OC40NTA1IDIwLjE0NDQgNDkuNDEwOUMyNC45NzI0IDUwLjM3MTIgMjkuOTc2NyA0OS44NzgzIDM0LjUyNDYgNDcuOTk0NkMzOS4wNzI0IDQ2LjExMDggNDIuOTU5NSA0Mi45MjA3IDQ1LjY5NDQgMzguODI3N0M0OC40MjkyIDM0LjczNDggNDkuODg4OSAyOS45MjI4IDQ5Ljg4ODkgMjUuMDAwMkM0OS44ODg5IDE4LjM5OTMgNDcuMjY2NyAxMi4wNjg3IDQyLjU5OTEgNy40MDExMkMzNy45MzE1IDIuNzMzNTQgMzEuNjAwOSAwLjExMTMyOCAyNSAwLjExMTMyOFpNNDEuMjU1NiAxNi42NDY5TDIwLjgxNTYgMzcuMDcxM0w4Ljc0NDQ0IDI1LjAwMDJDOC4zMzE4OCAyNC41ODc3IDguMTAwMTEgMjQuMDI4MSA4LjEwMDExIDIzLjQ0NDdDOC4xMDAxMSAyMi44NjEyIDguMzMxODggMjIuMzAxNyA4Ljc0NDQ0IDIxLjg4OTFDOS4xNTcgMjEuNDc2NSA5LjcxNjU1IDIxLjI0NDggMTAuMyAyMS4yNDQ4QzEwLjg4MzQgMjEuMjQ0OCAxMS40NDMgMjEuNDc2NSAxMS44NTU2IDIxLjg4OTFMMjAuODQ2NyAzMC44ODAyTDM4LjE3NTYgMTMuNTY2OUMzOC4zNzk4IDEzLjM2MjYgMzguNjIyMyAxMy4yMDA2IDM4Ljg4OTIgMTMuMDlDMzkuMTU2MiAxMi45Nzk1IDM5LjQ0MjIgMTIuOTIyNiAzOS43MzExIDEyLjkyMjZDNDAuMDIgMTIuOTIyNiA0MC4zMDYxIDEyLjk3OTUgNDAuNTczIDEzLjA5QzQwLjgzOTkgMTMuMjAwNiA0MS4wODI0IDEzLjM2MjYgNDEuMjg2NyAxMy41NjY5QzQxLjQ5MDkgMTMuNzcxMiA0MS42NTMgMTQuMDEzNyA0MS43NjM1IDE0LjI4MDZDNDEuODc0MSAxNC41NDc1IDQxLjkzMSAxNC44MzM1IDQxLjkzMSAxNS4xMjI0QzQxLjkzMSAxNS40MTEzIDQxLjg3NDEgMTUuNjk3NCA0MS43NjM1IDE1Ljk2NDNDNDEuNjUzIDE2LjIzMTIgNDEuNDkwOSAxNi40NzM3IDQxLjI4NjcgMTYuNjc4TDQxLjI1NTYgMTYuNjQ2OVoiIGZpbGw9IiM4RURGQzIiLz4KPC9zdmc+Cg==\">\n <div>Payment completed successfully</div>\n </div>\n </div>\n</div>\n";
13
+ var template = "<div class=\"ff-skin-default\" id=\"ff-payment-method-containers\">\n <div id=\"success-screen\" style=\"display: none\">\n <div class=\"success\">\n <img alt=\"Loading\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1IDAuMTExMzI4QzIwLjA3NzQgMC4xMTEzMjggMTUuMjY1NCAxLjU3MTA0IDExLjE3MjUgNC4zMDU4NkM3LjA3OTUyIDcuMDQwNjkgMy44ODk0NSAxMC45Mjc4IDIuMDA1NjYgMTUuNDc1N0MwLjEyMTg4MyAyMC4wMjM1IC0wLjM3MSAyNS4wMjc4IDAuNTg5MzQzIDI5Ljg1NThDMS41NDk2OSAzNC42ODM4IDMuOTIwMTIgMzkuMTE4NSA3LjQwMDkgNDIuNTk5M0MxMC44ODE3IDQ2LjA4MDEgMTUuMzE2NCA0OC40NTA1IDIwLjE0NDQgNDkuNDEwOUMyNC45NzI0IDUwLjM3MTIgMjkuOTc2NyA0OS44NzgzIDM0LjUyNDYgNDcuOTk0NkMzOS4wNzI0IDQ2LjExMDggNDIuOTU5NSA0Mi45MjA3IDQ1LjY5NDQgMzguODI3N0M0OC40MjkyIDM0LjczNDggNDkuODg4OSAyOS45MjI4IDQ5Ljg4ODkgMjUuMDAwMkM0OS44ODg5IDE4LjM5OTMgNDcuMjY2NyAxMi4wNjg3IDQyLjU5OTEgNy40MDExMkMzNy45MzE1IDIuNzMzNTQgMzEuNjAwOSAwLjExMTMyOCAyNSAwLjExMTMyOFpNNDEuMjU1NiAxNi42NDY5TDIwLjgxNTYgMzcuMDcxM0w4Ljc0NDQ0IDI1LjAwMDJDOC4zMzE4OCAyNC41ODc3IDguMTAwMTEgMjQuMDI4MSA4LjEwMDExIDIzLjQ0NDdDOC4xMDAxMSAyMi44NjEyIDguMzMxODggMjIuMzAxNyA4Ljc0NDQ0IDIxLjg4OTFDOS4xNTcgMjEuNDc2NSA5LjcxNjU1IDIxLjI0NDggMTAuMyAyMS4yNDQ4QzEwLjg4MzQgMjEuMjQ0OCAxMS40NDMgMjEuNDc2NSAxMS44NTU2IDIxLjg4OTFMMjAuODQ2NyAzMC44ODAyTDM4LjE3NTYgMTMuNTY2OUMzOC4zNzk4IDEzLjM2MjYgMzguNjIyMyAxMy4yMDA2IDM4Ljg4OTIgMTMuMDlDMzkuMTU2MiAxMi45Nzk1IDM5LjQ0MjIgMTIuOTIyNiAzOS43MzExIDEyLjkyMjZDNDAuMDIgMTIuOTIyNiA0MC4zMDYxIDEyLjk3OTUgNDAuNTczIDEzLjA5QzQwLjgzOTkgMTMuMjAwNiA0MS4wODI0IDEzLjM2MjYgNDEuMjg2NyAxMy41NjY5QzQxLjQ5MDkgMTMuNzcxMiA0MS42NTMgMTQuMDEzNyA0MS43NjM1IDE0LjI4MDZDNDEuODc0MSAxNC41NDc1IDQxLjkzMSAxNC44MzM1IDQxLjkzMSAxNS4xMjI0QzQxLjkzMSAxNS40MTEzIDQxLjg3NDEgMTUuNjk3NCA0MS43NjM1IDE1Ljk2NDNDNDEuNjUzIDE2LjIzMTIgNDEuNDkwOSAxNi40NzM3IDQxLjI4NjcgMTYuNjc4TDQxLjI1NTYgMTYuNjQ2OVoiIGZpbGw9IiM4RURGQzIiLz4KPC9zdmc+Cg==\">\n <div>Payment completed successfully</div>\n </div>\n </div>\n</div>\n";
14
+
15
+ var cardTemplate = "<!-- Card Payments Section -->\n<div class=\"ff-payment-method-card ff-payment-method-payment-card\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"card\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-card-logos\">\n <img class=\"payment-method-icon\" style=\"max-height: 30px\" src=\"https://assets.fnlfx.com/common/checkout/cards.webp\" alt=\"visa, mastercard\">\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <div class=\"ff-card-form-container ff-payment-container\" id=\"cardForm\">\n <div class=\"loader-container\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <button class=\"ff-card-form-submit-button\" id=\"submitButton\">\n Continue\n </button>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n</div>\n";
16
+
17
+ var paypalTemplate = "<div class=\"ff-payment-method-card ff-payment-method-paypal\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"paypal\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-paypal-logo\">\n <img class=\"payment-method-icon\" style=\"max-height: 22px\" src=\"https://assets.fnlfx.com/common/checkout/paypal.webp\" alt=\"PayPal logo\">\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span> Fast, convenient payment option </span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span> Keeps your financial info safe with end-to-end encryption </span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span> Backed by PayPal’s industry-leading fraud protection </span>\n </li>\n </ul>\n <div class=\"ff-paypal-button-container ff-payment-container\" id=\"paypalButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n</div>\n";
18
+
19
+ var googlePayTemplate = "<!-- Google Pay Section -->\n<div class=\"ff-payment-method-card ff-payment-method-google-pay\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"google-pay\" class=\"ff-payment-method-radio\" checked=\"checked\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-google-pay-logo\">\n <svg class=\"payment-method-icon\" height=\"26\" viewBox=\"0 0 59 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M27.3601 11.6862V18.4674H25.208V1.72177H30.9132C32.3591 1.72177 33.592 2.20374 34.6008 3.16768C35.632 4.13162 36.1476 5.30852 36.1476 6.69838C36.1476 8.12187 35.632 9.29877 34.6008 10.2515C33.6032 11.2042 32.3703 11.675 30.9132 11.675H27.3601V11.6862ZM27.3601 3.78415V9.62382H30.958C31.8099 9.62382 32.5272 9.3324 33.0876 8.76076C33.6593 8.18912 33.9507 7.49419 33.9507 6.70959C33.9507 5.9362 33.6593 5.25248 33.0876 4.68084C32.5272 4.08678 31.8211 3.79536 30.958 3.79536H27.3601V3.78415Z\" fill=\"currentColor\"/>\n <path d=\"M41.7742 6.63107C43.3658 6.63107 44.6212 7.057 45.5403 7.90885C46.4594 8.7607 46.9189 9.9264 46.9189 11.4059V18.4673H44.8677V16.8757H44.7781C43.8926 18.1871 42.7045 18.8372 41.225 18.8372C39.9584 18.8372 38.9048 18.4673 38.0529 17.7164C37.2011 16.9654 36.7751 16.0351 36.7751 14.9142C36.7751 13.7261 37.2235 12.7846 38.1202 12.0896C39.0169 11.3835 40.2162 11.036 41.7069 11.036C42.9847 11.036 44.0383 11.2714 44.8565 11.7422V11.249C44.8565 10.498 44.5651 9.87035 43.9711 9.34355C43.377 8.81674 42.6821 8.55895 41.8863 8.55895C40.6869 8.55895 39.7342 9.06333 39.0393 10.0833L37.145 8.8952C38.1874 7.38205 39.7342 6.63107 41.7742 6.63107ZM38.9944 14.9478C38.9944 15.5083 39.2298 15.979 39.7118 16.3489C40.1826 16.7188 40.743 16.9093 41.3819 16.9093C42.2898 16.9093 43.0968 16.5731 43.8029 15.9006C44.5091 15.228 44.8677 14.4435 44.8677 13.5356C44.1952 13.0088 43.2649 12.7397 42.0656 12.7397C41.1913 12.7397 40.4628 12.9527 39.8799 13.3674C39.2859 13.8046 38.9944 14.3314 38.9944 14.9478Z\" fill=\"currentColor\"/>\n <path d=\"M58.6207 7.00095L51.4472 23.5H49.2279L51.8955 17.7276L47.1655 7.00095H49.5081L52.9155 15.228H52.9604L56.2781 7.00095H58.6207Z\" fill=\"currentColor\"/>\n <path d=\"M18.8001 10.3187C18.8001 9.61709 18.7373 8.94569 18.6208 8.30008H9.6001V11.9989L14.7953 12C14.5846 13.2307 13.9064 14.2799 12.8674 14.9793V17.379H15.9598C17.7655 15.7078 18.8001 13.2375 18.8001 10.3187Z\" fill=\"#4285F4\"/>\n <path d=\"M12.8685 14.9793C12.0076 15.5599 10.8991 15.8995 9.60228 15.8995C7.09717 15.8995 4.97202 14.2115 4.21096 11.9361H1.021V14.411C2.60141 17.5472 5.84965 19.6992 9.60228 19.6992C12.1959 19.6992 14.3749 18.8462 15.9609 17.3779L12.8685 14.9793Z\" fill=\"#34A853\"/>\n <path d=\"M3.91043 10.1002C3.91043 9.46129 4.01691 8.8437 4.21082 8.26309V5.78824H1.02086C0.367396 7.08507 -0.000244141 8.54891 -0.000244141 10.1002C-0.000244141 11.6514 0.368516 13.1153 1.02086 14.4121L4.21082 11.9373C4.01691 11.3567 3.91043 10.7391 3.91043 10.1002Z\" fill=\"#FABB05\"/>\n <path d=\"M9.60228 4.29974C11.0179 4.29974 12.2856 4.78731 13.2865 5.74004L16.027 3.00179C14.3626 1.45164 12.1926 0.500031 9.60228 0.500031C5.85077 0.500031 2.60141 2.65208 1.021 5.78824L4.21096 8.26309C4.97202 5.98775 7.09717 4.29974 9.60228 4.29974Z\" fill=\"#E94235\"/>\n </svg>\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Protected by Google Pay's unique Device Account Number</span>\n </li>\n </ul>\n <div class=\"ff-google-pay-button-container ff-payment-container\" id=\"googlePayButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n</div>\n";
20
+
21
+ var applePayTemplate = "<!-- Apple Pay Section -->\n<div class=\"ff-payment-method-card ff-payment-method-apple-pay\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"apple-pay\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-apple-pay-logo\">\n <svg class=\"payment-method-icon\" height=\"26\" viewBox=\"0 0 63 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.41022 4.82398C9.5916 4.92293 10.773 4.23026 11.5113 3.35205C12.2374 2.4491 12.7173 1.23692 12.5943 0C11.5483 0.0494767 10.2561 0.692674 9.51777 1.59562C8.84093 2.37488 8.26255 3.63654 8.41022 4.82398ZM22.4638 20.7555V1.47193H29.6628C33.3793 1.47193 35.9758 4.04471 35.9758 7.80494C35.9758 11.5652 33.33 14.1627 29.5644 14.1627H25.4418V20.7555H22.4638ZM12.5819 5.05898C11.5411 4.99877 10.5914 5.37358 9.82438 5.67633C9.33075 5.87116 8.91274 6.03614 8.59472 6.03614C8.23784 6.03614 7.80257 5.86234 7.31387 5.66719C6.6735 5.4115 5.94138 5.11916 5.17364 5.13319C3.41387 5.15793 1.77716 6.15983 0.878819 7.75545C-0.967091 10.9467 0.398882 15.6717 2.18326 18.2693C3.05699 19.5556 4.10301 20.9657 5.48129 20.9163C6.08765 20.8933 6.52383 20.7072 6.97524 20.5147C7.49492 20.293 8.0348 20.0628 8.87776 20.0628C9.69151 20.0628 10.2078 20.287 10.7033 20.5023C11.1746 20.707 11.6271 20.9036 12.2989 20.8915C13.7264 20.8668 14.6247 19.6051 15.4984 18.3187C16.4413 16.9381 16.8557 15.5906 16.9186 15.3861C16.9222 15.3745 16.9246 15.3665 16.9259 15.3625C16.9244 15.361 16.9128 15.3556 16.8922 15.3462C16.577 15.2011 14.1679 14.0926 14.1448 11.1199C14.1216 8.62473 16.0556 7.36054 16.3601 7.16153C16.3786 7.14944 16.3911 7.14125 16.3968 7.137C15.1662 5.30636 13.2464 5.10845 12.5819 5.05898ZM41.4153 20.9039C43.2858 20.9039 45.0209 19.9515 45.8085 18.4424H45.8701V20.7555H48.6266V11.157C48.6266 8.37393 46.4115 6.5804 43.0027 6.5804C39.8401 6.5804 37.5019 8.39866 37.4158 10.8972H40.0985C40.32 9.70979 41.4153 8.93054 42.9166 8.93054C44.7379 8.93054 45.7593 9.78401 45.7593 11.3549V12.4186L42.0429 12.6413C38.5849 12.8516 36.7143 14.274 36.7143 16.7479C36.7143 19.2464 38.6464 20.9039 41.4153 20.9039ZM42.215 18.6156C40.6275 18.6156 39.6184 17.8487 39.6184 16.6736C39.6184 15.4615 40.5906 14.7564 42.4488 14.6451L45.7591 14.4348V15.5233C45.7591 17.3292 44.2332 18.6156 42.215 18.6156ZM57.7699 21.51C56.5762 24.8868 55.2103 26 52.306 26C52.0845 26 51.3461 25.9753 51.1739 25.9258V23.6127C51.3585 23.6375 51.8138 23.6622 52.0476 23.6622C53.3643 23.6622 54.1027 23.1056 54.558 21.6584L54.8288 20.8049L49.7833 6.76594H52.8967L56.4039 18.1579H56.4655L59.9727 6.76594H63L57.7699 21.51ZM25.4416 3.99524H28.875C31.4592 3.99524 32.936 5.38059 32.936 7.81731C32.936 10.254 31.4592 11.6518 28.8627 11.6518H25.4416V3.99524Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Protected by Apple Pay’s unique Device Account Numbe</span>\n </li>\n </ul>\n <div class=\"ff-apple-pay-button-container ff-payment-container\" id=\"applePayButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with Apple Pay encryption\n </p>\n </div>\n</div>\n";
13
22
 
14
23
  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}\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/* 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: 0;\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\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/* hack for FFB-169 */\n.ff-google-pay-button-container button, .ff-apple-pay-button-container button {\n height: 54px !important;\n border-radius: 28px !important;\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";
15
24
 
25
+ const paymentMethodTemplates = {
26
+ [index$1.PaymentMethod.PAYMENT_CARD]: cardTemplate,
27
+ [index$1.PaymentMethod.PAYPAL]: paypalTemplate,
28
+ [index$1.PaymentMethod.GOOGLE_PAY]: googlePayTemplate,
29
+ [index$1.PaymentMethod.APPLE_PAY]: applePayTemplate,
30
+ };
16
31
  class DefaultSkin {
17
- constructor(primerWrapper, containerSelector) {
32
+ constructor(primerWrapper, containerSelector, paymentMethodOrder) {
18
33
  this.onLoaderChange = (isLoading) => {
19
34
  this.primerWrapper.disableButtons(isLoading);
20
35
  document
@@ -87,6 +102,7 @@ class DefaultSkin {
87
102
  this.currentPurchaseMethod = null;
88
103
  };
89
104
  this.containerSelector = containerSelector;
105
+ this.paymentMethodOrder = paymentMethodOrder;
90
106
  const containerEl = document.querySelector(containerSelector);
91
107
  if (!containerEl) {
92
108
  throw new Error(`Container element not found for selector: ${containerSelector}`);
@@ -108,9 +124,12 @@ class DefaultSkin {
108
124
  }
109
125
  });
110
126
  };
111
- const checkedRadio = Array.from(radioButtons).find(radio => radio.checked);
127
+ const checkedRadio = Array.from(radioButtons)[0];
128
+ if (!checkedRadio) {
129
+ throw new Error('Default skin accordion initialization error: No radio button found');
130
+ }
112
131
  setTimeout(() => {
113
- handleAccordion(checkedRadio || null);
132
+ checkedRadio.click();
114
133
  }, 0);
115
134
  radioButtons.forEach(radio => {
116
135
  radio.addEventListener('change', () => {
@@ -133,6 +152,10 @@ class DefaultSkin {
133
152
  }
134
153
  async init() {
135
154
  this.containerEl.insertAdjacentHTML('beforeend', template);
155
+ const paymentMethodContainers = this.containerEl.querySelector('#ff-payment-method-containers');
156
+ this.paymentMethodOrder.forEach(paymentMethod => {
157
+ paymentMethodContainers.insertAdjacentHTML('beforeend', paymentMethodTemplates[paymentMethod]);
158
+ });
136
159
  this.cardInstance = new index.default(document.querySelector('#cardForm'));
137
160
  this.cardInstance.init();
138
161
  this.initAccordion();
@@ -183,8 +206,8 @@ class DefaultSkin {
183
206
  };
184
207
  }
185
208
  }
186
- const createDefaultSkin = async (primerWrapper, containerSelector) => {
187
- const skin = new DefaultSkin(primerWrapper, containerSelector);
209
+ const createDefaultSkin = async (primerWrapper, containerSelector, paymentMethodOrder) => {
210
+ const skin = new DefaultSkin(primerWrapper, containerSelector, paymentMethodOrder);
188
211
  await skin['init']();
189
212
  return skin;
190
213
  };
package/dist/chunk-index.es.js CHANGED
@@ -5,14 +5,29 @@
5
5
  * @author Funnelfox
6
6
  * @license MIT
7
7
  */
8
+ import { PaymentMethod } from './funnelfox-billing.esm.js';
8
9
  import CardSkin from './chunk-index.es2.js';
9
10
 
10
- var template = "<div class=\"ff-skin-default\">\n <!-- Apple Pay Section -->\n <div class=\"ff-payment-method-card ff-payment-method-apple-pay\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"apple-pay\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-apple-pay-logo\">\n <svg class=\"payment-method-icon\" height=\"26\" viewBox=\"0 0 63 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.41022 4.82398C9.5916 4.92293 10.773 4.23026 11.5113 3.35205C12.2374 2.4491 12.7173 1.23692 12.5943 0C11.5483 0.0494767 10.2561 0.692674 9.51777 1.59562C8.84093 2.37488 8.26255 3.63654 8.41022 4.82398ZM22.4638 20.7555V1.47193H29.6628C33.3793 1.47193 35.9758 4.04471 35.9758 7.80494C35.9758 11.5652 33.33 14.1627 29.5644 14.1627H25.4418V20.7555H22.4638ZM12.5819 5.05898C11.5411 4.99877 10.5914 5.37358 9.82438 5.67633C9.33075 5.87116 8.91274 6.03614 8.59472 6.03614C8.23784 6.03614 7.80257 5.86234 7.31387 5.66719C6.6735 5.4115 5.94138 5.11916 5.17364 5.13319C3.41387 5.15793 1.77716 6.15983 0.878819 7.75545C-0.967091 10.9467 0.398882 15.6717 2.18326 18.2693C3.05699 19.5556 4.10301 20.9657 5.48129 20.9163C6.08765 20.8933 6.52383 20.7072 6.97524 20.5147C7.49492 20.293 8.0348 20.0628 8.87776 20.0628C9.69151 20.0628 10.2078 20.287 10.7033 20.5023C11.1746 20.707 11.6271 20.9036 12.2989 20.8915C13.7264 20.8668 14.6247 19.6051 15.4984 18.3187C16.4413 16.9381 16.8557 15.5906 16.9186 15.3861C16.9222 15.3745 16.9246 15.3665 16.9259 15.3625C16.9244 15.361 16.9128 15.3556 16.8922 15.3462C16.577 15.2011 14.1679 14.0926 14.1448 11.1199C14.1216 8.62473 16.0556 7.36054 16.3601 7.16153C16.3786 7.14944 16.3911 7.14125 16.3968 7.137C15.1662 5.30636 13.2464 5.10845 12.5819 5.05898ZM41.4153 20.9039C43.2858 20.9039 45.0209 19.9515 45.8085 18.4424H45.8701V20.7555H48.6266V11.157C48.6266 8.37393 46.4115 6.5804 43.0027 6.5804C39.8401 6.5804 37.5019 8.39866 37.4158 10.8972H40.0985C40.32 9.70979 41.4153 8.93054 42.9166 8.93054C44.7379 8.93054 45.7593 9.78401 45.7593 11.3549V12.4186L42.0429 12.6413C38.5849 12.8516 36.7143 14.274 36.7143 16.7479C36.7143 19.2464 38.6464 20.9039 41.4153 20.9039ZM42.215 18.6156C40.6275 18.6156 39.6184 17.8487 39.6184 16.6736C39.6184 15.4615 40.5906 14.7564 42.4488 14.6451L45.7591 14.4348V15.5233C45.7591 17.3292 44.2332 18.6156 42.215 18.6156ZM57.7699 21.51C56.5762 24.8868 55.2103 26 52.306 26C52.0845 26 51.3461 25.9753 51.1739 25.9258V23.6127C51.3585 23.6375 51.8138 23.6622 52.0476 23.6622C53.3643 23.6622 54.1027 23.1056 54.558 21.6584L54.8288 20.8049L49.7833 6.76594H52.8967L56.4039 18.1579H56.4655L59.9727 6.76594H63L57.7699 21.51ZM25.4416 3.99524H28.875C31.4592 3.99524 32.936 5.38059 32.936 7.81731C32.936 10.254 31.4592 11.6518 28.8627 11.6518H25.4416V3.99524Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Protected by Apple Pay’s unique Device Account Numbe</span>\n </li>\n </ul>\n <div class=\"ff-apple-pay-button-container ff-payment-container\" id=\"applePayButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with Apple Pay encryption\n </p>\n </div>\n </div>\n\n <!-- Google Pay Section -->\n <div class=\"ff-payment-method-card ff-payment-method-google-pay\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"google-pay\" class=\"ff-payment-method-radio\" checked=\"checked\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-google-pay-logo\">\n <svg class=\"payment-method-icon\" height=\"26\" viewBox=\"0 0 59 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M27.3601 11.6862V18.4674H25.208V1.72177H30.9132C32.3591 1.72177 33.592 2.20374 34.6008 3.16768C35.632 4.13162 36.1476 5.30852 36.1476 6.69838C36.1476 8.12187 35.632 9.29877 34.6008 10.2515C33.6032 11.2042 32.3703 11.675 30.9132 11.675H27.3601V11.6862ZM27.3601 3.78415V9.62382H30.958C31.8099 9.62382 32.5272 9.3324 33.0876 8.76076C33.6593 8.18912 33.9507 7.49419 33.9507 6.70959C33.9507 5.9362 33.6593 5.25248 33.0876 4.68084C32.5272 4.08678 31.8211 3.79536 30.958 3.79536H27.3601V3.78415Z\" fill=\"currentColor\"/>\n <path d=\"M41.7742 6.63107C43.3658 6.63107 44.6212 7.057 45.5403 7.90885C46.4594 8.7607 46.9189 9.9264 46.9189 11.4059V18.4673H44.8677V16.8757H44.7781C43.8926 18.1871 42.7045 18.8372 41.225 18.8372C39.9584 18.8372 38.9048 18.4673 38.0529 17.7164C37.2011 16.9654 36.7751 16.0351 36.7751 14.9142C36.7751 13.7261 37.2235 12.7846 38.1202 12.0896C39.0169 11.3835 40.2162 11.036 41.7069 11.036C42.9847 11.036 44.0383 11.2714 44.8565 11.7422V11.249C44.8565 10.498 44.5651 9.87035 43.9711 9.34355C43.377 8.81674 42.6821 8.55895 41.8863 8.55895C40.6869 8.55895 39.7342 9.06333 39.0393 10.0833L37.145 8.8952C38.1874 7.38205 39.7342 6.63107 41.7742 6.63107ZM38.9944 14.9478C38.9944 15.5083 39.2298 15.979 39.7118 16.3489C40.1826 16.7188 40.743 16.9093 41.3819 16.9093C42.2898 16.9093 43.0968 16.5731 43.8029 15.9006C44.5091 15.228 44.8677 14.4435 44.8677 13.5356C44.1952 13.0088 43.2649 12.7397 42.0656 12.7397C41.1913 12.7397 40.4628 12.9527 39.8799 13.3674C39.2859 13.8046 38.9944 14.3314 38.9944 14.9478Z\" fill=\"currentColor\"/>\n <path d=\"M58.6207 7.00095L51.4472 23.5H49.2279L51.8955 17.7276L47.1655 7.00095H49.5081L52.9155 15.228H52.9604L56.2781 7.00095H58.6207Z\" fill=\"currentColor\"/>\n <path d=\"M18.8001 10.3187C18.8001 9.61709 18.7373 8.94569 18.6208 8.30008H9.6001V11.9989L14.7953 12C14.5846 13.2307 13.9064 14.2799 12.8674 14.9793V17.379H15.9598C17.7655 15.7078 18.8001 13.2375 18.8001 10.3187Z\" fill=\"#4285F4\"/>\n <path d=\"M12.8685 14.9793C12.0076 15.5599 10.8991 15.8995 9.60228 15.8995C7.09717 15.8995 4.97202 14.2115 4.21096 11.9361H1.021V14.411C2.60141 17.5472 5.84965 19.6992 9.60228 19.6992C12.1959 19.6992 14.3749 18.8462 15.9609 17.3779L12.8685 14.9793Z\" fill=\"#34A853\"/>\n <path d=\"M3.91043 10.1002C3.91043 9.46129 4.01691 8.8437 4.21082 8.26309V5.78824H1.02086C0.367396 7.08507 -0.000244141 8.54891 -0.000244141 10.1002C-0.000244141 11.6514 0.368516 13.1153 1.02086 14.4121L4.21082 11.9373C4.01691 11.3567 3.91043 10.7391 3.91043 10.1002Z\" fill=\"#FABB05\"/>\n <path d=\"M9.60228 4.29974C11.0179 4.29974 12.2856 4.78731 13.2865 5.74004L16.027 3.00179C14.3626 1.45164 12.1926 0.500031 9.60228 0.500031C5.85077 0.500031 2.60141 2.65208 1.021 5.78824L4.21096 8.26309C4.97202 5.98775 7.09717 4.29974 9.60228 4.29974Z\" fill=\"#E94235\"/>\n </svg>\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Protected by Google Pay's unique Device Account Number</span>\n </li>\n </ul>\n <div class=\"ff-google-pay-button-container ff-payment-container\" id=\"googlePayButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n <!-- PayPal Section -->\n <div class=\"ff-payment-method-card ff-payment-method-paypal\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"paypal\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-paypal-logo\">\n <img class=\"payment-method-icon\" style=\"max-height: 22px\" src=\"https://assets.fnlfx.com/common/checkout/paypal.webp\" alt=\"PayPal logo\">\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span> Fast, convenient payment option </span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>\n Keeps your financial info safe with end-to-end encryption\n </span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span> Backed by PayPal’s industry-leading fraud protection </span>\n </li>\n </ul>\n <div class=\"ff-paypal-button-container ff-payment-container\" id=\"paypalButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n\n <!-- Card Payments Section -->\n <div class=\"ff-payment-method-card ff-payment-method-payment-card\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"card\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-card-logos\">\n <img class=\"payment-method-icon\" style=\"max-height: 30px\" src=\"https://assets.fnlfx.com/common/checkout/cards.webp\" alt=\"visa, mastercard\">\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <div class=\"ff-card-form-container ff-payment-container\" id=\"cardForm\">\n <div class=\"loader-container\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <button class=\"ff-card-form-submit-button\" id=\"submitButton\">\n Continue\n </button>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n </div>\n <div id=\"success-screen\" style=\"display: none\">\n <div class=\"success\">\n <img alt=\"Loading\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1IDAuMTExMzI4QzIwLjA3NzQgMC4xMTEzMjggMTUuMjY1NCAxLjU3MTA0IDExLjE3MjUgNC4zMDU4NkM3LjA3OTUyIDcuMDQwNjkgMy44ODk0NSAxMC45Mjc4IDIuMDA1NjYgMTUuNDc1N0MwLjEyMTg4MyAyMC4wMjM1IC0wLjM3MSAyNS4wMjc4IDAuNTg5MzQzIDI5Ljg1NThDMS41NDk2OSAzNC42ODM4IDMuOTIwMTIgMzkuMTE4NSA3LjQwMDkgNDIuNTk5M0MxMC44ODE3IDQ2LjA4MDEgMTUuMzE2NCA0OC40NTA1IDIwLjE0NDQgNDkuNDEwOUMyNC45NzI0IDUwLjM3MTIgMjkuOTc2NyA0OS44NzgzIDM0LjUyNDYgNDcuOTk0NkMzOS4wNzI0IDQ2LjExMDggNDIuOTU5NSA0Mi45MjA3IDQ1LjY5NDQgMzguODI3N0M0OC40MjkyIDM0LjczNDggNDkuODg4OSAyOS45MjI4IDQ5Ljg4ODkgMjUuMDAwMkM0OS44ODg5IDE4LjM5OTMgNDcuMjY2NyAxMi4wNjg3IDQyLjU5OTEgNy40MDExMkMzNy45MzE1IDIuNzMzNTQgMzEuNjAwOSAwLjExMTMyOCAyNSAwLjExMTMyOFpNNDEuMjU1NiAxNi42NDY5TDIwLjgxNTYgMzcuMDcxM0w4Ljc0NDQ0IDI1LjAwMDJDOC4zMzE4OCAyNC41ODc3IDguMTAwMTEgMjQuMDI4MSA4LjEwMDExIDIzLjQ0NDdDOC4xMDAxMSAyMi44NjEyIDguMzMxODggMjIuMzAxNyA4Ljc0NDQ0IDIxLjg4OTFDOS4xNTcgMjEuNDc2NSA5LjcxNjU1IDIxLjI0NDggMTAuMyAyMS4yNDQ4QzEwLjg4MzQgMjEuMjQ0OCAxMS40NDMgMjEuNDc2NSAxMS44NTU2IDIxLjg4OTFMMjAuODQ2NyAzMC44ODAyTDM4LjE3NTYgMTMuNTY2OUMzOC4zNzk4IDEzLjM2MjYgMzguNjIyMyAxMy4yMDA2IDM4Ljg4OTIgMTMuMDlDMzkuMTU2MiAxMi45Nzk1IDM5LjQ0MjIgMTIuOTIyNiAzOS43MzExIDEyLjkyMjZDNDAuMDIgMTIuOTIyNiA0MC4zMDYxIDEyLjk3OTUgNDAuNTczIDEzLjA5QzQwLjgzOTkgMTMuMjAwNiA0MS4wODI0IDEzLjM2MjYgNDEuMjg2NyAxMy41NjY5QzQxLjQ5MDkgMTMuNzcxMiA0MS42NTMgMTQuMDEzNyA0MS43NjM1IDE0LjI4MDZDNDEuODc0MSAxNC41NDc1IDQxLjkzMSAxNC44MzM1IDQxLjkzMSAxNS4xMjI0QzQxLjkzMSAxNS40MTEzIDQxLjg3NDEgMTUuNjk3NCA0MS43NjM1IDE1Ljk2NDNDNDEuNjUzIDE2LjIzMTIgNDEuNDkwOSAxNi40NzM3IDQxLjI4NjcgMTYuNjc4TDQxLjI1NTYgMTYuNjQ2OVoiIGZpbGw9IiM4RURGQzIiLz4KPC9zdmc+Cg==\">\n <div>Payment completed successfully</div>\n </div>\n </div>\n</div>\n";
11
+ var template = "<div class=\"ff-skin-default\" id=\"ff-payment-method-containers\">\n <div id=\"success-screen\" style=\"display: none\">\n <div class=\"success\">\n <img alt=\"Loading\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1IDAuMTExMzI4QzIwLjA3NzQgMC4xMTEzMjggMTUuMjY1NCAxLjU3MTA0IDExLjE3MjUgNC4zMDU4NkM3LjA3OTUyIDcuMDQwNjkgMy44ODk0NSAxMC45Mjc4IDIuMDA1NjYgMTUuNDc1N0MwLjEyMTg4MyAyMC4wMjM1IC0wLjM3MSAyNS4wMjc4IDAuNTg5MzQzIDI5Ljg1NThDMS41NDk2OSAzNC42ODM4IDMuOTIwMTIgMzkuMTE4NSA3LjQwMDkgNDIuNTk5M0MxMC44ODE3IDQ2LjA4MDEgMTUuMzE2NCA0OC40NTA1IDIwLjE0NDQgNDkuNDEwOUMyNC45NzI0IDUwLjM3MTIgMjkuOTc2NyA0OS44NzgzIDM0LjUyNDYgNDcuOTk0NkMzOS4wNzI0IDQ2LjExMDggNDIuOTU5NSA0Mi45MjA3IDQ1LjY5NDQgMzguODI3N0M0OC40MjkyIDM0LjczNDggNDkuODg4OSAyOS45MjI4IDQ5Ljg4ODkgMjUuMDAwMkM0OS44ODg5IDE4LjM5OTMgNDcuMjY2NyAxMi4wNjg3IDQyLjU5OTEgNy40MDExMkMzNy45MzE1IDIuNzMzNTQgMzEuNjAwOSAwLjExMTMyOCAyNSAwLjExMTMyOFpNNDEuMjU1NiAxNi42NDY5TDIwLjgxNTYgMzcuMDcxM0w4Ljc0NDQ0IDI1LjAwMDJDOC4zMzE4OCAyNC41ODc3IDguMTAwMTEgMjQuMDI4MSA4LjEwMDExIDIzLjQ0NDdDOC4xMDAxMSAyMi44NjEyIDguMzMxODggMjIuMzAxNyA4Ljc0NDQ0IDIxLjg4OTFDOS4xNTcgMjEuNDc2NSA5LjcxNjU1IDIxLjI0NDggMTAuMyAyMS4yNDQ4QzEwLjg4MzQgMjEuMjQ0OCAxMS40NDMgMjEuNDc2NSAxMS44NTU2IDIxLjg4OTFMMjAuODQ2NyAzMC44ODAyTDM4LjE3NTYgMTMuNTY2OUMzOC4zNzk4IDEzLjM2MjYgMzguNjIyMyAxMy4yMDA2IDM4Ljg4OTIgMTMuMDlDMzkuMTU2MiAxMi45Nzk1IDM5LjQ0MjIgMTIuOTIyNiAzOS43MzExIDEyLjkyMjZDNDAuMDIgMTIuOTIyNiA0MC4zMDYxIDEyLjk3OTUgNDAuNTczIDEzLjA5QzQwLjgzOTkgMTMuMjAwNiA0MS4wODI0IDEzLjM2MjYgNDEuMjg2NyAxMy41NjY5QzQxLjQ5MDkgMTMuNzcxMiA0MS42NTMgMTQuMDEzNyA0MS43NjM1IDE0LjI4MDZDNDEuODc0MSAxNC41NDc1IDQxLjkzMSAxNC44MzM1IDQxLjkzMSAxNS4xMjI0QzQxLjkzMSAxNS40MTEzIDQxLjg3NDEgMTUuNjk3NCA0MS43NjM1IDE1Ljk2NDNDNDEuNjUzIDE2LjIzMTIgNDEuNDkwOSAxNi40NzM3IDQxLjI4NjcgMTYuNjc4TDQxLjI1NTYgMTYuNjQ2OVoiIGZpbGw9IiM4RURGQzIiLz4KPC9zdmc+Cg==\">\n <div>Payment completed successfully</div>\n </div>\n </div>\n</div>\n";
12
+
13
+ var cardTemplate = "<!-- Card Payments Section -->\n<div class=\"ff-payment-method-card ff-payment-method-payment-card\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"card\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-card-logos\">\n <img class=\"payment-method-icon\" style=\"max-height: 30px\" src=\"https://assets.fnlfx.com/common/checkout/cards.webp\" alt=\"visa, mastercard\">\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <div class=\"ff-card-form-container ff-payment-container\" id=\"cardForm\">\n <div class=\"loader-container\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <button class=\"ff-card-form-submit-button\" id=\"submitButton\">\n Continue\n </button>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n</div>\n";
14
+
15
+ var paypalTemplate = "<div class=\"ff-payment-method-card ff-payment-method-paypal\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"paypal\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-paypal-logo\">\n <img class=\"payment-method-icon\" style=\"max-height: 22px\" src=\"https://assets.fnlfx.com/common/checkout/paypal.webp\" alt=\"PayPal logo\">\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span> Fast, convenient payment option </span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span> Keeps your financial info safe with end-to-end encryption </span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span> Backed by PayPal’s industry-leading fraud protection </span>\n </li>\n </ul>\n <div class=\"ff-paypal-button-container ff-payment-container\" id=\"paypalButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n</div>\n";
16
+
17
+ var googlePayTemplate = "<!-- Google Pay Section -->\n<div class=\"ff-payment-method-card ff-payment-method-google-pay\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"google-pay\" class=\"ff-payment-method-radio\" checked=\"checked\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-google-pay-logo\">\n <svg class=\"payment-method-icon\" height=\"26\" viewBox=\"0 0 59 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M27.3601 11.6862V18.4674H25.208V1.72177H30.9132C32.3591 1.72177 33.592 2.20374 34.6008 3.16768C35.632 4.13162 36.1476 5.30852 36.1476 6.69838C36.1476 8.12187 35.632 9.29877 34.6008 10.2515C33.6032 11.2042 32.3703 11.675 30.9132 11.675H27.3601V11.6862ZM27.3601 3.78415V9.62382H30.958C31.8099 9.62382 32.5272 9.3324 33.0876 8.76076C33.6593 8.18912 33.9507 7.49419 33.9507 6.70959C33.9507 5.9362 33.6593 5.25248 33.0876 4.68084C32.5272 4.08678 31.8211 3.79536 30.958 3.79536H27.3601V3.78415Z\" fill=\"currentColor\"/>\n <path d=\"M41.7742 6.63107C43.3658 6.63107 44.6212 7.057 45.5403 7.90885C46.4594 8.7607 46.9189 9.9264 46.9189 11.4059V18.4673H44.8677V16.8757H44.7781C43.8926 18.1871 42.7045 18.8372 41.225 18.8372C39.9584 18.8372 38.9048 18.4673 38.0529 17.7164C37.2011 16.9654 36.7751 16.0351 36.7751 14.9142C36.7751 13.7261 37.2235 12.7846 38.1202 12.0896C39.0169 11.3835 40.2162 11.036 41.7069 11.036C42.9847 11.036 44.0383 11.2714 44.8565 11.7422V11.249C44.8565 10.498 44.5651 9.87035 43.9711 9.34355C43.377 8.81674 42.6821 8.55895 41.8863 8.55895C40.6869 8.55895 39.7342 9.06333 39.0393 10.0833L37.145 8.8952C38.1874 7.38205 39.7342 6.63107 41.7742 6.63107ZM38.9944 14.9478C38.9944 15.5083 39.2298 15.979 39.7118 16.3489C40.1826 16.7188 40.743 16.9093 41.3819 16.9093C42.2898 16.9093 43.0968 16.5731 43.8029 15.9006C44.5091 15.228 44.8677 14.4435 44.8677 13.5356C44.1952 13.0088 43.2649 12.7397 42.0656 12.7397C41.1913 12.7397 40.4628 12.9527 39.8799 13.3674C39.2859 13.8046 38.9944 14.3314 38.9944 14.9478Z\" fill=\"currentColor\"/>\n <path d=\"M58.6207 7.00095L51.4472 23.5H49.2279L51.8955 17.7276L47.1655 7.00095H49.5081L52.9155 15.228H52.9604L56.2781 7.00095H58.6207Z\" fill=\"currentColor\"/>\n <path d=\"M18.8001 10.3187C18.8001 9.61709 18.7373 8.94569 18.6208 8.30008H9.6001V11.9989L14.7953 12C14.5846 13.2307 13.9064 14.2799 12.8674 14.9793V17.379H15.9598C17.7655 15.7078 18.8001 13.2375 18.8001 10.3187Z\" fill=\"#4285F4\"/>\n <path d=\"M12.8685 14.9793C12.0076 15.5599 10.8991 15.8995 9.60228 15.8995C7.09717 15.8995 4.97202 14.2115 4.21096 11.9361H1.021V14.411C2.60141 17.5472 5.84965 19.6992 9.60228 19.6992C12.1959 19.6992 14.3749 18.8462 15.9609 17.3779L12.8685 14.9793Z\" fill=\"#34A853\"/>\n <path d=\"M3.91043 10.1002C3.91043 9.46129 4.01691 8.8437 4.21082 8.26309V5.78824H1.02086C0.367396 7.08507 -0.000244141 8.54891 -0.000244141 10.1002C-0.000244141 11.6514 0.368516 13.1153 1.02086 14.4121L4.21082 11.9373C4.01691 11.3567 3.91043 10.7391 3.91043 10.1002Z\" fill=\"#FABB05\"/>\n <path d=\"M9.60228 4.29974C11.0179 4.29974 12.2856 4.78731 13.2865 5.74004L16.027 3.00179C14.3626 1.45164 12.1926 0.500031 9.60228 0.500031C5.85077 0.500031 2.60141 2.65208 1.021 5.78824L4.21096 8.26309C4.97202 5.98775 7.09717 4.29974 9.60228 4.29974Z\" fill=\"#E94235\"/>\n </svg>\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Protected by Google Pay's unique Device Account Number</span>\n </li>\n </ul>\n <div class=\"ff-google-pay-button-container ff-payment-container\" id=\"googlePayButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n</div>\n";
18
+
19
+ var applePayTemplate = "<!-- Apple Pay Section -->\n<div class=\"ff-payment-method-card ff-payment-method-apple-pay\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"apple-pay\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-apple-pay-logo\">\n <svg class=\"payment-method-icon\" height=\"26\" viewBox=\"0 0 63 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.41022 4.82398C9.5916 4.92293 10.773 4.23026 11.5113 3.35205C12.2374 2.4491 12.7173 1.23692 12.5943 0C11.5483 0.0494767 10.2561 0.692674 9.51777 1.59562C8.84093 2.37488 8.26255 3.63654 8.41022 4.82398ZM22.4638 20.7555V1.47193H29.6628C33.3793 1.47193 35.9758 4.04471 35.9758 7.80494C35.9758 11.5652 33.33 14.1627 29.5644 14.1627H25.4418V20.7555H22.4638ZM12.5819 5.05898C11.5411 4.99877 10.5914 5.37358 9.82438 5.67633C9.33075 5.87116 8.91274 6.03614 8.59472 6.03614C8.23784 6.03614 7.80257 5.86234 7.31387 5.66719C6.6735 5.4115 5.94138 5.11916 5.17364 5.13319C3.41387 5.15793 1.77716 6.15983 0.878819 7.75545C-0.967091 10.9467 0.398882 15.6717 2.18326 18.2693C3.05699 19.5556 4.10301 20.9657 5.48129 20.9163C6.08765 20.8933 6.52383 20.7072 6.97524 20.5147C7.49492 20.293 8.0348 20.0628 8.87776 20.0628C9.69151 20.0628 10.2078 20.287 10.7033 20.5023C11.1746 20.707 11.6271 20.9036 12.2989 20.8915C13.7264 20.8668 14.6247 19.6051 15.4984 18.3187C16.4413 16.9381 16.8557 15.5906 16.9186 15.3861C16.9222 15.3745 16.9246 15.3665 16.9259 15.3625C16.9244 15.361 16.9128 15.3556 16.8922 15.3462C16.577 15.2011 14.1679 14.0926 14.1448 11.1199C14.1216 8.62473 16.0556 7.36054 16.3601 7.16153C16.3786 7.14944 16.3911 7.14125 16.3968 7.137C15.1662 5.30636 13.2464 5.10845 12.5819 5.05898ZM41.4153 20.9039C43.2858 20.9039 45.0209 19.9515 45.8085 18.4424H45.8701V20.7555H48.6266V11.157C48.6266 8.37393 46.4115 6.5804 43.0027 6.5804C39.8401 6.5804 37.5019 8.39866 37.4158 10.8972H40.0985C40.32 9.70979 41.4153 8.93054 42.9166 8.93054C44.7379 8.93054 45.7593 9.78401 45.7593 11.3549V12.4186L42.0429 12.6413C38.5849 12.8516 36.7143 14.274 36.7143 16.7479C36.7143 19.2464 38.6464 20.9039 41.4153 20.9039ZM42.215 18.6156C40.6275 18.6156 39.6184 17.8487 39.6184 16.6736C39.6184 15.4615 40.5906 14.7564 42.4488 14.6451L45.7591 14.4348V15.5233C45.7591 17.3292 44.2332 18.6156 42.215 18.6156ZM57.7699 21.51C56.5762 24.8868 55.2103 26 52.306 26C52.0845 26 51.3461 25.9753 51.1739 25.9258V23.6127C51.3585 23.6375 51.8138 23.6622 52.0476 23.6622C53.3643 23.6622 54.1027 23.1056 54.558 21.6584L54.8288 20.8049L49.7833 6.76594H52.8967L56.4039 18.1579H56.4655L59.9727 6.76594H63L57.7699 21.51ZM25.4416 3.99524H28.875C31.4592 3.99524 32.936 5.38059 32.936 7.81731C32.936 10.254 31.4592 11.6518 28.8627 11.6518H25.4416V3.99524Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Protected by Apple Pay’s unique Device Account Numbe</span>\n </li>\n </ul>\n <div class=\"ff-apple-pay-button-container ff-payment-container\" id=\"applePayButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with Apple Pay encryption\n </p>\n </div>\n</div>\n";
11
20
 
12
21
  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}\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/* 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: 0;\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\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/* hack for FFB-169 */\n.ff-google-pay-button-container button, .ff-apple-pay-button-container button {\n height: 54px !important;\n border-radius: 28px !important;\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";
13
22
 
23
+ const paymentMethodTemplates = {
24
+ [PaymentMethod.PAYMENT_CARD]: cardTemplate,
25
+ [PaymentMethod.PAYPAL]: paypalTemplate,
26
+ [PaymentMethod.GOOGLE_PAY]: googlePayTemplate,
27
+ [PaymentMethod.APPLE_PAY]: applePayTemplate,
28
+ };
14
29
  class DefaultSkin {
15
- constructor(primerWrapper, containerSelector) {
30
+ constructor(primerWrapper, containerSelector, paymentMethodOrder) {
16
31
  this.onLoaderChange = (isLoading) => {
17
32
  this.primerWrapper.disableButtons(isLoading);
18
33
  document
@@ -85,6 +100,7 @@ class DefaultSkin {
85
100
  this.currentPurchaseMethod = null;
86
101
  };
87
102
  this.containerSelector = containerSelector;
103
+ this.paymentMethodOrder = paymentMethodOrder;
88
104
  const containerEl = document.querySelector(containerSelector);
89
105
  if (!containerEl) {
90
106
  throw new Error(`Container element not found for selector: ${containerSelector}`);
@@ -106,9 +122,12 @@ class DefaultSkin {
106
122
  }
107
123
  });
108
124
  };
109
- const checkedRadio = Array.from(radioButtons).find(radio => radio.checked);
125
+ const checkedRadio = Array.from(radioButtons)[0];
126
+ if (!checkedRadio) {
127
+ throw new Error('Default skin accordion initialization error: No radio button found');
128
+ }
110
129
  setTimeout(() => {
111
- handleAccordion(checkedRadio || null);
130
+ checkedRadio.click();
112
131
  }, 0);
113
132
  radioButtons.forEach(radio => {
114
133
  radio.addEventListener('change', () => {
@@ -131,6 +150,10 @@ class DefaultSkin {
131
150
  }
132
151
  async init() {
133
152
  this.containerEl.insertAdjacentHTML('beforeend', template);
153
+ const paymentMethodContainers = this.containerEl.querySelector('#ff-payment-method-containers');
154
+ this.paymentMethodOrder.forEach(paymentMethod => {
155
+ paymentMethodContainers.insertAdjacentHTML('beforeend', paymentMethodTemplates[paymentMethod]);
156
+ });
134
157
  this.cardInstance = new CardSkin(document.querySelector('#cardForm'));
135
158
  this.cardInstance.init();
136
159
  this.initAccordion();
@@ -181,8 +204,8 @@ class DefaultSkin {
181
204
  };
182
205
  }
183
206
  }
184
- const createDefaultSkin = async (primerWrapper, containerSelector) => {
185
- const skin = new DefaultSkin(primerWrapper, containerSelector);
207
+ const createDefaultSkin = async (primerWrapper, containerSelector, paymentMethodOrder) => {
208
+ const skin = new DefaultSkin(primerWrapper, containerSelector, paymentMethodOrder);
186
209
  await skin['init']();
187
210
  return skin;
188
211
  };
package/dist/funnelfox-billing.cjs.js CHANGED
@@ -217,7 +217,7 @@ exports.PaymentMethod = void 0;
217
217
  /**
218
218
  * @fileoverview Constants for Funnefox SDK
219
219
  */
220
- const SDK_VERSION = '0.5.0-beta.0';
220
+ const SDK_VERSION = '0.5.0-beta.1';
221
221
  const DEFAULTS = {
222
222
  BASE_URL: 'https://billing.funnelfox.com',
223
223
  REGION: 'default',
@@ -845,6 +845,12 @@ class CheckoutInstance extends EventEmitter {
845
845
  constructor(config) {
846
846
  super();
847
847
  this.counter = 0;
848
+ this.paymentMethodOrder = [
849
+ exports.PaymentMethod.APPLE_PAY,
850
+ exports.PaymentMethod.GOOGLE_PAY,
851
+ exports.PaymentMethod.PAYPAL,
852
+ exports.PaymentMethod.PAYMENT_CARD,
853
+ ];
848
854
  this.handleInputChange = (inputName, error) => {
849
855
  this.emit(EVENTS.INPUT_ERROR, { name: inputName, error });
850
856
  };
@@ -1024,6 +1030,9 @@ class CheckoutInstance extends EventEmitter {
1024
1030
  let checkoutOptions;
1025
1031
  if (!this.checkoutConfig.cardSelectors ||
1026
1032
  !this.checkoutConfig.paymentButtonSelectors) {
1033
+ if (this.checkoutConfig.paymentMethodOrder) {
1034
+ this.paymentMethodOrder = this.checkoutConfig.paymentMethodOrder;
1035
+ }
1027
1036
  const defaultSkinCheckoutOptions = await this.getDefaultSkinCheckoutOptions();
1028
1037
  if (!defaultSkinCheckoutOptions.cardElements ||
1029
1038
  !defaultSkinCheckoutOptions.paymentButtonElements) {
@@ -1039,6 +1048,10 @@ class CheckoutInstance extends EventEmitter {
1039
1048
  paymentButtonElements = this.convertPaymentButtonSelectorsToElements(this.checkoutConfig.paymentButtonSelectors);
1040
1049
  checkoutOptions = this.getCheckoutOptions({});
1041
1050
  }
1051
+ if (this.checkoutConfig.paymentMethodOrder) {
1052
+ // eslint-disable-next-line no-console
1053
+ console.warn('paymentMethodOrder is using only for default skin and will be ignored if you are using custom checkout');
1054
+ }
1042
1055
  await this.primerWrapper.renderCheckout(this.clientToken, checkoutOptions, {
1043
1056
  container: containerElement,
1044
1057
  cardElements,
@@ -1195,7 +1208,7 @@ class CheckoutInstance extends EventEmitter {
1195
1208
  async getDefaultSkinCheckoutOptions() {
1196
1209
  const skinFactory = (await Promise.resolve().then(function () { return require('./chunk-index.cjs.js'); }))
1197
1210
  .default;
1198
- const skin = await skinFactory(this.primerWrapper, this.checkoutConfig.container);
1211
+ const skin = await skinFactory(this.primerWrapper, this.checkoutConfig.container, this.paymentMethodOrder);
1199
1212
  this.on(EVENTS.INPUT_ERROR, skin.onInputError);
1200
1213
  this.on(EVENTS.STATUS_CHANGE, skin.onStatusChange);
1201
1214
  this.on(EVENTS.ERROR, (error) => skin.onError(error));
package/dist/funnelfox-billing.esm.js CHANGED
@@ -213,7 +213,7 @@ var PaymentMethod;
213
213
  /**
214
214
  * @fileoverview Constants for Funnefox SDK
215
215
  */
216
- const SDK_VERSION = '0.5.0-beta.0';
216
+ const SDK_VERSION = '0.5.0-beta.1';
217
217
  const DEFAULTS = {
218
218
  BASE_URL: 'https://billing.funnelfox.com',
219
219
  REGION: 'default',
@@ -841,6 +841,12 @@ class CheckoutInstance extends EventEmitter {
841
841
  constructor(config) {
842
842
  super();
843
843
  this.counter = 0;
844
+ this.paymentMethodOrder = [
845
+ PaymentMethod.APPLE_PAY,
846
+ PaymentMethod.GOOGLE_PAY,
847
+ PaymentMethod.PAYPAL,
848
+ PaymentMethod.PAYMENT_CARD,
849
+ ];
844
850
  this.handleInputChange = (inputName, error) => {
845
851
  this.emit(EVENTS.INPUT_ERROR, { name: inputName, error });
846
852
  };
@@ -1020,6 +1026,9 @@ class CheckoutInstance extends EventEmitter {
1020
1026
  let checkoutOptions;
1021
1027
  if (!this.checkoutConfig.cardSelectors ||
1022
1028
  !this.checkoutConfig.paymentButtonSelectors) {
1029
+ if (this.checkoutConfig.paymentMethodOrder) {
1030
+ this.paymentMethodOrder = this.checkoutConfig.paymentMethodOrder;
1031
+ }
1023
1032
  const defaultSkinCheckoutOptions = await this.getDefaultSkinCheckoutOptions();
1024
1033
  if (!defaultSkinCheckoutOptions.cardElements ||
1025
1034
  !defaultSkinCheckoutOptions.paymentButtonElements) {
@@ -1035,6 +1044,10 @@ class CheckoutInstance extends EventEmitter {
1035
1044
  paymentButtonElements = this.convertPaymentButtonSelectorsToElements(this.checkoutConfig.paymentButtonSelectors);
1036
1045
  checkoutOptions = this.getCheckoutOptions({});
1037
1046
  }
1047
+ if (this.checkoutConfig.paymentMethodOrder) {
1048
+ // eslint-disable-next-line no-console
1049
+ console.warn('paymentMethodOrder is using only for default skin and will be ignored if you are using custom checkout');
1050
+ }
1038
1051
  await this.primerWrapper.renderCheckout(this.clientToken, checkoutOptions, {
1039
1052
  container: containerElement,
1040
1053
  cardElements,
@@ -1191,7 +1204,7 @@ class CheckoutInstance extends EventEmitter {
1191
1204
  async getDefaultSkinCheckoutOptions() {
1192
1205
  const skinFactory = (await import('./chunk-index.es.js'))
1193
1206
  .default;
1194
- const skin = await skinFactory(this.primerWrapper, this.checkoutConfig.container);
1207
+ const skin = await skinFactory(this.primerWrapper, this.checkoutConfig.container, this.paymentMethodOrder);
1195
1208
  this.on(EVENTS.INPUT_ERROR, skin.onInputError);
1196
1209
  this.on(EVENTS.STATUS_CHANGE, skin.onStatusChange);
1197
1210
  this.on(EVENTS.ERROR, (error) => skin.onError(error));
package/dist/funnelfox-billing.js CHANGED
@@ -219,7 +219,7 @@
219
219
  /**
220
220
  * @fileoverview Constants for Funnefox SDK
221
221
  */
222
- const SDK_VERSION = '0.5.0-beta.0';
222
+ const SDK_VERSION = '0.5.0-beta.1';
223
223
  const DEFAULTS = {
224
224
  BASE_URL: 'https://billing.funnelfox.com',
225
225
  REGION: 'default',
@@ -847,6 +847,12 @@
847
847
  constructor(config) {
848
848
  super();
849
849
  this.counter = 0;
850
+ this.paymentMethodOrder = [
851
+ exports.PaymentMethod.APPLE_PAY,
852
+ exports.PaymentMethod.GOOGLE_PAY,
853
+ exports.PaymentMethod.PAYPAL,
854
+ exports.PaymentMethod.PAYMENT_CARD,
855
+ ];
850
856
  this.handleInputChange = (inputName, error) => {
851
857
  this.emit(EVENTS.INPUT_ERROR, { name: inputName, error });
852
858
  };
@@ -1026,6 +1032,9 @@
1026
1032
  let checkoutOptions;
1027
1033
  if (!this.checkoutConfig.cardSelectors ||
1028
1034
  !this.checkoutConfig.paymentButtonSelectors) {
1035
+ if (this.checkoutConfig.paymentMethodOrder) {
1036
+ this.paymentMethodOrder = this.checkoutConfig.paymentMethodOrder;
1037
+ }
1029
1038
  const defaultSkinCheckoutOptions = await this.getDefaultSkinCheckoutOptions();
1030
1039
  if (!defaultSkinCheckoutOptions.cardElements ||
1031
1040
  !defaultSkinCheckoutOptions.paymentButtonElements) {
@@ -1041,6 +1050,10 @@
1041
1050
  paymentButtonElements = this.convertPaymentButtonSelectorsToElements(this.checkoutConfig.paymentButtonSelectors);
1042
1051
  checkoutOptions = this.getCheckoutOptions({});
1043
1052
  }
1053
+ if (this.checkoutConfig.paymentMethodOrder) {
1054
+ // eslint-disable-next-line no-console
1055
+ console.warn('paymentMethodOrder is using only for default skin and will be ignored if you are using custom checkout');
1056
+ }
1044
1057
  await this.primerWrapper.renderCheckout(this.clientToken, checkoutOptions, {
1045
1058
  container: containerElement,
1046
1059
  cardElements,
@@ -1197,7 +1210,7 @@
1197
1210
  async getDefaultSkinCheckoutOptions() {
1198
1211
  const skinFactory = (await Promise.resolve().then(function () { return index; }))
1199
1212
  .default;
1200
- const skin = await skinFactory(this.primerWrapper, this.checkoutConfig.container);
1213
+ const skin = await skinFactory(this.primerWrapper, this.checkoutConfig.container, this.paymentMethodOrder);
1201
1214
  this.on(EVENTS.INPUT_ERROR, skin.onInputError);
1202
1215
  this.on(EVENTS.STATUS_CHANGE, skin.onStatusChange);
1203
1216
  this.on(EVENTS.ERROR, (error) => skin.onError(error));
@@ -1341,7 +1354,15 @@
1341
1354
  window.Billing = Billing;
1342
1355
  }
1343
1356
 
1344
- var template$1 = "<div class=\"ff-skin-default\">\n <!-- Apple Pay Section -->\n <div class=\"ff-payment-method-card ff-payment-method-apple-pay\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"apple-pay\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-apple-pay-logo\">\n <svg class=\"payment-method-icon\" height=\"26\" viewBox=\"0 0 63 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.41022 4.82398C9.5916 4.92293 10.773 4.23026 11.5113 3.35205C12.2374 2.4491 12.7173 1.23692 12.5943 0C11.5483 0.0494767 10.2561 0.692674 9.51777 1.59562C8.84093 2.37488 8.26255 3.63654 8.41022 4.82398ZM22.4638 20.7555V1.47193H29.6628C33.3793 1.47193 35.9758 4.04471 35.9758 7.80494C35.9758 11.5652 33.33 14.1627 29.5644 14.1627H25.4418V20.7555H22.4638ZM12.5819 5.05898C11.5411 4.99877 10.5914 5.37358 9.82438 5.67633C9.33075 5.87116 8.91274 6.03614 8.59472 6.03614C8.23784 6.03614 7.80257 5.86234 7.31387 5.66719C6.6735 5.4115 5.94138 5.11916 5.17364 5.13319C3.41387 5.15793 1.77716 6.15983 0.878819 7.75545C-0.967091 10.9467 0.398882 15.6717 2.18326 18.2693C3.05699 19.5556 4.10301 20.9657 5.48129 20.9163C6.08765 20.8933 6.52383 20.7072 6.97524 20.5147C7.49492 20.293 8.0348 20.0628 8.87776 20.0628C9.69151 20.0628 10.2078 20.287 10.7033 20.5023C11.1746 20.707 11.6271 20.9036 12.2989 20.8915C13.7264 20.8668 14.6247 19.6051 15.4984 18.3187C16.4413 16.9381 16.8557 15.5906 16.9186 15.3861C16.9222 15.3745 16.9246 15.3665 16.9259 15.3625C16.9244 15.361 16.9128 15.3556 16.8922 15.3462C16.577 15.2011 14.1679 14.0926 14.1448 11.1199C14.1216 8.62473 16.0556 7.36054 16.3601 7.16153C16.3786 7.14944 16.3911 7.14125 16.3968 7.137C15.1662 5.30636 13.2464 5.10845 12.5819 5.05898ZM41.4153 20.9039C43.2858 20.9039 45.0209 19.9515 45.8085 18.4424H45.8701V20.7555H48.6266V11.157C48.6266 8.37393 46.4115 6.5804 43.0027 6.5804C39.8401 6.5804 37.5019 8.39866 37.4158 10.8972H40.0985C40.32 9.70979 41.4153 8.93054 42.9166 8.93054C44.7379 8.93054 45.7593 9.78401 45.7593 11.3549V12.4186L42.0429 12.6413C38.5849 12.8516 36.7143 14.274 36.7143 16.7479C36.7143 19.2464 38.6464 20.9039 41.4153 20.9039ZM42.215 18.6156C40.6275 18.6156 39.6184 17.8487 39.6184 16.6736C39.6184 15.4615 40.5906 14.7564 42.4488 14.6451L45.7591 14.4348V15.5233C45.7591 17.3292 44.2332 18.6156 42.215 18.6156ZM57.7699 21.51C56.5762 24.8868 55.2103 26 52.306 26C52.0845 26 51.3461 25.9753 51.1739 25.9258V23.6127C51.3585 23.6375 51.8138 23.6622 52.0476 23.6622C53.3643 23.6622 54.1027 23.1056 54.558 21.6584L54.8288 20.8049L49.7833 6.76594H52.8967L56.4039 18.1579H56.4655L59.9727 6.76594H63L57.7699 21.51ZM25.4416 3.99524H28.875C31.4592 3.99524 32.936 5.38059 32.936 7.81731C32.936 10.254 31.4592 11.6518 28.8627 11.6518H25.4416V3.99524Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Protected by Apple Pay’s unique Device Account Numbe</span>\n </li>\n </ul>\n <div class=\"ff-apple-pay-button-container ff-payment-container\" id=\"applePayButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with Apple Pay encryption\n </p>\n </div>\n </div>\n\n <!-- Google Pay Section -->\n <div class=\"ff-payment-method-card ff-payment-method-google-pay\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"google-pay\" class=\"ff-payment-method-radio\" checked=\"checked\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-google-pay-logo\">\n <svg class=\"payment-method-icon\" height=\"26\" viewBox=\"0 0 59 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M27.3601 11.6862V18.4674H25.208V1.72177H30.9132C32.3591 1.72177 33.592 2.20374 34.6008 3.16768C35.632 4.13162 36.1476 5.30852 36.1476 6.69838C36.1476 8.12187 35.632 9.29877 34.6008 10.2515C33.6032 11.2042 32.3703 11.675 30.9132 11.675H27.3601V11.6862ZM27.3601 3.78415V9.62382H30.958C31.8099 9.62382 32.5272 9.3324 33.0876 8.76076C33.6593 8.18912 33.9507 7.49419 33.9507 6.70959C33.9507 5.9362 33.6593 5.25248 33.0876 4.68084C32.5272 4.08678 31.8211 3.79536 30.958 3.79536H27.3601V3.78415Z\" fill=\"currentColor\"/>\n <path d=\"M41.7742 6.63107C43.3658 6.63107 44.6212 7.057 45.5403 7.90885C46.4594 8.7607 46.9189 9.9264 46.9189 11.4059V18.4673H44.8677V16.8757H44.7781C43.8926 18.1871 42.7045 18.8372 41.225 18.8372C39.9584 18.8372 38.9048 18.4673 38.0529 17.7164C37.2011 16.9654 36.7751 16.0351 36.7751 14.9142C36.7751 13.7261 37.2235 12.7846 38.1202 12.0896C39.0169 11.3835 40.2162 11.036 41.7069 11.036C42.9847 11.036 44.0383 11.2714 44.8565 11.7422V11.249C44.8565 10.498 44.5651 9.87035 43.9711 9.34355C43.377 8.81674 42.6821 8.55895 41.8863 8.55895C40.6869 8.55895 39.7342 9.06333 39.0393 10.0833L37.145 8.8952C38.1874 7.38205 39.7342 6.63107 41.7742 6.63107ZM38.9944 14.9478C38.9944 15.5083 39.2298 15.979 39.7118 16.3489C40.1826 16.7188 40.743 16.9093 41.3819 16.9093C42.2898 16.9093 43.0968 16.5731 43.8029 15.9006C44.5091 15.228 44.8677 14.4435 44.8677 13.5356C44.1952 13.0088 43.2649 12.7397 42.0656 12.7397C41.1913 12.7397 40.4628 12.9527 39.8799 13.3674C39.2859 13.8046 38.9944 14.3314 38.9944 14.9478Z\" fill=\"currentColor\"/>\n <path d=\"M58.6207 7.00095L51.4472 23.5H49.2279L51.8955 17.7276L47.1655 7.00095H49.5081L52.9155 15.228H52.9604L56.2781 7.00095H58.6207Z\" fill=\"currentColor\"/>\n <path d=\"M18.8001 10.3187C18.8001 9.61709 18.7373 8.94569 18.6208 8.30008H9.6001V11.9989L14.7953 12C14.5846 13.2307 13.9064 14.2799 12.8674 14.9793V17.379H15.9598C17.7655 15.7078 18.8001 13.2375 18.8001 10.3187Z\" fill=\"#4285F4\"/>\n <path d=\"M12.8685 14.9793C12.0076 15.5599 10.8991 15.8995 9.60228 15.8995C7.09717 15.8995 4.97202 14.2115 4.21096 11.9361H1.021V14.411C2.60141 17.5472 5.84965 19.6992 9.60228 19.6992C12.1959 19.6992 14.3749 18.8462 15.9609 17.3779L12.8685 14.9793Z\" fill=\"#34A853\"/>\n <path d=\"M3.91043 10.1002C3.91043 9.46129 4.01691 8.8437 4.21082 8.26309V5.78824H1.02086C0.367396 7.08507 -0.000244141 8.54891 -0.000244141 10.1002C-0.000244141 11.6514 0.368516 13.1153 1.02086 14.4121L4.21082 11.9373C4.01691 11.3567 3.91043 10.7391 3.91043 10.1002Z\" fill=\"#FABB05\"/>\n <path d=\"M9.60228 4.29974C11.0179 4.29974 12.2856 4.78731 13.2865 5.74004L16.027 3.00179C14.3626 1.45164 12.1926 0.500031 9.60228 0.500031C5.85077 0.500031 2.60141 2.65208 1.021 5.78824L4.21096 8.26309C4.97202 5.98775 7.09717 4.29974 9.60228 4.29974Z\" fill=\"#E94235\"/>\n </svg>\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Protected by Google Pay's unique Device Account Number</span>\n </li>\n </ul>\n <div class=\"ff-google-pay-button-container ff-payment-container\" id=\"googlePayButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n <!-- PayPal Section -->\n <div class=\"ff-payment-method-card ff-payment-method-paypal\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"paypal\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-paypal-logo\">\n <img class=\"payment-method-icon\" style=\"max-height: 22px\" src=\"https://assets.fnlfx.com/common/checkout/paypal.webp\" alt=\"PayPal logo\">\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span> Fast, convenient payment option </span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>\n Keeps your financial info safe with end-to-end encryption\n </span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span> Backed by PayPal’s industry-leading fraud protection </span>\n </li>\n </ul>\n <div class=\"ff-paypal-button-container ff-payment-container\" id=\"paypalButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n\n <!-- Card Payments Section -->\n <div class=\"ff-payment-method-card ff-payment-method-payment-card\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"card\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-card-logos\">\n <img class=\"payment-method-icon\" style=\"max-height: 30px\" src=\"https://assets.fnlfx.com/common/checkout/cards.webp\" alt=\"visa, mastercard\">\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <div class=\"ff-card-form-container ff-payment-container\" id=\"cardForm\">\n <div class=\"loader-container\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <button class=\"ff-card-form-submit-button\" id=\"submitButton\">\n Continue\n </button>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n </div>\n <div id=\"success-screen\" style=\"display: none\">\n <div class=\"success\">\n <img alt=\"Loading\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1IDAuMTExMzI4QzIwLjA3NzQgMC4xMTEzMjggMTUuMjY1NCAxLjU3MTA0IDExLjE3MjUgNC4zMDU4NkM3LjA3OTUyIDcuMDQwNjkgMy44ODk0NSAxMC45Mjc4IDIuMDA1NjYgMTUuNDc1N0MwLjEyMTg4MyAyMC4wMjM1IC0wLjM3MSAyNS4wMjc4IDAuNTg5MzQzIDI5Ljg1NThDMS41NDk2OSAzNC42ODM4IDMuOTIwMTIgMzkuMTE4NSA3LjQwMDkgNDIuNTk5M0MxMC44ODE3IDQ2LjA4MDEgMTUuMzE2NCA0OC40NTA1IDIwLjE0NDQgNDkuNDEwOUMyNC45NzI0IDUwLjM3MTIgMjkuOTc2NyA0OS44NzgzIDM0LjUyNDYgNDcuOTk0NkMzOS4wNzI0IDQ2LjExMDggNDIuOTU5NSA0Mi45MjA3IDQ1LjY5NDQgMzguODI3N0M0OC40MjkyIDM0LjczNDggNDkuODg4OSAyOS45MjI4IDQ5Ljg4ODkgMjUuMDAwMkM0OS44ODg5IDE4LjM5OTMgNDcuMjY2NyAxMi4wNjg3IDQyLjU5OTEgNy40MDExMkMzNy45MzE1IDIuNzMzNTQgMzEuNjAwOSAwLjExMTMyOCAyNSAwLjExMTMyOFpNNDEuMjU1NiAxNi42NDY5TDIwLjgxNTYgMzcuMDcxM0w4Ljc0NDQ0IDI1LjAwMDJDOC4zMzE4OCAyNC41ODc3IDguMTAwMTEgMjQuMDI4MSA4LjEwMDExIDIzLjQ0NDdDOC4xMDAxMSAyMi44NjEyIDguMzMxODggMjIuMzAxNyA4Ljc0NDQ0IDIxLjg4OTFDOS4xNTcgMjEuNDc2NSA5LjcxNjU1IDIxLjI0NDggMTAuMyAyMS4yNDQ4QzEwLjg4MzQgMjEuMjQ0OCAxMS40NDMgMjEuNDc2NSAxMS44NTU2IDIxLjg4OTFMMjAuODQ2NyAzMC44ODAyTDM4LjE3NTYgMTMuNTY2OUMzOC4zNzk4IDEzLjM2MjYgMzguNjIyMyAxMy4yMDA2IDM4Ljg4OTIgMTMuMDlDMzkuMTU2MiAxMi45Nzk1IDM5LjQ0MjIgMTIuOTIyNiAzOS43MzExIDEyLjkyMjZDNDAuMDIgMTIuOTIyNiA0MC4zMDYxIDEyLjk3OTUgNDAuNTczIDEzLjA5QzQwLjgzOTkgMTMuMjAwNiA0MS4wODI0IDEzLjM2MjYgNDEuMjg2NyAxMy41NjY5QzQxLjQ5MDkgMTMuNzcxMiA0MS42NTMgMTQuMDEzNyA0MS43NjM1IDE0LjI4MDZDNDEuODc0MSAxNC41NDc1IDQxLjkzMSAxNC44MzM1IDQxLjkzMSAxNS4xMjI0QzQxLjkzMSAxNS40MTEzIDQxLjg3NDEgMTUuNjk3NCA0MS43NjM1IDE1Ljk2NDNDNDEuNjUzIDE2LjIzMTIgNDEuNDkwOSAxNi40NzM3IDQxLjI4NjcgMTYuNjc4TDQxLjI1NTYgMTYuNjQ2OVoiIGZpbGw9IiM4RURGQzIiLz4KPC9zdmc+Cg==\">\n <div>Payment completed successfully</div>\n </div>\n </div>\n</div>\n";
1357
+ var template$1 = "<div class=\"ff-skin-default\" id=\"ff-payment-method-containers\">\n <div id=\"success-screen\" style=\"display: none\">\n <div class=\"success\">\n <img alt=\"Loading\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1IDAuMTExMzI4QzIwLjA3NzQgMC4xMTEzMjggMTUuMjY1NCAxLjU3MTA0IDExLjE3MjUgNC4zMDU4NkM3LjA3OTUyIDcuMDQwNjkgMy44ODk0NSAxMC45Mjc4IDIuMDA1NjYgMTUuNDc1N0MwLjEyMTg4MyAyMC4wMjM1IC0wLjM3MSAyNS4wMjc4IDAuNTg5MzQzIDI5Ljg1NThDMS41NDk2OSAzNC42ODM4IDMuOTIwMTIgMzkuMTE4NSA3LjQwMDkgNDIuNTk5M0MxMC44ODE3IDQ2LjA4MDEgMTUuMzE2NCA0OC40NTA1IDIwLjE0NDQgNDkuNDEwOUMyNC45NzI0IDUwLjM3MTIgMjkuOTc2NyA0OS44NzgzIDM0LjUyNDYgNDcuOTk0NkMzOS4wNzI0IDQ2LjExMDggNDIuOTU5NSA0Mi45MjA3IDQ1LjY5NDQgMzguODI3N0M0OC40MjkyIDM0LjczNDggNDkuODg4OSAyOS45MjI4IDQ5Ljg4ODkgMjUuMDAwMkM0OS44ODg5IDE4LjM5OTMgNDcuMjY2NyAxMi4wNjg3IDQyLjU5OTEgNy40MDExMkMzNy45MzE1IDIuNzMzNTQgMzEuNjAwOSAwLjExMTMyOCAyNSAwLjExMTMyOFpNNDEuMjU1NiAxNi42NDY5TDIwLjgxNTYgMzcuMDcxM0w4Ljc0NDQ0IDI1LjAwMDJDOC4zMzE4OCAyNC41ODc3IDguMTAwMTEgMjQuMDI4MSA4LjEwMDExIDIzLjQ0NDdDOC4xMDAxMSAyMi44NjEyIDguMzMxODggMjIuMzAxNyA4Ljc0NDQ0IDIxLjg4OTFDOS4xNTcgMjEuNDc2NSA5LjcxNjU1IDIxLjI0NDggMTAuMyAyMS4yNDQ4QzEwLjg4MzQgMjEuMjQ0OCAxMS40NDMgMjEuNDc2NSAxMS44NTU2IDIxLjg4OTFMMjAuODQ2NyAzMC44ODAyTDM4LjE3NTYgMTMuNTY2OUMzOC4zNzk4IDEzLjM2MjYgMzguNjIyMyAxMy4yMDA2IDM4Ljg4OTIgMTMuMDlDMzkuMTU2MiAxMi45Nzk1IDM5LjQ0MjIgMTIuOTIyNiAzOS43MzExIDEyLjkyMjZDNDAuMDIgMTIuOTIyNiA0MC4zMDYxIDEyLjk3OTUgNDAuNTczIDEzLjA5QzQwLjgzOTkgMTMuMjAwNiA0MS4wODI0IDEzLjM2MjYgNDEuMjg2NyAxMy41NjY5QzQxLjQ5MDkgMTMuNzcxMiA0MS42NTMgMTQuMDEzNyA0MS43NjM1IDE0LjI4MDZDNDEuODc0MSAxNC41NDc1IDQxLjkzMSAxNC44MzM1IDQxLjkzMSAxNS4xMjI0QzQxLjkzMSAxNS40MTEzIDQxLjg3NDEgMTUuNjk3NCA0MS43NjM1IDE1Ljk2NDNDNDEuNjUzIDE2LjIzMTIgNDEuNDkwOSAxNi40NzM3IDQxLjI4NjcgMTYuNjc4TDQxLjI1NTYgMTYuNjQ2OVoiIGZpbGw9IiM4RURGQzIiLz4KPC9zdmc+Cg==\">\n <div>Payment completed successfully</div>\n </div>\n </div>\n</div>\n";
1358
+
1359
+ var cardTemplate = "<!-- Card Payments Section -->\n<div class=\"ff-payment-method-card ff-payment-method-payment-card\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"card\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-card-logos\">\n <img class=\"payment-method-icon\" style=\"max-height: 30px\" src=\"https://assets.fnlfx.com/common/checkout/cards.webp\" alt=\"visa, mastercard\">\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <div class=\"ff-card-form-container ff-payment-container\" id=\"cardForm\">\n <div class=\"loader-container\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <button class=\"ff-card-form-submit-button\" id=\"submitButton\">\n Continue\n </button>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n</div>\n";
1360
+
1361
+ var paypalTemplate = "<div class=\"ff-payment-method-card ff-payment-method-paypal\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"paypal\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-paypal-logo\">\n <img class=\"payment-method-icon\" style=\"max-height: 22px\" src=\"https://assets.fnlfx.com/common/checkout/paypal.webp\" alt=\"PayPal logo\">\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span> Fast, convenient payment option </span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span> Keeps your financial info safe with end-to-end encryption </span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span> Backed by PayPal’s industry-leading fraud protection </span>\n </li>\n </ul>\n <div class=\"ff-paypal-button-container ff-payment-container\" id=\"paypalButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n</div>\n";
1362
+
1363
+ var googlePayTemplate = "<!-- Google Pay Section -->\n<div class=\"ff-payment-method-card ff-payment-method-google-pay\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"google-pay\" class=\"ff-payment-method-radio\" checked=\"checked\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-google-pay-logo\">\n <svg class=\"payment-method-icon\" height=\"26\" viewBox=\"0 0 59 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M27.3601 11.6862V18.4674H25.208V1.72177H30.9132C32.3591 1.72177 33.592 2.20374 34.6008 3.16768C35.632 4.13162 36.1476 5.30852 36.1476 6.69838C36.1476 8.12187 35.632 9.29877 34.6008 10.2515C33.6032 11.2042 32.3703 11.675 30.9132 11.675H27.3601V11.6862ZM27.3601 3.78415V9.62382H30.958C31.8099 9.62382 32.5272 9.3324 33.0876 8.76076C33.6593 8.18912 33.9507 7.49419 33.9507 6.70959C33.9507 5.9362 33.6593 5.25248 33.0876 4.68084C32.5272 4.08678 31.8211 3.79536 30.958 3.79536H27.3601V3.78415Z\" fill=\"currentColor\"/>\n <path d=\"M41.7742 6.63107C43.3658 6.63107 44.6212 7.057 45.5403 7.90885C46.4594 8.7607 46.9189 9.9264 46.9189 11.4059V18.4673H44.8677V16.8757H44.7781C43.8926 18.1871 42.7045 18.8372 41.225 18.8372C39.9584 18.8372 38.9048 18.4673 38.0529 17.7164C37.2011 16.9654 36.7751 16.0351 36.7751 14.9142C36.7751 13.7261 37.2235 12.7846 38.1202 12.0896C39.0169 11.3835 40.2162 11.036 41.7069 11.036C42.9847 11.036 44.0383 11.2714 44.8565 11.7422V11.249C44.8565 10.498 44.5651 9.87035 43.9711 9.34355C43.377 8.81674 42.6821 8.55895 41.8863 8.55895C40.6869 8.55895 39.7342 9.06333 39.0393 10.0833L37.145 8.8952C38.1874 7.38205 39.7342 6.63107 41.7742 6.63107ZM38.9944 14.9478C38.9944 15.5083 39.2298 15.979 39.7118 16.3489C40.1826 16.7188 40.743 16.9093 41.3819 16.9093C42.2898 16.9093 43.0968 16.5731 43.8029 15.9006C44.5091 15.228 44.8677 14.4435 44.8677 13.5356C44.1952 13.0088 43.2649 12.7397 42.0656 12.7397C41.1913 12.7397 40.4628 12.9527 39.8799 13.3674C39.2859 13.8046 38.9944 14.3314 38.9944 14.9478Z\" fill=\"currentColor\"/>\n <path d=\"M58.6207 7.00095L51.4472 23.5H49.2279L51.8955 17.7276L47.1655 7.00095H49.5081L52.9155 15.228H52.9604L56.2781 7.00095H58.6207Z\" fill=\"currentColor\"/>\n <path d=\"M18.8001 10.3187C18.8001 9.61709 18.7373 8.94569 18.6208 8.30008H9.6001V11.9989L14.7953 12C14.5846 13.2307 13.9064 14.2799 12.8674 14.9793V17.379H15.9598C17.7655 15.7078 18.8001 13.2375 18.8001 10.3187Z\" fill=\"#4285F4\"/>\n <path d=\"M12.8685 14.9793C12.0076 15.5599 10.8991 15.8995 9.60228 15.8995C7.09717 15.8995 4.97202 14.2115 4.21096 11.9361H1.021V14.411C2.60141 17.5472 5.84965 19.6992 9.60228 19.6992C12.1959 19.6992 14.3749 18.8462 15.9609 17.3779L12.8685 14.9793Z\" fill=\"#34A853\"/>\n <path d=\"M3.91043 10.1002C3.91043 9.46129 4.01691 8.8437 4.21082 8.26309V5.78824H1.02086C0.367396 7.08507 -0.000244141 8.54891 -0.000244141 10.1002C-0.000244141 11.6514 0.368516 13.1153 1.02086 14.4121L4.21082 11.9373C4.01691 11.3567 3.91043 10.7391 3.91043 10.1002Z\" fill=\"#FABB05\"/>\n <path d=\"M9.60228 4.29974C11.0179 4.29974 12.2856 4.78731 13.2865 5.74004L16.027 3.00179C14.3626 1.45164 12.1926 0.500031 9.60228 0.500031C5.85077 0.500031 2.60141 2.65208 1.021 5.78824L4.21096 8.26309C4.97202 5.98775 7.09717 4.29974 9.60228 4.29974Z\" fill=\"#E94235\"/>\n </svg>\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Protected by Google Pay's unique Device Account Number</span>\n </li>\n </ul>\n <div class=\"ff-google-pay-button-container ff-payment-container\" id=\"googlePayButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n</div>\n";
1364
+
1365
+ var applePayTemplate = "<!-- Apple Pay Section -->\n<div class=\"ff-payment-method-card ff-payment-method-apple-pay\">\n <label class=\"ff-payment-method-label\">\n <input type=\"radio\" name=\"payment-method\" value=\"apple-pay\" class=\"ff-payment-method-radio\">\n <div class=\"ff-payment-method-header\">\n <div class=\"ff-payment-logo ff-apple-pay-logo\">\n <svg class=\"payment-method-icon\" height=\"26\" viewBox=\"0 0 63 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.41022 4.82398C9.5916 4.92293 10.773 4.23026 11.5113 3.35205C12.2374 2.4491 12.7173 1.23692 12.5943 0C11.5483 0.0494767 10.2561 0.692674 9.51777 1.59562C8.84093 2.37488 8.26255 3.63654 8.41022 4.82398ZM22.4638 20.7555V1.47193H29.6628C33.3793 1.47193 35.9758 4.04471 35.9758 7.80494C35.9758 11.5652 33.33 14.1627 29.5644 14.1627H25.4418V20.7555H22.4638ZM12.5819 5.05898C11.5411 4.99877 10.5914 5.37358 9.82438 5.67633C9.33075 5.87116 8.91274 6.03614 8.59472 6.03614C8.23784 6.03614 7.80257 5.86234 7.31387 5.66719C6.6735 5.4115 5.94138 5.11916 5.17364 5.13319C3.41387 5.15793 1.77716 6.15983 0.878819 7.75545C-0.967091 10.9467 0.398882 15.6717 2.18326 18.2693C3.05699 19.5556 4.10301 20.9657 5.48129 20.9163C6.08765 20.8933 6.52383 20.7072 6.97524 20.5147C7.49492 20.293 8.0348 20.0628 8.87776 20.0628C9.69151 20.0628 10.2078 20.287 10.7033 20.5023C11.1746 20.707 11.6271 20.9036 12.2989 20.8915C13.7264 20.8668 14.6247 19.6051 15.4984 18.3187C16.4413 16.9381 16.8557 15.5906 16.9186 15.3861C16.9222 15.3745 16.9246 15.3665 16.9259 15.3625C16.9244 15.361 16.9128 15.3556 16.8922 15.3462C16.577 15.2011 14.1679 14.0926 14.1448 11.1199C14.1216 8.62473 16.0556 7.36054 16.3601 7.16153C16.3786 7.14944 16.3911 7.14125 16.3968 7.137C15.1662 5.30636 13.2464 5.10845 12.5819 5.05898ZM41.4153 20.9039C43.2858 20.9039 45.0209 19.9515 45.8085 18.4424H45.8701V20.7555H48.6266V11.157C48.6266 8.37393 46.4115 6.5804 43.0027 6.5804C39.8401 6.5804 37.5019 8.39866 37.4158 10.8972H40.0985C40.32 9.70979 41.4153 8.93054 42.9166 8.93054C44.7379 8.93054 45.7593 9.78401 45.7593 11.3549V12.4186L42.0429 12.6413C38.5849 12.8516 36.7143 14.274 36.7143 16.7479C36.7143 19.2464 38.6464 20.9039 41.4153 20.9039ZM42.215 18.6156C40.6275 18.6156 39.6184 17.8487 39.6184 16.6736C39.6184 15.4615 40.5906 14.7564 42.4488 14.6451L45.7591 14.4348V15.5233C45.7591 17.3292 44.2332 18.6156 42.215 18.6156ZM57.7699 21.51C56.5762 24.8868 55.2103 26 52.306 26C52.0845 26 51.3461 25.9753 51.1739 25.9258V23.6127C51.3585 23.6375 51.8138 23.6622 52.0476 23.6622C53.3643 23.6622 54.1027 23.1056 54.558 21.6584L54.8288 20.8049L49.7833 6.76594H52.8967L56.4039 18.1579H56.4655L59.9727 6.76594H63L57.7699 21.51ZM25.4416 3.99524H28.875C31.4592 3.99524 32.936 5.38059 32.936 7.81731C32.936 10.254 31.4592 11.6518 28.8627 11.6518H25.4416V3.99524Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n </div>\n </label>\n <div class=\"ff-payment-method-content\">\n <ul class=\"ff-payment-features\">\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class=\"ff-payment-feature\">\n <svg width=\"13\" height=\"11\" viewBox=\"0 0 13 11\" fill=\"none\">\n <path stroke=\"#F8545D\" d=\"M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254\" stroke-width=\"2.66667\" stroke-linecap=\"round\"></path>\n </svg>\n <span>Protected by Apple Pay’s unique Device Account Numbe</span>\n </li>\n </ul>\n <div class=\"ff-apple-pay-button-container ff-payment-container\" id=\"applePayButton\"></div>\n <div class=\"loader-container payment-button-loader\">\n <div class=\"loader\"></div>\n </div>\n <div class=\"payment-errors-container\"></div>\n <p class=\"ff-security-message\">\n Your payment information is secure with Apple Pay encryption\n </p>\n </div>\n</div>\n";
1345
1366
 
1346
1367
  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}\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/* 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: 0;\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\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/* hack for FFB-169 */\n.ff-google-pay-button-container button, .ff-apple-pay-button-container button {\n height: 54px !important;\n border-radius: 28px !important;\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";
1347
1368
 
@@ -1424,8 +1445,14 @@
1424
1445
  default: CardSkin
1425
1446
  });
1426
1447
 
1448
+ const paymentMethodTemplates = {
1449
+ [exports.PaymentMethod.PAYMENT_CARD]: cardTemplate,
1450
+ [exports.PaymentMethod.PAYPAL]: paypalTemplate,
1451
+ [exports.PaymentMethod.GOOGLE_PAY]: googlePayTemplate,
1452
+ [exports.PaymentMethod.APPLE_PAY]: applePayTemplate,
1453
+ };
1427
1454
  class DefaultSkin {
1428
- constructor(primerWrapper, containerSelector) {
1455
+ constructor(primerWrapper, containerSelector, paymentMethodOrder) {
1429
1456
  this.onLoaderChange = (isLoading) => {
1430
1457
  this.primerWrapper.disableButtons(isLoading);
1431
1458
  document
@@ -1498,6 +1525,7 @@
1498
1525
  this.currentPurchaseMethod = null;
1499
1526
  };
1500
1527
  this.containerSelector = containerSelector;
1528
+ this.paymentMethodOrder = paymentMethodOrder;
1501
1529
  const containerEl = document.querySelector(containerSelector);
1502
1530
  if (!containerEl) {
1503
1531
  throw new Error(`Container element not found for selector: ${containerSelector}`);
@@ -1519,9 +1547,12 @@
1519
1547
  }
1520
1548
  });
1521
1549
  };
1522
- const checkedRadio = Array.from(radioButtons).find(radio => radio.checked);
1550
+ const checkedRadio = Array.from(radioButtons)[0];
1551
+ if (!checkedRadio) {
1552
+ throw new Error('Default skin accordion initialization error: No radio button found');
1553
+ }
1523
1554
  setTimeout(() => {
1524
- handleAccordion(checkedRadio || null);
1555
+ checkedRadio.click();
1525
1556
  }, 0);
1526
1557
  radioButtons.forEach(radio => {
1527
1558
  radio.addEventListener('change', () => {
@@ -1544,6 +1575,10 @@
1544
1575
  }
1545
1576
  async init() {
1546
1577
  this.containerEl.insertAdjacentHTML('beforeend', template$1);
1578
+ const paymentMethodContainers = this.containerEl.querySelector('#ff-payment-method-containers');
1579
+ this.paymentMethodOrder.forEach(paymentMethod => {
1580
+ paymentMethodContainers.insertAdjacentHTML('beforeend', paymentMethodTemplates[paymentMethod]);
1581
+ });
1547
1582
  this.cardInstance = new CardSkin(document.querySelector('#cardForm'));
1548
1583
  this.cardInstance.init();
1549
1584
  this.initAccordion();
@@ -1594,8 +1629,8 @@
1594
1629
  };
1595
1630
  }
1596
1631
  }
1597
- const createDefaultSkin = async (primerWrapper, containerSelector) => {
1598
- const skin = new DefaultSkin(primerWrapper, containerSelector);
1632
+ const createDefaultSkin = async (primerWrapper, containerSelector, paymentMethodOrder) => {
1633
+ const skin = new DefaultSkin(primerWrapper, containerSelector, paymentMethodOrder);
1599
1634
  await skin['init']();
1600
1635
  return skin;
1601
1636
  };
package/dist/funnelfox-billing.min.js CHANGED
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).FunnelfoxSDK={})}(this,function(e){"use strict";class t{constructor(){this._events=new Map}on(e,t){if("function"!=typeof t)throw new Error("Event handler must be a function");return this._events.has(e)||this._events.set(e,[]),this._events.get(e).push(t),this}once(e,t){if("function"!=typeof t)throw new Error("Event handler must be a function");const n=(...r)=>{this.off(e,n),t.apply(this,r)};return this.on(e,n)}off(e,t=null){if(!this._events.has(e))return this;if(null===t)return this._events.delete(e),this;const n=this._events.get(e),r=n.indexOf(t);return-1!==r&&(n.splice(r,1),0===n.length&&this._events.delete(e)),this}emit(e,...t){if(!this._events.has(e))return!1;const n=this._events.get(e).slice();for(const r of n)try{r.apply(this,t)}catch(t){console.warn(`Error in event handler for "${String(e)}":`,t)}return!0}listenerCount(e){return this._events.has(e)?this._events.get(e).length:0}eventNames(){return Array.from(this._events.keys())}removeAllListeners(){return this._events.clear(),this}listeners(e){return this._events.has(e)?this._events.get(e).slice():[]}}class n extends Error{constructor(e,t=y.SDK_ERROR,r=null){super(e),this.name="FunnefoxSDKError",this.code=t,this.details=r,Error.captureStackTrace&&Error.captureStackTrace(this,n)}}class r extends n{constructor(e,t,n=null){super(`Invalid ${e}: ${t}`,y.VALIDATION_ERROR),this.name="ValidationError",this.field=e,this.value=n}}class o extends n{constructor(e,t=null,n={}){super(e,n.errorCode||y.API_ERROR),this.name="APIError",this.statusCode=t,this.errorCode=n.errorCode||null,this.errorType=n.errorType||null,this.requestId=n.requestId||null,this.response=n.response||null}}class i extends n{constructor(e,t=null){super(e,y.PRIMER_ERROR),this.name="PrimerError",this.primerError=t}}class a extends n{constructor(e,t=null){super(e,y.CHECKOUT_ERROR),this.name="CheckoutError",this.phase=t}}class s extends n{constructor(e,t=null){super(e,y.NETWORK_ERROR),this.name="NetworkError",this.originalError=t}}function c(...e){const t={};for(const n of e)if(n&&"object"==typeof n)for(const e in n)Object.prototype.hasOwnProperty.call(n,e)&&("object"!=typeof n[e]||Array.isArray(n[e])||null===n[e]?t[e]=n[e]:t[e]=c(t[e]||{},n[e]));return t}function d(e){return new Promise(t=>setTimeout(t,e))}var l;e.PaymentMethod=void 0,(l=e.PaymentMethod||(e.PaymentMethod={})).GOOGLE_PAY="GOOGLE_PAY",l.APPLE_PAY="APPLE_PAY",l.PAYPAL="PAYPAL",l.PAYMENT_CARD="PAYMENT_CARD";const h={BASE_URL:"https://billing.funnelfox.com",REGION:"default",SANDBOX:!1,REQUEST_TIMEOUT:3e4,RETRY_ATTEMPTS:3,RETRY_BASE_DELAY:1e3},u={SUCCESS:"success",ERROR:"error",STATUS_CHANGE:"status-change",DESTROY:"destroy",INPUT_ERROR:"input-error",LOADER_CHANGE:"loader-change",METHOD_RENDER:"method-render",METHOD_RENDER_ERROR:"method-render-error",START_PURCHASE:"start-purchase",PURCHASE_FAILURE:"purchase-failure",PURCHASE_COMPLETED:"purchase-completed",PURCHASE_CANCELLED:"purchase-cancelled"},p="/v1/checkout/create_client_session",C="/v1/checkout/update_client_session",m="/v1/checkout/create_payment",f="/v1/checkout/resume_payment",y={SDK_ERROR:"SDK_ERROR",VALIDATION_ERROR:"VALIDATION_ERROR",API_ERROR:"API_ERROR",PRIMER_ERROR:"PRIMER_ERROR",CHECKOUT_ERROR:"CHECKOUT_ERROR",CONFIGURATION_ERROR:"CONFIGURATION_ERROR",NETWORK_ERROR:"NETWORK_ERROR"},g=[...[e.PaymentMethod.GOOGLE_PAY,e.PaymentMethod.APPLE_PAY,e.PaymentMethod.PAYPAL],...[e.PaymentMethod.PAYMENT_CARD]],E={input:{error:{borderColor:"rgb(227, 47, 65)"},base:{borderWidth:"1px",borderStyle:"solid",borderColor:"rgb(0 0 0 / 10%)",height:"36px",paddingHorizontal:10,borderRadius:"6px"}}};E.input.base.paddingHorizontal,E.input.base.paddingHorizontal;class M{constructor(){this.isInitialized=!1,this.destroyCallbacks=[],this.headless=null,this.availableMethods=[]}isPrimerAvailable(){return"undefined"!=typeof window&&window.Primer&&"function"==typeof window.Primer?.createHeadless}ensurePrimerAvailable(){if(!this.isPrimerAvailable())throw new i("Primer SDK not found. Please include the Primer SDK script before initializing FunnefoxSDK.")}async createHeadlessCheckout(e,t){if(this.headless)return this.headless;this.ensurePrimerAvailable();const n=c({paymentHandling:"MANUAL",apiVersion:"2.4"},t);try{const t=await window.Primer.createHeadless(e,n);await t.start(),this.headless=t}catch(e){throw new i("Failed to create Primer headless checkout",e)}}initializeCardElements(e){const{cardNumber:t,expiryDate:n,cvv:r,cardholderName:o,button:i}=e;return{cardNumber:document.querySelector(t),expiryDate:document.querySelector(n),cvv:document.querySelector(r),cardholderName:document.querySelector(o),button:document.querySelector(i)}}disableButtons(e){if(this.paymentMethodsInterfaces)for(const t in this.paymentMethodsInterfaces)this.paymentMethodsInterfaces[t].setDisabled(e)}async renderButton(e,{container:t}){const n=this.validateContainer(t);let r;if(this.ensurePrimerAvailable(),!this.headless)throw new i("Headless checkout not found");try{const t=await this.headless.createPaymentMethodManager(e);if(!t)throw new Error("Payment method manager is not available");r=t.createButton(),await r.render(n,{}),this.destroyCallbacks.push(()=>r.clean())}catch(e){throw new i("Failed to initialize Primer checkout",e)}}async initMethod(t,n,r){if(t===e.PaymentMethod.PAYMENT_CARD){if(!r.cardElements||!r.onSubmit||!r.onInputChange)throw new i("Card elements, onSubmit, and onInputChange are required for PAYMENT_CARD method");return this.renderCardCheckoutWithElements(r.cardElements,{onSubmit:r.onSubmit,onInputChange:r.onInputChange,onMethodRenderError:r.onMethodRenderError,onMethodRender:r.onMethodRender})}if(this.ensurePrimerAvailable(),!this.headless)throw new i("Headless checkout not found");try{const e=await this.headless.createPaymentMethodManager(t);if(!e)throw new Error("Payment method manager is not available");const o=e.createButton();await o.render(n,{}),this.destroyCallbacks.push(()=>o.clean()),r.onMethodRender(t)}catch(e){throw r.onMethodRenderError(t),new i("Failed to initialize Primer checkout",e)}}async renderCardCheckoutWithElements(t,{onSubmit:n,onInputChange:r,onMethodRenderError:o,onMethodRender:a}){try{const o=await this.headless.createPaymentMethodManager("PAYMENT_CARD");if(!o)throw new Error("Payment method manager is not available");const{cardNumberInput:s,expiryInput:c,cvvInput:d}=o.createHostedInputs(),l=async()=>{if(!o)return!1;const{valid:e,validationErrors:t}=await o.validate(),n=t.find(e=>"cardholderName"===e.name);return h("cardholderName",n?.message||null),e},h=(e,t)=>{r(e,t)},u=e=>t=>{const n=t;n.submitted&&h(e,n.error)},p=async e=>{o.setCardholderName(e.target.value),h("cardholderName",null)};t.cardholderName?.addEventListener("input",p),s.addEventListener("change",u("cardNumber")),c.addEventListener("change",u("expiryDate")),d.addEventListener("change",u("cvv"));const C=async()=>{if(await l())try{n(!0),await o.submit()}catch(e){throw new i("Failed to submit payment",e)}finally{n(!1)}};t.button?.addEventListener("click",C),await Promise.all([s.render(t.cardNumber,{placeholder:"1234 1234 1234 1234",ariaLabel:"Card number",style:E}),c.render(t.expiryDate,{placeholder:"MM/YY",ariaLabel:"Expiry date",style:E}),d.render(t.cvv,{placeholder:"123",ariaLabel:"CVV",style:E})]);const m=()=>{o.removeHostedInputs(),t.cardholderName.removeEventListener("change",p),t.button.removeEventListener("click",C)};return this.destroyCallbacks.push(m),a(e.PaymentMethod.PAYMENT_CARD),{setDisabled:e=>{s.setDisabled(e),c.setDisabled(e),d.setDisabled(e),t.button.disabled=e},submit:()=>C(),destroy:()=>{this.destroyCallbacks=this.destroyCallbacks.filter(e=>e!==m),m()}}}catch(e){throw new i("Failed to initialize Primer checkout",e)}}async initializeHeadlessCheckout(t,n){await this.createHeadlessCheckout(t,{...n,onTokenizeSuccess:this.wrapTokenizeHandler(n.onTokenizeSuccess),onResumeSuccess:this.wrapResumeHandler(n.onResumeSuccess),onAvailablePaymentMethodsLoad:t=>{let n=!1;if(this.availableMethods=g.filter(r=>t.some(t=>(t.type===e.PaymentMethod.APPLE_PAY&&(n=!0),t.type===r))),n&&(this.availableMethods=this.availableMethods.filter(t=>t!==e.PaymentMethod.GOOGLE_PAY)),0===this.availableMethods.length)throw new i("No allowed payment methods found")}})}async renderCheckout(t,n,r){const{cardElements:o,paymentButtonElements:i,container:a,onSubmit:s,onInputChange:c,onMethodRender:d,onMethodRenderError:l}=r;await this.initializeHeadlessCheckout(t,n);for(const t of this.availableMethods)if(t===e.PaymentMethod.PAYMENT_CARD)await this.initMethod(t,a,{cardElements:o,onSubmit:s,onInputChange:c,onMethodRender:d,onMethodRenderError:l});else{const n={[e.PaymentMethod.PAYPAL]:i.paypal,[e.PaymentMethod.GOOGLE_PAY]:i.googlePay,[e.PaymentMethod.APPLE_PAY]:i.applePay}[t];await this.initMethod(t,n,{onMethodRender:d,onMethodRenderError:l})}this.isInitialized=!0}wrapTokenizeHandler(e){return async(t,n)=>{try{await e(t,n)}catch(e){console.error("Error in tokenize handler:",e),n.handleFailure("Payment processing failed. Please try again.")}}}wrapResumeHandler(e){return async(t,n)=>{try{await e(t,n)}catch(e){console.error("Error in resume handler:",e),n.handleFailure("Payment processing failed. Please try again.")}}}async destroy(){if(this.destroyCallbacks)try{Promise.all(this.destroyCallbacks.map(e=>e()))}catch(e){console.warn("Error destroying Primer checkout:",e)}this.destroyCallbacks=[],this.isInitialized=!1}createHandlers(e){return{handleSuccess:()=>{e.onSuccess&&e.onSuccess()},handleFailure:t=>{e.onError&&e.onError(new Error(t))},continueWithNewClientToken:t=>{e.onActionRequired&&e.onActionRequired(t)}}}getCurrentCheckout(){return this.destroyCallbacks}isActive(){return this.isInitialized&&this.destroyCallbacks.length>0}validateContainer(e){const t=document.querySelector(e);if(!t)throw new i(`Checkout container not found: ${e}`);return"none"===window.getComputedStyle(t).display&&console.warn("Checkout container is hidden, this may cause display issues"),t}}class w{constructor(e){this.baseUrl=e.baseUrl.replace(/\/$/,""),this.orgId=e.orgId,this.timeout=e.timeout||3e4,this.retryAttempts=e.retryAttempts||3}async request(e,t={}){const n=`${this.baseUrl}/${this.orgId}${e}`,r={method:"GET",headers:{"Content-Type":"application/json",...t.headers||{}},...t};try{return await async function(e,t=3,n=1e3){let r;for(let o=1;o<=t;o++)try{return await e()}catch(e){if(r=e,o===t)throw r;const i=n*Math.pow(2,o-1);await d(i)}throw r}(async()=>await function(e,t,n="Operation timed out"){const r=new Promise((e,r)=>{setTimeout(()=>r(new Error(n)),t)});return Promise.race([e,r])}(this._makeRequest(n,r),this.timeout,"Request timed out"),this.retryAttempts)}catch(e){if(e instanceof Error&&"APIError"===e.name)throw e;throw new s("Network request failed",e)}}async _makeRequest(e,t){let n,r;try{n=await fetch(e,t)}catch(e){if(e instanceof Error&&"NetworkError"===e.name)throw e;throw new s("Network request failed",e)}try{r=await n.json()}catch{throw new o("Invalid JSON response",n.status,{})}if(!n.ok){const e=r,t=e.error?.[0]?.msg||"Failed to create payment";throw new o(t,n.status,{response:r})}return r}async createClientSession(e){const t={region:e.region||"default",integration_type:"primer",pp_ident:e.priceId,external_id:e.externalId,email_address:e.email,client_metadata:e.clientMetadata||{}};return void 0!==e.countryCode&&(t.country_code=e.countryCode),await this.request(p,{method:"POST",body:JSON.stringify(t)})}async updateClientSession(e){const t={order_id:e.orderId,client_token:e.clientToken,pp_ident:e.priceId};return await this.request(C,{method:"POST",body:JSON.stringify(t)})}async createPayment(e){const t={order_id:e.orderId,payment_method_token:e.paymentMethodToken};return await this.request(m,{method:"POST",body:JSON.stringify(t)})}async resumePayment(e){const t={order_id:e.orderId,resume_token:e.resumeToken};return await this.request(f,{method:"POST",body:JSON.stringify(t)})}processSessionResponse(e){if("error"===e.status){const t=e.error?.[0];throw new o(t?.msg||"Session creation failed",null,{errorCode:t?.code,errorType:t?.type,requestId:e.req_id,response:e})}const t=e.data;return{type:"session_created",orderId:t.order_id,clientToken:t.client_token}}processPaymentResponse(e){if("error"===e.status){const t=e.error?.[0];throw new o(t?.msg||"Payment request failed",null,{errorCode:t?.code,errorType:t?.type,response:e})}const t=e.data;if(t.action_required_token)return{type:"action_required",orderId:t.order_id,clientToken:t.action_required_token};if(t.checkout_status)switch(t.checkout_status){case"succeeded":return{type:"success",orderId:t.order_id,status:"succeeded"};case"failed":throw new o(t.failed_message_for_user||"Payment failed",null,{response:e});case"cancelled":throw new o("Payment was cancelled by user",null,{response:e});case"processing":return{type:"processing",orderId:t.order_id,status:"processing"};default:throw new o(`Unhandled checkout status: ${t.checkout_status}`,null,{response:e})}throw new o("Invalid payment response format",null,{response:e})}async oneClick(e){return await this.request(`/billing/${this.orgId}/v1/checkout/one_click`,{method:"POST",body:JSON.stringify(e)})}}"undefined"!=typeof document&&(document.head.appendChild(document.createElement("style")).textContent=".ff-sdk-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.ff-sdk-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 }");const S='<div class="ff-sdk-loader-container">\n <div class="ff-sdk-loader"></div>\n</div>\n',v={loaderContainer:".ff-sdk-loader-container"};class I extends t{constructor(e){super(),this.counter=0,this.handleInputChange=(e,t)=>{this.emit(u.INPUT_ERROR,{name:e,error:t})},this.handleMethodRender=e=>{this.emit(u.METHOD_RENDER,e)},this.handleMethodRenderError=e=>{this.emit(u.METHOD_RENDER_ERROR,e)},this.handleSubmit=e=>{this.onLoaderChangeWithRace(e),this._setState(e?"processing":"ready")},this.handleTokenizeSuccess=async(e,t)=>{try{this.onLoaderChangeWithRace(!0),this._setState("processing");const n=await this.apiClient.createPayment({orderId:this.orderId,paymentMethodToken:e.token}),r=this.apiClient.processPaymentResponse(n);await this._processPaymentResult(r,t)}catch(e){this._setState("error"),this.emit(u.PURCHASE_FAILURE,new Error(e.message||"Payment processing failed")),t.handleFailure(e.message||"Payment processing failed")}finally{this.onLoaderChangeWithRace(!1),this._setState("ready")}},this.handleResumeSuccess=async(e,t)=>{try{this.onLoaderChangeWithRace(!0),this._setState("processing");const n=await this.apiClient.resumePayment({orderId:this.orderId,resumeToken:e.resumeToken}),r=this.apiClient.processPaymentResponse(n);await this._processPaymentResult(r,t)}catch(e){this._setState("error"),this.emit(u.PURCHASE_FAILURE,new Error(e.message||"Payment processing failed")),t.handleFailure(e.message||"Payment processing failed")}finally{this.emit(u.PURCHASE_COMPLETED),this.onLoaderChangeWithRace(!1),this._setState("ready")}},this.onLoaderChangeWithRace=e=>{const t=!!(e?++this.counter:--this.counter);this.emit(u.LOADER_CHANGE,t)},this.id=function(e=""){return`${e}${Date.now().toString(36)}_${Math.random().toString(36).substr(2,5)}`}("checkout_"),this.orgId=e.orgId,this.baseUrl=e.baseUrl,this.region=e.region,this.checkoutConfig={...e.checkoutConfig},this.callbacks={onSuccess:this.checkoutConfig.onSuccess,onError:this.checkoutConfig.onError,onStatusChange:this.checkoutConfig.onStatusChange,onDestroy:this.checkoutConfig.onDestroy},delete this.checkoutConfig?.onSuccess,delete this.checkoutConfig?.onError,delete this.checkoutConfig?.onStatusChange,delete this.checkoutConfig?.onDestroy,this.state="initializing",this.orderId=null,this.clientToken=null,this.primerWrapper=new M,this.isDestroyed=!1,this._setupCallbackBridges()}_setupCallbackBridges(){this.callbacks.onSuccess&&this.on(u.SUCCESS,this.callbacks.onSuccess),this.callbacks.onError&&this.on(u.ERROR,this.callbacks.onError),this.callbacks.onStatusChange&&this.on(u.STATUS_CHANGE,this.callbacks.onStatusChange),this.callbacks.onDestroy&&this.on(u.DESTROY,this.callbacks.onDestroy)}removeAllListeners(){return super.removeAllListeners()}async initialize(){try{return this.showInitializingLoader(),this._setState("initializing"),await this.createSession(),await this._initializePrimerCheckout(),this._setState("ready"),this.checkoutConfig?.onInitialized?.(),this}catch(e){throw this._setState("error"),this.emit(u.ERROR,e),e}finally{this.hideInitializingLoader()}}async createSession(){this.apiClient=new w({baseUrl:this.baseUrl||h.BASE_URL,orgId:this.orgId,timeout:h.REQUEST_TIMEOUT,retryAttempts:h.RETRY_ATTEMPTS});const e=await this.apiClient.createClientSession({priceId:this.checkoutConfig.priceId,externalId:this.checkoutConfig.customer.externalId,email:this.checkoutConfig.customer.email,region:this.region||h.REGION,clientMetadata:this.checkoutConfig.clientMetadata,countryCode:this.checkoutConfig.customer.countryCode}),t=this.apiClient.processSessionResponse(e);this.orderId=t.orderId,this.clientToken=t.clientToken}convertCardSelectorsToElements(e,t){const n=t.querySelector(e.cardNumber),r=t.querySelector(e.expiryDate),o=t.querySelector(e.cvv),i=t.querySelector(e.cardholderName),s=t.querySelector(e.button);if(!(n&&r&&o&&s))throw new a("Required card input elements not found in container");return{cardNumber:n,expiryDate:r,cvv:o,cardholderName:i,button:s}}convertPaymentButtonSelectorsToElements(e){const t=document.querySelector(e.paypal),n=document.querySelector(e.googlePay),r=document.querySelector(e.applePay);if(!t||!n||!r)throw new a("Required payment button elements not found in container");return{paypal:t,googlePay:n,applePay:r}}async _initializePrimerCheckout(){const e=this.getContainer();if(!e)throw new a(`Checkout container not found: ${this.checkoutConfig.container}`);let t,n,r;if(this.checkoutConfig.cardSelectors&&this.checkoutConfig.paymentButtonSelectors)t=this.convertCardSelectorsToElements(this.checkoutConfig.cardSelectors,e),n=this.convertPaymentButtonSelectorsToElements(this.checkoutConfig.paymentButtonSelectors),r=this.getCheckoutOptions({});else{const e=await this.getDefaultSkinCheckoutOptions();if(!e.cardElements||!e.paymentButtonElements)throw new a("Default skin must provide cardSelectors and paymentButtonSelectors");t=e.cardElements,n=e.paymentButtonElements,r=this.getCheckoutOptions(e)}await this.primerWrapper.renderCheckout(this.clientToken,r,{container:e,cardElements:t,paymentButtonElements:n,onSubmit:this.handleSubmit,onInputChange:this.handleInputChange,onMethodRender:this.handleMethodRender})}async _processPaymentResult(e,t){switch(e.orderId&&(this.orderId=e.orderId),e.type){case"success":this._setState("completed"),this.emit(u.SUCCESS,{orderId:e.orderId,status:e.status}),t.handleSuccess();break;case"action_required":this._setState("action_required"),this.clientToken=e.clientToken,t.continueWithNewClientToken(e.clientToken);break;case"processing":this._setState("processing"),setTimeout(()=>{t.handleFailure("Payment is still processing. Please check back later.")},3e4);break;default:throw new a(`Unknown payment result type: ${e.type}`)}}getCheckoutOptions(e){let t=!1;return{...this.checkoutConfig,...e,onTokenizeSuccess:this.handleTokenizeSuccess,onResumeSuccess:this.handleResumeSuccess,onResumeError:e=>{e.stack?.includes("PROCESSOR_3DS")&&"RESUME_ERROR"===e.code&&e.message?.includes("fetch resume key")||this.emit(u.PURCHASE_FAILURE,e)},onCheckoutFail:e=>{this.emit(u.PURCHASE_FAILURE,e)},onTokenizeError:e=>{this.emit(u.PURCHASE_FAILURE,e)},onTokenizeShouldStart:e=>(this.emit(u.ERROR,void 0),this.emit(u.START_PURCHASE,e.paymentMethodType),!0),onPaymentMethodAction:e=>{switch(e){case"PAYMENT_METHOD_SELECTED":this.emit(u.ERROR,void 0);break;case"PAYMENT_METHOD_UNSELECTED":t||this.emit(u.PURCHASE_CANCELLED),t=!1}}}}async updatePrice(e){if(this._ensureNotDestroyed(),function(e,t){var n;if(0===(n=e,n?.trim()||"").length)throw new r(t,"must be a non-empty string",e)}(e,"priceId"),"processing"===this.state)throw new a("Cannot update price while payment is processing");try{this._setState("updating"),await this.apiClient.updateClientSession({orderId:this.orderId,clientToken:this.clientToken,priceId:e}),this.checkoutConfig.priceId=e,this._setState("ready")}catch(e){throw this._setState("error"),this.emit(u.ERROR,e),e}}getStatus(){return{id:this.id,state:this.state,orderId:this.orderId,priceId:this.checkoutConfig.priceId,isDestroyed:this.isDestroyed}}async destroy(){if(!this.isDestroyed)try{await this.primerWrapper.destroy(),this._setState("destroyed"),this.orderId=null,this.clientToken=null,this.isDestroyed=!0,this.emit(u.DESTROY),this.removeAllListeners()}catch(e){console.warn("Error during checkout cleanup:",e)}}_setState(e){if(this.state!==e){const t=this.state;this.state=e,this.emit(u.STATUS_CHANGE,e,t)}}_ensureNotDestroyed(){if(this.isDestroyed)throw new a("Checkout instance has been destroyed")}getContainer(){return document.querySelector(this.checkoutConfig.container)}isInState(e){return this.state===e}isReady(){return"ready"===this.state&&!this.isDestroyed}isProcessing(){return["processing","action_required"].includes(this.state)}async getDefaultSkinCheckoutOptions(){const e=(await Promise.resolve().then(function(){return N})).default,t=await e(this.primerWrapper,this.checkoutConfig.container);return this.on(u.INPUT_ERROR,t.onInputError),this.on(u.STATUS_CHANGE,t.onStatusChange),this.on(u.ERROR,e=>t.onError(e)),this.on(u.LOADER_CHANGE,t.onLoaderChange),this.on(u.DESTROY,t.onDestroy),this.on(u.METHOD_RENDER,t.onMethodRender),this.on(u.SUCCESS,t.onSuccess),this.on(u.START_PURCHASE,t.onStartPurchase),this.on(u.PURCHASE_FAILURE,t.onPurchaseFailure),this.on(u.PURCHASE_COMPLETED,t.onPurchaseCompleted),t.getCheckoutOptions()}async getCardDefaultSkinCheckoutOptions(e){const t=new(0,(await Promise.resolve().then(function(){return P})).default)(e);return t.init(),this.on(u.INPUT_ERROR,t.onInputError),t.getCheckoutOptions()}showInitializingLoader(){(e=>{const t=document.querySelector(e);t&&(t.innerHTML=S)})(this.checkoutConfig.container)}hideInitializingLoader(){(()=>{const e=document.querySelector(v.loaderContainer);e&&e.remove()})()}}let R=null;function b(e){R=e}function k(e,t){const{orgId:n,apiConfig:r}=e||{},o=n||R?.orgId;if(!o)throw new Error(`orgId is required. Pass it to ${t}() or call configure() first.`);return{orgId:o,baseUrl:r?.baseUrl||R?.baseUrl||h.BASE_URL,region:r?.region||R?.region||h.REGION}}async function L(e){const{...t}=e;(new M).ensurePrimerAvailable();const n=k(e,"createCheckout"),r=new I({...n,checkoutConfig:{...t}});return await r.initialize(),r}async function x(e){const{priceId:t,externalId:n,email:r,clientMetadata:o,countryCode:i}=e,a=k(e,"createClientSession"),s=new w({baseUrl:a.baseUrl,orgId:a.orgId,timeout:h.REQUEST_TIMEOUT,retryAttempts:h.RETRY_ATTEMPTS}),c=await s.createClientSession({priceId:t,externalId:n,email:r,region:a.region,clientMetadata:o,countryCode:i});return s.processSessionResponse(c)}const D={configure:b,createCheckout:L,createClientSession:x,initMethod:async function(t,n,r){const o=new I({orgId:r.orgId,baseUrl:r.baseUrl,checkoutConfig:{priceId:r.priceId,customer:{externalId:r.externalId,email:r.email},container:"",clientMetadata:r.meta}});if(o._ensureNotDestroyed(),o.isReady()||await o.createSession(),o.on(u.METHOD_RENDER,r.onRenderSuccess),o.on(u.METHOD_RENDER_ERROR,r.onRenderError),o.on(u.LOADER_CHANGE,r.onLoaderChange),o.on(u.SUCCESS,r.onPaymentSuccess),o.on(u.PURCHASE_FAILURE,r.onPaymentFail),o.on(u.PURCHASE_CANCELLED,r.onPaymentCancel),o.on(u.ERROR,r.onErrorMessageChange),t===e.PaymentMethod.PAYMENT_CARD){const e=await o.getCardDefaultSkinCheckoutOptions(n),i=o.getCheckoutOptions({style:r.styles,...e});return await o.primerWrapper.initializeHeadlessCheckout(o.clientToken,i),o.primerWrapper.initMethod(t,n,{cardElements:e.cardElements,onSubmit:o.handleSubmit,onInputChange:o.handleInputChange,onMethodRender:o.handleMethodRender,onMethodRenderError:o.handleMethodRenderError})}return await o.primerWrapper.initializeHeadlessCheckout(o.clientToken,o.getCheckoutOptions({style:r.styles})),o.primerWrapper.initMethod(t,n,{onMethodRender:o.handleMethodRender,onMethodRenderError:o.handleMethodRenderError})}};"undefined"!=typeof window&&(window.Billing=D);"undefined"!=typeof document&&(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}\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/* 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: 0;\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\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/* hack for FFB-169 */\n.ff-google-pay-button-container button, .ff-apple-pay-button-container button {\n height: 54px !important;\n border-radius: 28px !important;\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");"undefined"!=typeof document&&(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-cardholder-input {\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 }\n .ff-card-form-cardholder-input.error {\n border-color: #e32f41;\n }\n \n .errorContainer {\n color: #d10000;\n font-size: 16px;\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 }");class A{constructor(e){if(this.onInputError=e=>{const{name:t,error:n}=e,r=this.getCardInputElements(),o={cardNumber:r.cardNumber.parentElement,expiryDate:r.expiryDate.parentElement,cvv:r.cvv.parentElement},i=o[t]?.querySelector(".errorContainer");i&&(i.textContent=n||"")},!e)throw new Error("Container element not found");this.containerEl=e,this.cardInputElements={cardNumber:document.createElement("div"),expiryDate:document.createElement("div"),cvv:document.createElement("div")}}wireCardInputs(){const e=this.containerEl.querySelector("#cardNumberInput"),t=this.containerEl.querySelector("#expiryInput"),n=this.containerEl.querySelector("#cvvInput");if(!e||!t||!n)throw new Error("One or more card input elements are missing in the default skin");this.cardInputElements={cardNumber:e,expiryDate:t,cvv:n}}async init(){this.containerEl.insertAdjacentHTML("afterbegin",'<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'),this.wireCardInputs()}renderCardForm(){}getCardInputSelectors(){return{cardNumber:"#cardNumberInput",expiryDate:"#expiryInput",cvv:"#cvvInput",cardholderName:"#cardHolderInput",button:"#submitButton"}}getCardInputElements(){return this.cardInputElements}getCheckoutOptions(){return{cardElements:this.getCardInputElements(),card:{cardholderName:{required:!1}}}}}var P=Object.freeze({__proto__:null,default:A});class T{constructor(e,t){this.onLoaderChange=e=>{this.primerWrapper.disableButtons(e),document.querySelectorAll(`${this.containerSelector} .loader-container`)?.forEach(t=>{t.style.display=e?"flex":"none"})},this.onError=(e,t)=>{if(!e)return void this.containerEl.querySelectorAll(".payment-errors-container")?.forEach(e=>{e.innerHTML=""});let n=null;if(t){const e=t.replace("_","-").toLowerCase();n=this.containerEl.querySelector(`.ff-payment-method-${e} .payment-errors-container`)}n&&(n.textContent=e?.message||"")},this.onStatusChange=(e,t)=>{["initializing"].includes(e)||"initializing"!==t||this.onLoaderChange(!1),"updating"===e&&this.onLoaderChange(!0),"ready"===e&&"updating"===t&&this.onLoaderChange(!1)},this.onSuccess=()=>{const e=document.querySelector("#success-screen")?.innerHTML;document.querySelectorAll(".ff-payment-container").forEach(t=>{t.innerHTML=e}),this.onLoaderChange(!1)},this.onDestroy=()=>{this.containerEl.remove()},this.onInputError=e=>{this.cardInstance.onInputError(e)},this.onMethodRender=e=>{const t=e.replace("_","-").toLowerCase(),n=this.containerEl.querySelector(`.ff-payment-method-${t}`);n&&n.classList.add("visible")},this.onStartPurchase=e=>{this.currentPurchaseMethod=e},this.onPurchaseFailure=e=>{this.currentPurchaseMethod&&this.onError(e,this.currentPurchaseMethod),this.currentPurchaseMethod=null},this.onPurchaseCompleted=()=>{this.currentPurchaseMethod=null},this.containerSelector=t;const n=document.querySelector(t);if(!n)throw new Error(`Container element not found for selector: ${t}`);this.containerEl=n,this.primerWrapper=e}initAccordion(){const e=this.containerEl.querySelectorAll(".ff-payment-method-card"),t=this.containerEl.querySelectorAll(".ff-payment-method-radio"),n=t=>{e.forEach(e=>{const n=e.querySelector(".ff-payment-method-radio");n===t&&n?.checked?e.classList.add("expanded"):e.classList.remove("expanded")})},r=Array.from(t).find(e=>e.checked);setTimeout(()=>{n(r||null)},0),t.forEach(e=>{e.addEventListener("change",()=>{e.checked&&n(e)})})}wireCardInputs(){this.cardInstance.wireCardInputs();const e=this.containerEl.querySelector("#submitButton");if(!e)throw new Error("One or more card input elements are missing in the default skin");this.cardInputElements={...this.cardInstance.getCardInputElements(),button:e}}async init(){this.containerEl.insertAdjacentHTML("beforeend",'<div class="ff-skin-default">\n \x3c!-- Apple Pay Section --\x3e\n <div class="ff-payment-method-card ff-payment-method-apple-pay">\n <label class="ff-payment-method-label">\n <input type="radio" name="payment-method" value="apple-pay" class="ff-payment-method-radio">\n <div class="ff-payment-method-header">\n <div class="ff-payment-logo ff-apple-pay-logo">\n <svg class="payment-method-icon" height="26" viewBox="0 0 63 26" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M8.41022 4.82398C9.5916 4.92293 10.773 4.23026 11.5113 3.35205C12.2374 2.4491 12.7173 1.23692 12.5943 0C11.5483 0.0494767 10.2561 0.692674 9.51777 1.59562C8.84093 2.37488 8.26255 3.63654 8.41022 4.82398ZM22.4638 20.7555V1.47193H29.6628C33.3793 1.47193 35.9758 4.04471 35.9758 7.80494C35.9758 11.5652 33.33 14.1627 29.5644 14.1627H25.4418V20.7555H22.4638ZM12.5819 5.05898C11.5411 4.99877 10.5914 5.37358 9.82438 5.67633C9.33075 5.87116 8.91274 6.03614 8.59472 6.03614C8.23784 6.03614 7.80257 5.86234 7.31387 5.66719C6.6735 5.4115 5.94138 5.11916 5.17364 5.13319C3.41387 5.15793 1.77716 6.15983 0.878819 7.75545C-0.967091 10.9467 0.398882 15.6717 2.18326 18.2693C3.05699 19.5556 4.10301 20.9657 5.48129 20.9163C6.08765 20.8933 6.52383 20.7072 6.97524 20.5147C7.49492 20.293 8.0348 20.0628 8.87776 20.0628C9.69151 20.0628 10.2078 20.287 10.7033 20.5023C11.1746 20.707 11.6271 20.9036 12.2989 20.8915C13.7264 20.8668 14.6247 19.6051 15.4984 18.3187C16.4413 16.9381 16.8557 15.5906 16.9186 15.3861C16.9222 15.3745 16.9246 15.3665 16.9259 15.3625C16.9244 15.361 16.9128 15.3556 16.8922 15.3462C16.577 15.2011 14.1679 14.0926 14.1448 11.1199C14.1216 8.62473 16.0556 7.36054 16.3601 7.16153C16.3786 7.14944 16.3911 7.14125 16.3968 7.137C15.1662 5.30636 13.2464 5.10845 12.5819 5.05898ZM41.4153 20.9039C43.2858 20.9039 45.0209 19.9515 45.8085 18.4424H45.8701V20.7555H48.6266V11.157C48.6266 8.37393 46.4115 6.5804 43.0027 6.5804C39.8401 6.5804 37.5019 8.39866 37.4158 10.8972H40.0985C40.32 9.70979 41.4153 8.93054 42.9166 8.93054C44.7379 8.93054 45.7593 9.78401 45.7593 11.3549V12.4186L42.0429 12.6413C38.5849 12.8516 36.7143 14.274 36.7143 16.7479C36.7143 19.2464 38.6464 20.9039 41.4153 20.9039ZM42.215 18.6156C40.6275 18.6156 39.6184 17.8487 39.6184 16.6736C39.6184 15.4615 40.5906 14.7564 42.4488 14.6451L45.7591 14.4348V15.5233C45.7591 17.3292 44.2332 18.6156 42.215 18.6156ZM57.7699 21.51C56.5762 24.8868 55.2103 26 52.306 26C52.0845 26 51.3461 25.9753 51.1739 25.9258V23.6127C51.3585 23.6375 51.8138 23.6622 52.0476 23.6622C53.3643 23.6622 54.1027 23.1056 54.558 21.6584L54.8288 20.8049L49.7833 6.76594H52.8967L56.4039 18.1579H56.4655L59.9727 6.76594H63L57.7699 21.51ZM25.4416 3.99524H28.875C31.4592 3.99524 32.936 5.38059 32.936 7.81731C32.936 10.254 31.4592 11.6518 28.8627 11.6518H25.4416V3.99524Z" fill="currentColor"/>\n </svg>\n </div>\n </div>\n </label>\n <div class="ff-payment-method-content">\n <ul class="ff-payment-features">\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span>Protected by Apple Pay’s unique Device Account Numbe</span>\n </li>\n </ul>\n <div class="ff-apple-pay-button-container ff-payment-container" id="applePayButton"></div>\n <div class="loader-container payment-button-loader">\n <div class="loader"></div>\n </div>\n <div class="payment-errors-container"></div>\n <p class="ff-security-message">\n Your payment information is secure with Apple Pay encryption\n </p>\n </div>\n </div>\n\n \x3c!-- Google Pay Section --\x3e\n <div class="ff-payment-method-card ff-payment-method-google-pay">\n <label class="ff-payment-method-label">\n <input type="radio" name="payment-method" value="google-pay" class="ff-payment-method-radio" checked="checked">\n <div class="ff-payment-method-header">\n <div class="ff-payment-logo ff-google-pay-logo">\n <svg class="payment-method-icon" height="26" viewBox="0 0 59 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M27.3601 11.6862V18.4674H25.208V1.72177H30.9132C32.3591 1.72177 33.592 2.20374 34.6008 3.16768C35.632 4.13162 36.1476 5.30852 36.1476 6.69838C36.1476 8.12187 35.632 9.29877 34.6008 10.2515C33.6032 11.2042 32.3703 11.675 30.9132 11.675H27.3601V11.6862ZM27.3601 3.78415V9.62382H30.958C31.8099 9.62382 32.5272 9.3324 33.0876 8.76076C33.6593 8.18912 33.9507 7.49419 33.9507 6.70959C33.9507 5.9362 33.6593 5.25248 33.0876 4.68084C32.5272 4.08678 31.8211 3.79536 30.958 3.79536H27.3601V3.78415Z" fill="currentColor"/>\n <path d="M41.7742 6.63107C43.3658 6.63107 44.6212 7.057 45.5403 7.90885C46.4594 8.7607 46.9189 9.9264 46.9189 11.4059V18.4673H44.8677V16.8757H44.7781C43.8926 18.1871 42.7045 18.8372 41.225 18.8372C39.9584 18.8372 38.9048 18.4673 38.0529 17.7164C37.2011 16.9654 36.7751 16.0351 36.7751 14.9142C36.7751 13.7261 37.2235 12.7846 38.1202 12.0896C39.0169 11.3835 40.2162 11.036 41.7069 11.036C42.9847 11.036 44.0383 11.2714 44.8565 11.7422V11.249C44.8565 10.498 44.5651 9.87035 43.9711 9.34355C43.377 8.81674 42.6821 8.55895 41.8863 8.55895C40.6869 8.55895 39.7342 9.06333 39.0393 10.0833L37.145 8.8952C38.1874 7.38205 39.7342 6.63107 41.7742 6.63107ZM38.9944 14.9478C38.9944 15.5083 39.2298 15.979 39.7118 16.3489C40.1826 16.7188 40.743 16.9093 41.3819 16.9093C42.2898 16.9093 43.0968 16.5731 43.8029 15.9006C44.5091 15.228 44.8677 14.4435 44.8677 13.5356C44.1952 13.0088 43.2649 12.7397 42.0656 12.7397C41.1913 12.7397 40.4628 12.9527 39.8799 13.3674C39.2859 13.8046 38.9944 14.3314 38.9944 14.9478Z" fill="currentColor"/>\n <path d="M58.6207 7.00095L51.4472 23.5H49.2279L51.8955 17.7276L47.1655 7.00095H49.5081L52.9155 15.228H52.9604L56.2781 7.00095H58.6207Z" fill="currentColor"/>\n <path d="M18.8001 10.3187C18.8001 9.61709 18.7373 8.94569 18.6208 8.30008H9.6001V11.9989L14.7953 12C14.5846 13.2307 13.9064 14.2799 12.8674 14.9793V17.379H15.9598C17.7655 15.7078 18.8001 13.2375 18.8001 10.3187Z" fill="#4285F4"/>\n <path d="M12.8685 14.9793C12.0076 15.5599 10.8991 15.8995 9.60228 15.8995C7.09717 15.8995 4.97202 14.2115 4.21096 11.9361H1.021V14.411C2.60141 17.5472 5.84965 19.6992 9.60228 19.6992C12.1959 19.6992 14.3749 18.8462 15.9609 17.3779L12.8685 14.9793Z" fill="#34A853"/>\n <path d="M3.91043 10.1002C3.91043 9.46129 4.01691 8.8437 4.21082 8.26309V5.78824H1.02086C0.367396 7.08507 -0.000244141 8.54891 -0.000244141 10.1002C-0.000244141 11.6514 0.368516 13.1153 1.02086 14.4121L4.21082 11.9373C4.01691 11.3567 3.91043 10.7391 3.91043 10.1002Z" fill="#FABB05"/>\n <path d="M9.60228 4.29974C11.0179 4.29974 12.2856 4.78731 13.2865 5.74004L16.027 3.00179C14.3626 1.45164 12.1926 0.500031 9.60228 0.500031C5.85077 0.500031 2.60141 2.65208 1.021 5.78824L4.21096 8.26309C4.97202 5.98775 7.09717 4.29974 9.60228 4.29974Z" fill="#E94235"/>\n </svg>\n </div>\n </div>\n </label>\n <div class="ff-payment-method-content">\n <ul class="ff-payment-features">\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span>Protected by Google Pay\'s unique Device Account Number</span>\n </li>\n </ul>\n <div class="ff-google-pay-button-container ff-payment-container" id="googlePayButton"></div>\n <div class="loader-container payment-button-loader">\n <div class="loader"></div>\n </div>\n <div class="payment-errors-container"></div>\n <p class="ff-security-message">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n \x3c!-- PayPal Section --\x3e\n <div class="ff-payment-method-card ff-payment-method-paypal">\n <label class="ff-payment-method-label">\n <input type="radio" name="payment-method" value="paypal" class="ff-payment-method-radio">\n <div class="ff-payment-method-header">\n <div class="ff-payment-logo ff-paypal-logo">\n <img class="payment-method-icon" style="max-height: 22px" src="https://assets.fnlfx.com/common/checkout/paypal.webp" alt="PayPal logo">\n </div>\n </div>\n </label>\n <div class="ff-payment-method-content">\n <ul class="ff-payment-features">\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span> Fast, convenient payment option </span>\n </li>\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span>\n Keeps your financial info safe with end-to-end encryption\n </span>\n </li>\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span> Backed by PayPal’s industry-leading fraud protection </span>\n </li>\n </ul>\n <div class="ff-paypal-button-container ff-payment-container" id="paypalButton"></div>\n <div class="loader-container payment-button-loader">\n <div class="loader"></div>\n </div>\n <div class="payment-errors-container"></div>\n <p class="ff-security-message">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n\n \x3c!-- Card Payments Section --\x3e\n <div class="ff-payment-method-card ff-payment-method-payment-card">\n <label class="ff-payment-method-label">\n <input type="radio" name="payment-method" value="card" class="ff-payment-method-radio">\n <div class="ff-payment-method-header">\n <div class="ff-card-logos">\n <img class="payment-method-icon" style="max-height: 30px" src="https://assets.fnlfx.com/common/checkout/cards.webp" alt="visa, mastercard">\n </div>\n </div>\n </label>\n <div class="ff-payment-method-content">\n <div class="ff-card-form-container ff-payment-container" id="cardForm">\n <div class="loader-container">\n <div class="loader"></div>\n </div>\n <div class="payment-errors-container"></div>\n <button class="ff-card-form-submit-button" id="submitButton">\n Continue\n </button>\n <p class="ff-security-message">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n </div>\n <div id="success-screen" style="display: none">\n <div class="success">\n <img alt="Loading" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1IDAuMTExMzI4QzIwLjA3NzQgMC4xMTEzMjggMTUuMjY1NCAxLjU3MTA0IDExLjE3MjUgNC4zMDU4NkM3LjA3OTUyIDcuMDQwNjkgMy44ODk0NSAxMC45Mjc4IDIuMDA1NjYgMTUuNDc1N0MwLjEyMTg4MyAyMC4wMjM1IC0wLjM3MSAyNS4wMjc4IDAuNTg5MzQzIDI5Ljg1NThDMS41NDk2OSAzNC42ODM4IDMuOTIwMTIgMzkuMTE4NSA3LjQwMDkgNDIuNTk5M0MxMC44ODE3IDQ2LjA4MDEgMTUuMzE2NCA0OC40NTA1IDIwLjE0NDQgNDkuNDEwOUMyNC45NzI0IDUwLjM3MTIgMjkuOTc2NyA0OS44NzgzIDM0LjUyNDYgNDcuOTk0NkMzOS4wNzI0IDQ2LjExMDggNDIuOTU5NSA0Mi45MjA3IDQ1LjY5NDQgMzguODI3N0M0OC40MjkyIDM0LjczNDggNDkuODg4OSAyOS45MjI4IDQ5Ljg4ODkgMjUuMDAwMkM0OS44ODg5IDE4LjM5OTMgNDcuMjY2NyAxMi4wNjg3IDQyLjU5OTEgNy40MDExMkMzNy45MzE1IDIuNzMzNTQgMzEuNjAwOSAwLjExMTMyOCAyNSAwLjExMTMyOFpNNDEuMjU1NiAxNi42NDY5TDIwLjgxNTYgMzcuMDcxM0w4Ljc0NDQ0IDI1LjAwMDJDOC4zMzE4OCAyNC41ODc3IDguMTAwMTEgMjQuMDI4MSA4LjEwMDExIDIzLjQ0NDdDOC4xMDAxMSAyMi44NjEyIDguMzMxODggMjIuMzAxNyA4Ljc0NDQ0IDIxLjg4OTFDOS4xNTcgMjEuNDc2NSA5LjcxNjU1IDIxLjI0NDggMTAuMyAyMS4yNDQ4QzEwLjg4MzQgMjEuMjQ0OCAxMS40NDMgMjEuNDc2NSAxMS44NTU2IDIxLjg4OTFMMjAuODQ2NyAzMC44ODAyTDM4LjE3NTYgMTMuNTY2OUMzOC4zNzk4IDEzLjM2MjYgMzguNjIyMyAxMy4yMDA2IDM4Ljg4OTIgMTMuMDlDMzkuMTU2MiAxMi45Nzk1IDM5LjQ0MjIgMTIuOTIyNiAzOS43MzExIDEyLjkyMjZDNDAuMDIgMTIuOTIyNiA0MC4zMDYxIDEyLjk3OTUgNDAuNTczIDEzLjA5QzQwLjgzOTkgMTMuMjAwNiA0MS4wODI0IDEzLjM2MjYgNDEuMjg2NyAxMy41NjY5QzQxLjQ5MDkgMTMuNzcxMiA0MS42NTMgMTQuMDEzNyA0MS43NjM1IDE0LjI4MDZDNDEuODc0MSAxNC41NDc1IDQxLjkzMSAxNC44MzM1IDQxLjkzMSAxNS4xMjI0QzQxLjkzMSAxNS40MTEzIDQxLjg3NDEgMTUuNjk3NCA0MS43NjM1IDE1Ljk2NDNDNDEuNjUzIDE2LjIzMTIgNDEuNDkwOSAxNi40NzM3IDQxLjI4NjcgMTYuNjc4TDQxLjI1NTYgMTYuNjQ2OVoiIGZpbGw9IiM4RURGQzIiLz4KPC9zdmc+Cg==">\n <div>Payment completed successfully</div>\n </div>\n </div>\n</div>\n'),this.cardInstance=new A(document.querySelector("#cardForm")),this.cardInstance.init(),this.initAccordion(),this.wireCardInputs()}renderCardForm(){}getCardInputSelectors(){return{...this.cardInstance.getCardInputSelectors(),button:"#submitButton"}}getCardInputElements(){return{...this.cardInstance.getCardInputElements(),button:this.cardInputElements.button}}getPaymentButtonElements(){return{paypal:this.containerEl.querySelector("#paypalButton"),googlePay:this.containerEl.querySelector("#googlePayButton"),applePay:this.containerEl.querySelector("#applePayButton")}}getCheckoutOptions(){return{...this.cardInstance.getCheckoutOptions(),cardElements:this.getCardInputElements(),paymentButtonElements:this.getPaymentButtonElements(),applePay:{buttonStyle:"black"},paypal:{buttonColor:"gold",buttonShape:"pill",buttonLabel:"pay",buttonSize:"large",buttonHeight:54},googlePay:{buttonColor:"black",buttonSizeMode:"fill",buttonType:"pay"}}}}var N=Object.freeze({__proto__:null,default:async(e,t)=>{const n=new T(e,t);return await n.init(),n}});e.APIError=o,e.Billing=D,e.CHECKOUT_STATES={INITIALIZING:"initializing",READY:"ready",PROCESSING:"processing",ACTION_REQUIRED:"action_required",UPDATING:"updating",COMPLETED:"completed",ERROR:"error",DESTROYED:"destroyed"},e.CheckoutError=a,e.ConfigurationError=class extends n{constructor(e){super(e,y.CONFIGURATION_ERROR),this.name="ConfigurationError"}},e.DEFAULTS=h,e.ERROR_CODES=y,e.EVENTS=u,e.FunnefoxSDKError=n,e.NetworkError=s,e.PrimerError=i,e.SDK_VERSION="0.5.0-beta.0",e.ValidationError=r,e.configure=b,e.createCheckout=L,e.createClientSession=x,e.default=D,Object.defineProperty(e,"__esModule",{value:!0})});
1
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).FunnelfoxSDK={})}(this,function(e){"use strict";class t{constructor(){this._events=new Map}on(e,t){if("function"!=typeof t)throw new Error("Event handler must be a function");return this._events.has(e)||this._events.set(e,[]),this._events.get(e).push(t),this}once(e,t){if("function"!=typeof t)throw new Error("Event handler must be a function");const n=(...r)=>{this.off(e,n),t.apply(this,r)};return this.on(e,n)}off(e,t=null){if(!this._events.has(e))return this;if(null===t)return this._events.delete(e),this;const n=this._events.get(e),r=n.indexOf(t);return-1!==r&&(n.splice(r,1),0===n.length&&this._events.delete(e)),this}emit(e,...t){if(!this._events.has(e))return!1;const n=this._events.get(e).slice();for(const r of n)try{r.apply(this,t)}catch(t){console.warn(`Error in event handler for "${String(e)}":`,t)}return!0}listenerCount(e){return this._events.has(e)?this._events.get(e).length:0}eventNames(){return Array.from(this._events.keys())}removeAllListeners(){return this._events.clear(),this}listeners(e){return this._events.has(e)?this._events.get(e).slice():[]}}class n extends Error{constructor(e,t=y.SDK_ERROR,r=null){super(e),this.name="FunnefoxSDKError",this.code=t,this.details=r,Error.captureStackTrace&&Error.captureStackTrace(this,n)}}class r extends n{constructor(e,t,n=null){super(`Invalid ${e}: ${t}`,y.VALIDATION_ERROR),this.name="ValidationError",this.field=e,this.value=n}}class o extends n{constructor(e,t=null,n={}){super(e,n.errorCode||y.API_ERROR),this.name="APIError",this.statusCode=t,this.errorCode=n.errorCode||null,this.errorType=n.errorType||null,this.requestId=n.requestId||null,this.response=n.response||null}}class i extends n{constructor(e,t=null){super(e,y.PRIMER_ERROR),this.name="PrimerError",this.primerError=t}}class a extends n{constructor(e,t=null){super(e,y.CHECKOUT_ERROR),this.name="CheckoutError",this.phase=t}}class s extends n{constructor(e,t=null){super(e,y.NETWORK_ERROR),this.name="NetworkError",this.originalError=t}}function c(...e){const t={};for(const n of e)if(n&&"object"==typeof n)for(const e in n)Object.prototype.hasOwnProperty.call(n,e)&&("object"!=typeof n[e]||Array.isArray(n[e])||null===n[e]?t[e]=n[e]:t[e]=c(t[e]||{},n[e]));return t}function d(e){return new Promise(t=>setTimeout(t,e))}var l;e.PaymentMethod=void 0,(l=e.PaymentMethod||(e.PaymentMethod={})).GOOGLE_PAY="GOOGLE_PAY",l.APPLE_PAY="APPLE_PAY",l.PAYPAL="PAYPAL",l.PAYMENT_CARD="PAYMENT_CARD";const h={BASE_URL:"https://billing.funnelfox.com",REGION:"default",SANDBOX:!1,REQUEST_TIMEOUT:3e4,RETRY_ATTEMPTS:3,RETRY_BASE_DELAY:1e3},u={SUCCESS:"success",ERROR:"error",STATUS_CHANGE:"status-change",DESTROY:"destroy",INPUT_ERROR:"input-error",LOADER_CHANGE:"loader-change",METHOD_RENDER:"method-render",METHOD_RENDER_ERROR:"method-render-error",START_PURCHASE:"start-purchase",PURCHASE_FAILURE:"purchase-failure",PURCHASE_COMPLETED:"purchase-completed",PURCHASE_CANCELLED:"purchase-cancelled"},p="/v1/checkout/create_client_session",C="/v1/checkout/update_client_session",m="/v1/checkout/create_payment",f="/v1/checkout/resume_payment",y={SDK_ERROR:"SDK_ERROR",VALIDATION_ERROR:"VALIDATION_ERROR",API_ERROR:"API_ERROR",PRIMER_ERROR:"PRIMER_ERROR",CHECKOUT_ERROR:"CHECKOUT_ERROR",CONFIGURATION_ERROR:"CONFIGURATION_ERROR",NETWORK_ERROR:"NETWORK_ERROR"},g=[...[e.PaymentMethod.GOOGLE_PAY,e.PaymentMethod.APPLE_PAY,e.PaymentMethod.PAYPAL],...[e.PaymentMethod.PAYMENT_CARD]],E={input:{error:{borderColor:"rgb(227, 47, 65)"},base:{borderWidth:"1px",borderStyle:"solid",borderColor:"rgb(0 0 0 / 10%)",height:"36px",paddingHorizontal:10,borderRadius:"6px"}}};E.input.base.paddingHorizontal,E.input.base.paddingHorizontal;class M{constructor(){this.isInitialized=!1,this.destroyCallbacks=[],this.headless=null,this.availableMethods=[]}isPrimerAvailable(){return"undefined"!=typeof window&&window.Primer&&"function"==typeof window.Primer?.createHeadless}ensurePrimerAvailable(){if(!this.isPrimerAvailable())throw new i("Primer SDK not found. Please include the Primer SDK script before initializing FunnefoxSDK.")}async createHeadlessCheckout(e,t){if(this.headless)return this.headless;this.ensurePrimerAvailable();const n=c({paymentHandling:"MANUAL",apiVersion:"2.4"},t);try{const t=await window.Primer.createHeadless(e,n);await t.start(),this.headless=t}catch(e){throw new i("Failed to create Primer headless checkout",e)}}initializeCardElements(e){const{cardNumber:t,expiryDate:n,cvv:r,cardholderName:o,button:i}=e;return{cardNumber:document.querySelector(t),expiryDate:document.querySelector(n),cvv:document.querySelector(r),cardholderName:document.querySelector(o),button:document.querySelector(i)}}disableButtons(e){if(this.paymentMethodsInterfaces)for(const t in this.paymentMethodsInterfaces)this.paymentMethodsInterfaces[t].setDisabled(e)}async renderButton(e,{container:t}){const n=this.validateContainer(t);let r;if(this.ensurePrimerAvailable(),!this.headless)throw new i("Headless checkout not found");try{const t=await this.headless.createPaymentMethodManager(e);if(!t)throw new Error("Payment method manager is not available");r=t.createButton(),await r.render(n,{}),this.destroyCallbacks.push(()=>r.clean())}catch(e){throw new i("Failed to initialize Primer checkout",e)}}async initMethod(t,n,r){if(t===e.PaymentMethod.PAYMENT_CARD){if(!r.cardElements||!r.onSubmit||!r.onInputChange)throw new i("Card elements, onSubmit, and onInputChange are required for PAYMENT_CARD method");return this.renderCardCheckoutWithElements(r.cardElements,{onSubmit:r.onSubmit,onInputChange:r.onInputChange,onMethodRenderError:r.onMethodRenderError,onMethodRender:r.onMethodRender})}if(this.ensurePrimerAvailable(),!this.headless)throw new i("Headless checkout not found");try{const e=await this.headless.createPaymentMethodManager(t);if(!e)throw new Error("Payment method manager is not available");const o=e.createButton();await o.render(n,{}),this.destroyCallbacks.push(()=>o.clean()),r.onMethodRender(t)}catch(e){throw r.onMethodRenderError(t),new i("Failed to initialize Primer checkout",e)}}async renderCardCheckoutWithElements(t,{onSubmit:n,onInputChange:r,onMethodRenderError:o,onMethodRender:a}){try{const o=await this.headless.createPaymentMethodManager("PAYMENT_CARD");if(!o)throw new Error("Payment method manager is not available");const{cardNumberInput:s,expiryInput:c,cvvInput:d}=o.createHostedInputs(),l=async()=>{if(!o)return!1;const{valid:e,validationErrors:t}=await o.validate(),n=t.find(e=>"cardholderName"===e.name);return h("cardholderName",n?.message||null),e},h=(e,t)=>{r(e,t)},u=e=>t=>{const n=t;n.submitted&&h(e,n.error)},p=async e=>{o.setCardholderName(e.target.value),h("cardholderName",null)};t.cardholderName?.addEventListener("input",p),s.addEventListener("change",u("cardNumber")),c.addEventListener("change",u("expiryDate")),d.addEventListener("change",u("cvv"));const C=async()=>{if(await l())try{n(!0),await o.submit()}catch(e){throw new i("Failed to submit payment",e)}finally{n(!1)}};t.button?.addEventListener("click",C),await Promise.all([s.render(t.cardNumber,{placeholder:"1234 1234 1234 1234",ariaLabel:"Card number",style:E}),c.render(t.expiryDate,{placeholder:"MM/YY",ariaLabel:"Expiry date",style:E}),d.render(t.cvv,{placeholder:"123",ariaLabel:"CVV",style:E})]);const m=()=>{o.removeHostedInputs(),t.cardholderName.removeEventListener("change",p),t.button.removeEventListener("click",C)};return this.destroyCallbacks.push(m),a(e.PaymentMethod.PAYMENT_CARD),{setDisabled:e=>{s.setDisabled(e),c.setDisabled(e),d.setDisabled(e),t.button.disabled=e},submit:()=>C(),destroy:()=>{this.destroyCallbacks=this.destroyCallbacks.filter(e=>e!==m),m()}}}catch(e){throw new i("Failed to initialize Primer checkout",e)}}async initializeHeadlessCheckout(t,n){await this.createHeadlessCheckout(t,{...n,onTokenizeSuccess:this.wrapTokenizeHandler(n.onTokenizeSuccess),onResumeSuccess:this.wrapResumeHandler(n.onResumeSuccess),onAvailablePaymentMethodsLoad:t=>{let n=!1;if(this.availableMethods=g.filter(r=>t.some(t=>(t.type===e.PaymentMethod.APPLE_PAY&&(n=!0),t.type===r))),n&&(this.availableMethods=this.availableMethods.filter(t=>t!==e.PaymentMethod.GOOGLE_PAY)),0===this.availableMethods.length)throw new i("No allowed payment methods found")}})}async renderCheckout(t,n,r){const{cardElements:o,paymentButtonElements:i,container:a,onSubmit:s,onInputChange:c,onMethodRender:d,onMethodRenderError:l}=r;await this.initializeHeadlessCheckout(t,n);for(const t of this.availableMethods)if(t===e.PaymentMethod.PAYMENT_CARD)await this.initMethod(t,a,{cardElements:o,onSubmit:s,onInputChange:c,onMethodRender:d,onMethodRenderError:l});else{const n={[e.PaymentMethod.PAYPAL]:i.paypal,[e.PaymentMethod.GOOGLE_PAY]:i.googlePay,[e.PaymentMethod.APPLE_PAY]:i.applePay}[t];await this.initMethod(t,n,{onMethodRender:d,onMethodRenderError:l})}this.isInitialized=!0}wrapTokenizeHandler(e){return async(t,n)=>{try{await e(t,n)}catch(e){console.error("Error in tokenize handler:",e),n.handleFailure("Payment processing failed. Please try again.")}}}wrapResumeHandler(e){return async(t,n)=>{try{await e(t,n)}catch(e){console.error("Error in resume handler:",e),n.handleFailure("Payment processing failed. Please try again.")}}}async destroy(){if(this.destroyCallbacks)try{Promise.all(this.destroyCallbacks.map(e=>e()))}catch(e){console.warn("Error destroying Primer checkout:",e)}this.destroyCallbacks=[],this.isInitialized=!1}createHandlers(e){return{handleSuccess:()=>{e.onSuccess&&e.onSuccess()},handleFailure:t=>{e.onError&&e.onError(new Error(t))},continueWithNewClientToken:t=>{e.onActionRequired&&e.onActionRequired(t)}}}getCurrentCheckout(){return this.destroyCallbacks}isActive(){return this.isInitialized&&this.destroyCallbacks.length>0}validateContainer(e){const t=document.querySelector(e);if(!t)throw new i(`Checkout container not found: ${e}`);return"none"===window.getComputedStyle(t).display&&console.warn("Checkout container is hidden, this may cause display issues"),t}}class w{constructor(e){this.baseUrl=e.baseUrl.replace(/\/$/,""),this.orgId=e.orgId,this.timeout=e.timeout||3e4,this.retryAttempts=e.retryAttempts||3}async request(e,t={}){const n=`${this.baseUrl}/${this.orgId}${e}`,r={method:"GET",headers:{"Content-Type":"application/json",...t.headers||{}},...t};try{return await async function(e,t=3,n=1e3){let r;for(let o=1;o<=t;o++)try{return await e()}catch(e){if(r=e,o===t)throw r;const i=n*Math.pow(2,o-1);await d(i)}throw r}(async()=>await function(e,t,n="Operation timed out"){const r=new Promise((e,r)=>{setTimeout(()=>r(new Error(n)),t)});return Promise.race([e,r])}(this._makeRequest(n,r),this.timeout,"Request timed out"),this.retryAttempts)}catch(e){if(e instanceof Error&&"APIError"===e.name)throw e;throw new s("Network request failed",e)}}async _makeRequest(e,t){let n,r;try{n=await fetch(e,t)}catch(e){if(e instanceof Error&&"NetworkError"===e.name)throw e;throw new s("Network request failed",e)}try{r=await n.json()}catch{throw new o("Invalid JSON response",n.status,{})}if(!n.ok){const e=r,t=e.error?.[0]?.msg||"Failed to create payment";throw new o(t,n.status,{response:r})}return r}async createClientSession(e){const t={region:e.region||"default",integration_type:"primer",pp_ident:e.priceId,external_id:e.externalId,email_address:e.email,client_metadata:e.clientMetadata||{}};return void 0!==e.countryCode&&(t.country_code=e.countryCode),await this.request(p,{method:"POST",body:JSON.stringify(t)})}async updateClientSession(e){const t={order_id:e.orderId,client_token:e.clientToken,pp_ident:e.priceId};return await this.request(C,{method:"POST",body:JSON.stringify(t)})}async createPayment(e){const t={order_id:e.orderId,payment_method_token:e.paymentMethodToken};return await this.request(m,{method:"POST",body:JSON.stringify(t)})}async resumePayment(e){const t={order_id:e.orderId,resume_token:e.resumeToken};return await this.request(f,{method:"POST",body:JSON.stringify(t)})}processSessionResponse(e){if("error"===e.status){const t=e.error?.[0];throw new o(t?.msg||"Session creation failed",null,{errorCode:t?.code,errorType:t?.type,requestId:e.req_id,response:e})}const t=e.data;return{type:"session_created",orderId:t.order_id,clientToken:t.client_token}}processPaymentResponse(e){if("error"===e.status){const t=e.error?.[0];throw new o(t?.msg||"Payment request failed",null,{errorCode:t?.code,errorType:t?.type,response:e})}const t=e.data;if(t.action_required_token)return{type:"action_required",orderId:t.order_id,clientToken:t.action_required_token};if(t.checkout_status)switch(t.checkout_status){case"succeeded":return{type:"success",orderId:t.order_id,status:"succeeded"};case"failed":throw new o(t.failed_message_for_user||"Payment failed",null,{response:e});case"cancelled":throw new o("Payment was cancelled by user",null,{response:e});case"processing":return{type:"processing",orderId:t.order_id,status:"processing"};default:throw new o(`Unhandled checkout status: ${t.checkout_status}`,null,{response:e})}throw new o("Invalid payment response format",null,{response:e})}async oneClick(e){return await this.request(`/billing/${this.orgId}/v1/checkout/one_click`,{method:"POST",body:JSON.stringify(e)})}}"undefined"!=typeof document&&(document.head.appendChild(document.createElement("style")).textContent=".ff-sdk-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.ff-sdk-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 }");const S='<div class="ff-sdk-loader-container">\n <div class="ff-sdk-loader"></div>\n</div>\n',v={loaderContainer:".ff-sdk-loader-container"};class I extends t{constructor(t){super(),this.counter=0,this.paymentMethodOrder=[e.PaymentMethod.APPLE_PAY,e.PaymentMethod.GOOGLE_PAY,e.PaymentMethod.PAYPAL,e.PaymentMethod.PAYMENT_CARD],this.handleInputChange=(e,t)=>{this.emit(u.INPUT_ERROR,{name:e,error:t})},this.handleMethodRender=e=>{this.emit(u.METHOD_RENDER,e)},this.handleMethodRenderError=e=>{this.emit(u.METHOD_RENDER_ERROR,e)},this.handleSubmit=e=>{this.onLoaderChangeWithRace(e),this._setState(e?"processing":"ready")},this.handleTokenizeSuccess=async(e,t)=>{try{this.onLoaderChangeWithRace(!0),this._setState("processing");const n=await this.apiClient.createPayment({orderId:this.orderId,paymentMethodToken:e.token}),r=this.apiClient.processPaymentResponse(n);await this._processPaymentResult(r,t)}catch(e){this._setState("error"),this.emit(u.PURCHASE_FAILURE,new Error(e.message||"Payment processing failed")),t.handleFailure(e.message||"Payment processing failed")}finally{this.onLoaderChangeWithRace(!1),this._setState("ready")}},this.handleResumeSuccess=async(e,t)=>{try{this.onLoaderChangeWithRace(!0),this._setState("processing");const n=await this.apiClient.resumePayment({orderId:this.orderId,resumeToken:e.resumeToken}),r=this.apiClient.processPaymentResponse(n);await this._processPaymentResult(r,t)}catch(e){this._setState("error"),this.emit(u.PURCHASE_FAILURE,new Error(e.message||"Payment processing failed")),t.handleFailure(e.message||"Payment processing failed")}finally{this.emit(u.PURCHASE_COMPLETED),this.onLoaderChangeWithRace(!1),this._setState("ready")}},this.onLoaderChangeWithRace=e=>{const t=!!(e?++this.counter:--this.counter);this.emit(u.LOADER_CHANGE,t)},this.id=function(e=""){return`${e}${Date.now().toString(36)}_${Math.random().toString(36).substr(2,5)}`}("checkout_"),this.orgId=t.orgId,this.baseUrl=t.baseUrl,this.region=t.region,this.checkoutConfig={...t.checkoutConfig},this.callbacks={onSuccess:this.checkoutConfig.onSuccess,onError:this.checkoutConfig.onError,onStatusChange:this.checkoutConfig.onStatusChange,onDestroy:this.checkoutConfig.onDestroy},delete this.checkoutConfig?.onSuccess,delete this.checkoutConfig?.onError,delete this.checkoutConfig?.onStatusChange,delete this.checkoutConfig?.onDestroy,this.state="initializing",this.orderId=null,this.clientToken=null,this.primerWrapper=new M,this.isDestroyed=!1,this._setupCallbackBridges()}_setupCallbackBridges(){this.callbacks.onSuccess&&this.on(u.SUCCESS,this.callbacks.onSuccess),this.callbacks.onError&&this.on(u.ERROR,this.callbacks.onError),this.callbacks.onStatusChange&&this.on(u.STATUS_CHANGE,this.callbacks.onStatusChange),this.callbacks.onDestroy&&this.on(u.DESTROY,this.callbacks.onDestroy)}removeAllListeners(){return super.removeAllListeners()}async initialize(){try{return this.showInitializingLoader(),this._setState("initializing"),await this.createSession(),await this._initializePrimerCheckout(),this._setState("ready"),this.checkoutConfig?.onInitialized?.(),this}catch(e){throw this._setState("error"),this.emit(u.ERROR,e),e}finally{this.hideInitializingLoader()}}async createSession(){this.apiClient=new w({baseUrl:this.baseUrl||h.BASE_URL,orgId:this.orgId,timeout:h.REQUEST_TIMEOUT,retryAttempts:h.RETRY_ATTEMPTS});const e=await this.apiClient.createClientSession({priceId:this.checkoutConfig.priceId,externalId:this.checkoutConfig.customer.externalId,email:this.checkoutConfig.customer.email,region:this.region||h.REGION,clientMetadata:this.checkoutConfig.clientMetadata,countryCode:this.checkoutConfig.customer.countryCode}),t=this.apiClient.processSessionResponse(e);this.orderId=t.orderId,this.clientToken=t.clientToken}convertCardSelectorsToElements(e,t){const n=t.querySelector(e.cardNumber),r=t.querySelector(e.expiryDate),o=t.querySelector(e.cvv),i=t.querySelector(e.cardholderName),s=t.querySelector(e.button);if(!(n&&r&&o&&s))throw new a("Required card input elements not found in container");return{cardNumber:n,expiryDate:r,cvv:o,cardholderName:i,button:s}}convertPaymentButtonSelectorsToElements(e){const t=document.querySelector(e.paypal),n=document.querySelector(e.googlePay),r=document.querySelector(e.applePay);if(!t||!n||!r)throw new a("Required payment button elements not found in container");return{paypal:t,googlePay:n,applePay:r}}async _initializePrimerCheckout(){const e=this.getContainer();if(!e)throw new a(`Checkout container not found: ${this.checkoutConfig.container}`);let t,n,r;if(this.checkoutConfig.cardSelectors&&this.checkoutConfig.paymentButtonSelectors)t=this.convertCardSelectorsToElements(this.checkoutConfig.cardSelectors,e),n=this.convertPaymentButtonSelectorsToElements(this.checkoutConfig.paymentButtonSelectors),r=this.getCheckoutOptions({});else{this.checkoutConfig.paymentMethodOrder&&(this.paymentMethodOrder=this.checkoutConfig.paymentMethodOrder);const e=await this.getDefaultSkinCheckoutOptions();if(!e.cardElements||!e.paymentButtonElements)throw new a("Default skin must provide cardSelectors and paymentButtonSelectors");t=e.cardElements,n=e.paymentButtonElements,r=this.getCheckoutOptions(e)}this.checkoutConfig.paymentMethodOrder&&console.warn("paymentMethodOrder is using only for default skin and will be ignored if you are using custom checkout"),await this.primerWrapper.renderCheckout(this.clientToken,r,{container:e,cardElements:t,paymentButtonElements:n,onSubmit:this.handleSubmit,onInputChange:this.handleInputChange,onMethodRender:this.handleMethodRender})}async _processPaymentResult(e,t){switch(e.orderId&&(this.orderId=e.orderId),e.type){case"success":this._setState("completed"),this.emit(u.SUCCESS,{orderId:e.orderId,status:e.status}),t.handleSuccess();break;case"action_required":this._setState("action_required"),this.clientToken=e.clientToken,t.continueWithNewClientToken(e.clientToken);break;case"processing":this._setState("processing"),setTimeout(()=>{t.handleFailure("Payment is still processing. Please check back later.")},3e4);break;default:throw new a(`Unknown payment result type: ${e.type}`)}}getCheckoutOptions(e){let t=!1;return{...this.checkoutConfig,...e,onTokenizeSuccess:this.handleTokenizeSuccess,onResumeSuccess:this.handleResumeSuccess,onResumeError:e=>{e.stack?.includes("PROCESSOR_3DS")&&"RESUME_ERROR"===e.code&&e.message?.includes("fetch resume key")||this.emit(u.PURCHASE_FAILURE,e)},onCheckoutFail:e=>{this.emit(u.PURCHASE_FAILURE,e)},onTokenizeError:e=>{this.emit(u.PURCHASE_FAILURE,e)},onTokenizeShouldStart:e=>(this.emit(u.ERROR,void 0),this.emit(u.START_PURCHASE,e.paymentMethodType),!0),onPaymentMethodAction:e=>{switch(e){case"PAYMENT_METHOD_SELECTED":this.emit(u.ERROR,void 0);break;case"PAYMENT_METHOD_UNSELECTED":t||this.emit(u.PURCHASE_CANCELLED),t=!1}}}}async updatePrice(e){if(this._ensureNotDestroyed(),function(e,t){var n;if(0===(n=e,n?.trim()||"").length)throw new r(t,"must be a non-empty string",e)}(e,"priceId"),"processing"===this.state)throw new a("Cannot update price while payment is processing");try{this._setState("updating"),await this.apiClient.updateClientSession({orderId:this.orderId,clientToken:this.clientToken,priceId:e}),this.checkoutConfig.priceId=e,this._setState("ready")}catch(e){throw this._setState("error"),this.emit(u.ERROR,e),e}}getStatus(){return{id:this.id,state:this.state,orderId:this.orderId,priceId:this.checkoutConfig.priceId,isDestroyed:this.isDestroyed}}async destroy(){if(!this.isDestroyed)try{await this.primerWrapper.destroy(),this._setState("destroyed"),this.orderId=null,this.clientToken=null,this.isDestroyed=!0,this.emit(u.DESTROY),this.removeAllListeners()}catch(e){console.warn("Error during checkout cleanup:",e)}}_setState(e){if(this.state!==e){const t=this.state;this.state=e,this.emit(u.STATUS_CHANGE,e,t)}}_ensureNotDestroyed(){if(this.isDestroyed)throw new a("Checkout instance has been destroyed")}getContainer(){return document.querySelector(this.checkoutConfig.container)}isInState(e){return this.state===e}isReady(){return"ready"===this.state&&!this.isDestroyed}isProcessing(){return["processing","action_required"].includes(this.state)}async getDefaultSkinCheckoutOptions(){const e=(await Promise.resolve().then(function(){return _})).default,t=await e(this.primerWrapper,this.checkoutConfig.container,this.paymentMethodOrder);return this.on(u.INPUT_ERROR,t.onInputError),this.on(u.STATUS_CHANGE,t.onStatusChange),this.on(u.ERROR,e=>t.onError(e)),this.on(u.LOADER_CHANGE,t.onLoaderChange),this.on(u.DESTROY,t.onDestroy),this.on(u.METHOD_RENDER,t.onMethodRender),this.on(u.SUCCESS,t.onSuccess),this.on(u.START_PURCHASE,t.onStartPurchase),this.on(u.PURCHASE_FAILURE,t.onPurchaseFailure),this.on(u.PURCHASE_COMPLETED,t.onPurchaseCompleted),t.getCheckoutOptions()}async getCardDefaultSkinCheckoutOptions(e){const t=new(0,(await Promise.resolve().then(function(){return x})).default)(e);return t.init(),this.on(u.INPUT_ERROR,t.onInputError),t.getCheckoutOptions()}showInitializingLoader(){(e=>{const t=document.querySelector(e);t&&(t.innerHTML=S)})(this.checkoutConfig.container)}hideInitializingLoader(){(()=>{const e=document.querySelector(v.loaderContainer);e&&e.remove()})()}}let k=null;function b(e){k=e}function R(e,t){const{orgId:n,apiConfig:r}=e||{},o=n||k?.orgId;if(!o)throw new Error(`orgId is required. Pass it to ${t}() or call configure() first.`);return{orgId:o,baseUrl:r?.baseUrl||k?.baseUrl||h.BASE_URL,region:r?.region||k?.region||h.REGION}}async function L(e){const{...t}=e;(new M).ensurePrimerAvailable();const n=R(e,"createCheckout"),r=new I({...n,checkoutConfig:{...t}});return await r.initialize(),r}async function A(e){const{priceId:t,externalId:n,email:r,clientMetadata:o,countryCode:i}=e,a=R(e,"createClientSession"),s=new w({baseUrl:a.baseUrl,orgId:a.orgId,timeout:h.REQUEST_TIMEOUT,retryAttempts:h.RETRY_ATTEMPTS}),c=await s.createClientSession({priceId:t,externalId:n,email:r,region:a.region,clientMetadata:o,countryCode:i});return s.processSessionResponse(c)}const P={configure:b,createCheckout:L,createClientSession:A,initMethod:async function(t,n,r){const o=new I({orgId:r.orgId,baseUrl:r.baseUrl,checkoutConfig:{priceId:r.priceId,customer:{externalId:r.externalId,email:r.email},container:"",clientMetadata:r.meta}});if(o._ensureNotDestroyed(),o.isReady()||await o.createSession(),o.on(u.METHOD_RENDER,r.onRenderSuccess),o.on(u.METHOD_RENDER_ERROR,r.onRenderError),o.on(u.LOADER_CHANGE,r.onLoaderChange),o.on(u.SUCCESS,r.onPaymentSuccess),o.on(u.PURCHASE_FAILURE,r.onPaymentFail),o.on(u.PURCHASE_CANCELLED,r.onPaymentCancel),o.on(u.ERROR,r.onErrorMessageChange),t===e.PaymentMethod.PAYMENT_CARD){const e=await o.getCardDefaultSkinCheckoutOptions(n),i=o.getCheckoutOptions({style:r.styles,...e});return await o.primerWrapper.initializeHeadlessCheckout(o.clientToken,i),o.primerWrapper.initMethod(t,n,{cardElements:e.cardElements,onSubmit:o.handleSubmit,onInputChange:o.handleInputChange,onMethodRender:o.handleMethodRender,onMethodRenderError:o.handleMethodRenderError})}return await o.primerWrapper.initializeHeadlessCheckout(o.clientToken,o.getCheckoutOptions({style:r.styles})),o.primerWrapper.initMethod(t,n,{onMethodRender:o.handleMethodRender,onMethodRenderError:o.handleMethodRenderError})}};"undefined"!=typeof window&&(window.Billing=P);"undefined"!=typeof document&&(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}\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/* 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: 0;\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\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/* hack for FFB-169 */\n.ff-google-pay-button-container button, .ff-apple-pay-button-container button {\n height: 54px !important;\n border-radius: 28px !important;\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");"undefined"!=typeof document&&(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-cardholder-input {\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 }\n .ff-card-form-cardholder-input.error {\n border-color: #e32f41;\n }\n \n .errorContainer {\n color: #d10000;\n font-size: 16px;\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 }");class D{constructor(e){if(this.onInputError=e=>{const{name:t,error:n}=e,r=this.getCardInputElements(),o={cardNumber:r.cardNumber.parentElement,expiryDate:r.expiryDate.parentElement,cvv:r.cvv.parentElement},i=o[t]?.querySelector(".errorContainer");i&&(i.textContent=n||"")},!e)throw new Error("Container element not found");this.containerEl=e,this.cardInputElements={cardNumber:document.createElement("div"),expiryDate:document.createElement("div"),cvv:document.createElement("div")}}wireCardInputs(){const e=this.containerEl.querySelector("#cardNumberInput"),t=this.containerEl.querySelector("#expiryInput"),n=this.containerEl.querySelector("#cvvInput");if(!e||!t||!n)throw new Error("One or more card input elements are missing in the default skin");this.cardInputElements={cardNumber:e,expiryDate:t,cvv:n}}async init(){this.containerEl.insertAdjacentHTML("afterbegin",'<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'),this.wireCardInputs()}renderCardForm(){}getCardInputSelectors(){return{cardNumber:"#cardNumberInput",expiryDate:"#expiryInput",cvv:"#cvvInput",cardholderName:"#cardHolderInput",button:"#submitButton"}}getCardInputElements(){return this.cardInputElements}getCheckoutOptions(){return{cardElements:this.getCardInputElements(),card:{cardholderName:{required:!1}}}}}var x=Object.freeze({__proto__:null,default:D});const T={[e.PaymentMethod.PAYMENT_CARD]:'\x3c!-- Card Payments Section --\x3e\n<div class="ff-payment-method-card ff-payment-method-payment-card">\n <label class="ff-payment-method-label">\n <input type="radio" name="payment-method" value="card" class="ff-payment-method-radio">\n <div class="ff-payment-method-header">\n <div class="ff-card-logos">\n <img class="payment-method-icon" style="max-height: 30px" src="https://assets.fnlfx.com/common/checkout/cards.webp" alt="visa, mastercard">\n </div>\n </div>\n </label>\n <div class="ff-payment-method-content">\n <div class="ff-card-form-container ff-payment-container" id="cardForm">\n <div class="loader-container">\n <div class="loader"></div>\n </div>\n <div class="payment-errors-container"></div>\n <button class="ff-card-form-submit-button" id="submitButton">\n Continue\n </button>\n <p class="ff-security-message">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n </div>\n</div>\n',[e.PaymentMethod.PAYPAL]:'<div class="ff-payment-method-card ff-payment-method-paypal">\n <label class="ff-payment-method-label">\n <input type="radio" name="payment-method" value="paypal" class="ff-payment-method-radio">\n <div class="ff-payment-method-header">\n <div class="ff-payment-logo ff-paypal-logo">\n <img class="payment-method-icon" style="max-height: 22px" src="https://assets.fnlfx.com/common/checkout/paypal.webp" alt="PayPal logo">\n </div>\n </div>\n </label>\n <div class="ff-payment-method-content">\n <ul class="ff-payment-features">\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span> Fast, convenient payment option </span>\n </li>\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span> Keeps your financial info safe with end-to-end encryption </span>\n </li>\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span> Backed by PayPal’s industry-leading fraud protection </span>\n </li>\n </ul>\n <div class="ff-paypal-button-container ff-payment-container" id="paypalButton"></div>\n <div class="loader-container payment-button-loader">\n <div class="loader"></div>\n </div>\n <div class="payment-errors-container"></div>\n <p class="ff-security-message">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n</div>\n',[e.PaymentMethod.GOOGLE_PAY]:'\x3c!-- Google Pay Section --\x3e\n<div class="ff-payment-method-card ff-payment-method-google-pay">\n <label class="ff-payment-method-label">\n <input type="radio" name="payment-method" value="google-pay" class="ff-payment-method-radio" checked="checked">\n <div class="ff-payment-method-header">\n <div class="ff-payment-logo ff-google-pay-logo">\n <svg class="payment-method-icon" height="26" viewBox="0 0 59 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M27.3601 11.6862V18.4674H25.208V1.72177H30.9132C32.3591 1.72177 33.592 2.20374 34.6008 3.16768C35.632 4.13162 36.1476 5.30852 36.1476 6.69838C36.1476 8.12187 35.632 9.29877 34.6008 10.2515C33.6032 11.2042 32.3703 11.675 30.9132 11.675H27.3601V11.6862ZM27.3601 3.78415V9.62382H30.958C31.8099 9.62382 32.5272 9.3324 33.0876 8.76076C33.6593 8.18912 33.9507 7.49419 33.9507 6.70959C33.9507 5.9362 33.6593 5.25248 33.0876 4.68084C32.5272 4.08678 31.8211 3.79536 30.958 3.79536H27.3601V3.78415Z" fill="currentColor"/>\n <path d="M41.7742 6.63107C43.3658 6.63107 44.6212 7.057 45.5403 7.90885C46.4594 8.7607 46.9189 9.9264 46.9189 11.4059V18.4673H44.8677V16.8757H44.7781C43.8926 18.1871 42.7045 18.8372 41.225 18.8372C39.9584 18.8372 38.9048 18.4673 38.0529 17.7164C37.2011 16.9654 36.7751 16.0351 36.7751 14.9142C36.7751 13.7261 37.2235 12.7846 38.1202 12.0896C39.0169 11.3835 40.2162 11.036 41.7069 11.036C42.9847 11.036 44.0383 11.2714 44.8565 11.7422V11.249C44.8565 10.498 44.5651 9.87035 43.9711 9.34355C43.377 8.81674 42.6821 8.55895 41.8863 8.55895C40.6869 8.55895 39.7342 9.06333 39.0393 10.0833L37.145 8.8952C38.1874 7.38205 39.7342 6.63107 41.7742 6.63107ZM38.9944 14.9478C38.9944 15.5083 39.2298 15.979 39.7118 16.3489C40.1826 16.7188 40.743 16.9093 41.3819 16.9093C42.2898 16.9093 43.0968 16.5731 43.8029 15.9006C44.5091 15.228 44.8677 14.4435 44.8677 13.5356C44.1952 13.0088 43.2649 12.7397 42.0656 12.7397C41.1913 12.7397 40.4628 12.9527 39.8799 13.3674C39.2859 13.8046 38.9944 14.3314 38.9944 14.9478Z" fill="currentColor"/>\n <path d="M58.6207 7.00095L51.4472 23.5H49.2279L51.8955 17.7276L47.1655 7.00095H49.5081L52.9155 15.228H52.9604L56.2781 7.00095H58.6207Z" fill="currentColor"/>\n <path d="M18.8001 10.3187C18.8001 9.61709 18.7373 8.94569 18.6208 8.30008H9.6001V11.9989L14.7953 12C14.5846 13.2307 13.9064 14.2799 12.8674 14.9793V17.379H15.9598C17.7655 15.7078 18.8001 13.2375 18.8001 10.3187Z" fill="#4285F4"/>\n <path d="M12.8685 14.9793C12.0076 15.5599 10.8991 15.8995 9.60228 15.8995C7.09717 15.8995 4.97202 14.2115 4.21096 11.9361H1.021V14.411C2.60141 17.5472 5.84965 19.6992 9.60228 19.6992C12.1959 19.6992 14.3749 18.8462 15.9609 17.3779L12.8685 14.9793Z" fill="#34A853"/>\n <path d="M3.91043 10.1002C3.91043 9.46129 4.01691 8.8437 4.21082 8.26309V5.78824H1.02086C0.367396 7.08507 -0.000244141 8.54891 -0.000244141 10.1002C-0.000244141 11.6514 0.368516 13.1153 1.02086 14.4121L4.21082 11.9373C4.01691 11.3567 3.91043 10.7391 3.91043 10.1002Z" fill="#FABB05"/>\n <path d="M9.60228 4.29974C11.0179 4.29974 12.2856 4.78731 13.2865 5.74004L16.027 3.00179C14.3626 1.45164 12.1926 0.500031 9.60228 0.500031C5.85077 0.500031 2.60141 2.65208 1.021 5.78824L4.21096 8.26309C4.97202 5.98775 7.09717 4.29974 9.60228 4.29974Z" fill="#E94235"/>\n </svg>\n </div>\n </div>\n </label>\n <div class="ff-payment-method-content">\n <ul class="ff-payment-features">\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span>Protected by Google Pay\'s unique Device Account Number</span>\n </li>\n </ul>\n <div class="ff-google-pay-button-container ff-payment-container" id="googlePayButton"></div>\n <div class="loader-container payment-button-loader">\n <div class="loader"></div>\n </div>\n <div class="payment-errors-container"></div>\n <p class="ff-security-message">\n Your payment information is secure with SSL/TLS encryption\n </p>\n </div>\n</div>\n',[e.PaymentMethod.APPLE_PAY]:'\x3c!-- Apple Pay Section --\x3e\n<div class="ff-payment-method-card ff-payment-method-apple-pay">\n <label class="ff-payment-method-label">\n <input type="radio" name="payment-method" value="apple-pay" class="ff-payment-method-radio">\n <div class="ff-payment-method-header">\n <div class="ff-payment-logo ff-apple-pay-logo">\n <svg class="payment-method-icon" height="26" viewBox="0 0 63 26" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M8.41022 4.82398C9.5916 4.92293 10.773 4.23026 11.5113 3.35205C12.2374 2.4491 12.7173 1.23692 12.5943 0C11.5483 0.0494767 10.2561 0.692674 9.51777 1.59562C8.84093 2.37488 8.26255 3.63654 8.41022 4.82398ZM22.4638 20.7555V1.47193H29.6628C33.3793 1.47193 35.9758 4.04471 35.9758 7.80494C35.9758 11.5652 33.33 14.1627 29.5644 14.1627H25.4418V20.7555H22.4638ZM12.5819 5.05898C11.5411 4.99877 10.5914 5.37358 9.82438 5.67633C9.33075 5.87116 8.91274 6.03614 8.59472 6.03614C8.23784 6.03614 7.80257 5.86234 7.31387 5.66719C6.6735 5.4115 5.94138 5.11916 5.17364 5.13319C3.41387 5.15793 1.77716 6.15983 0.878819 7.75545C-0.967091 10.9467 0.398882 15.6717 2.18326 18.2693C3.05699 19.5556 4.10301 20.9657 5.48129 20.9163C6.08765 20.8933 6.52383 20.7072 6.97524 20.5147C7.49492 20.293 8.0348 20.0628 8.87776 20.0628C9.69151 20.0628 10.2078 20.287 10.7033 20.5023C11.1746 20.707 11.6271 20.9036 12.2989 20.8915C13.7264 20.8668 14.6247 19.6051 15.4984 18.3187C16.4413 16.9381 16.8557 15.5906 16.9186 15.3861C16.9222 15.3745 16.9246 15.3665 16.9259 15.3625C16.9244 15.361 16.9128 15.3556 16.8922 15.3462C16.577 15.2011 14.1679 14.0926 14.1448 11.1199C14.1216 8.62473 16.0556 7.36054 16.3601 7.16153C16.3786 7.14944 16.3911 7.14125 16.3968 7.137C15.1662 5.30636 13.2464 5.10845 12.5819 5.05898ZM41.4153 20.9039C43.2858 20.9039 45.0209 19.9515 45.8085 18.4424H45.8701V20.7555H48.6266V11.157C48.6266 8.37393 46.4115 6.5804 43.0027 6.5804C39.8401 6.5804 37.5019 8.39866 37.4158 10.8972H40.0985C40.32 9.70979 41.4153 8.93054 42.9166 8.93054C44.7379 8.93054 45.7593 9.78401 45.7593 11.3549V12.4186L42.0429 12.6413C38.5849 12.8516 36.7143 14.274 36.7143 16.7479C36.7143 19.2464 38.6464 20.9039 41.4153 20.9039ZM42.215 18.6156C40.6275 18.6156 39.6184 17.8487 39.6184 16.6736C39.6184 15.4615 40.5906 14.7564 42.4488 14.6451L45.7591 14.4348V15.5233C45.7591 17.3292 44.2332 18.6156 42.215 18.6156ZM57.7699 21.51C56.5762 24.8868 55.2103 26 52.306 26C52.0845 26 51.3461 25.9753 51.1739 25.9258V23.6127C51.3585 23.6375 51.8138 23.6622 52.0476 23.6622C53.3643 23.6622 54.1027 23.1056 54.558 21.6584L54.8288 20.8049L49.7833 6.76594H52.8967L56.4039 18.1579H56.4655L59.9727 6.76594H63L57.7699 21.51ZM25.4416 3.99524H28.875C31.4592 3.99524 32.936 5.38059 32.936 7.81731C32.936 10.254 31.4592 11.6518 28.8627 11.6518H25.4416V3.99524Z" fill="currentColor"/>\n </svg>\n </div>\n </div>\n </label>\n <div class="ff-payment-method-content">\n <ul class="ff-payment-features">\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span>Easy and private payments with Face/Touch ID</span>\n </li>\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span>Keeps your financial info safe with end-to-end encryption</span>\n </li>\n <li class="ff-payment-feature">\n <svg width="13" height="11" viewBox="0 0 13 11" fill="none">\n <path stroke="#F8545D" d="M11.1997 1.80133L6.99269 8.63774C6.68226 9.14218 5.9932 9.24721 5.54659 8.85815L2.19971 5.94254" stroke-width="2.66667" stroke-linecap="round"></path>\n </svg>\n <span>Protected by Apple Pay’s unique Device Account Numbe</span>\n </li>\n </ul>\n <div class="ff-apple-pay-button-container ff-payment-container" id="applePayButton"></div>\n <div class="loader-container payment-button-loader">\n <div class="loader"></div>\n </div>\n <div class="payment-errors-container"></div>\n <p class="ff-security-message">\n Your payment information is secure with Apple Pay encryption\n </p>\n </div>\n</div>\n'};class N{constructor(e,t,n){this.onLoaderChange=e=>{this.primerWrapper.disableButtons(e),document.querySelectorAll(`${this.containerSelector} .loader-container`)?.forEach(t=>{t.style.display=e?"flex":"none"})},this.onError=(e,t)=>{if(!e)return void this.containerEl.querySelectorAll(".payment-errors-container")?.forEach(e=>{e.innerHTML=""});let n=null;if(t){const e=t.replace("_","-").toLowerCase();n=this.containerEl.querySelector(`.ff-payment-method-${e} .payment-errors-container`)}n&&(n.textContent=e?.message||"")},this.onStatusChange=(e,t)=>{["initializing"].includes(e)||"initializing"!==t||this.onLoaderChange(!1),"updating"===e&&this.onLoaderChange(!0),"ready"===e&&"updating"===t&&this.onLoaderChange(!1)},this.onSuccess=()=>{const e=document.querySelector("#success-screen")?.innerHTML;document.querySelectorAll(".ff-payment-container").forEach(t=>{t.innerHTML=e}),this.onLoaderChange(!1)},this.onDestroy=()=>{this.containerEl.remove()},this.onInputError=e=>{this.cardInstance.onInputError(e)},this.onMethodRender=e=>{const t=e.replace("_","-").toLowerCase(),n=this.containerEl.querySelector(`.ff-payment-method-${t}`);n&&n.classList.add("visible")},this.onStartPurchase=e=>{this.currentPurchaseMethod=e},this.onPurchaseFailure=e=>{this.currentPurchaseMethod&&this.onError(e,this.currentPurchaseMethod),this.currentPurchaseMethod=null},this.onPurchaseCompleted=()=>{this.currentPurchaseMethod=null},this.containerSelector=t,this.paymentMethodOrder=n;const r=document.querySelector(t);if(!r)throw new Error(`Container element not found for selector: ${t}`);this.containerEl=r,this.primerWrapper=e}initAccordion(){const e=this.containerEl.querySelectorAll(".ff-payment-method-card"),t=this.containerEl.querySelectorAll(".ff-payment-method-radio"),n=Array.from(t)[0];if(!n)throw new Error("Default skin accordion initialization error: No radio button found");setTimeout(()=>{n.click()},0),t.forEach(t=>{t.addEventListener("change",()=>{t.checked&&(t=>{e.forEach(e=>{const n=e.querySelector(".ff-payment-method-radio");n===t&&n?.checked?e.classList.add("expanded"):e.classList.remove("expanded")})})(t)})})}wireCardInputs(){this.cardInstance.wireCardInputs();const e=this.containerEl.querySelector("#submitButton");if(!e)throw new Error("One or more card input elements are missing in the default skin");this.cardInputElements={...this.cardInstance.getCardInputElements(),button:e}}async init(){this.containerEl.insertAdjacentHTML("beforeend",'<div class="ff-skin-default" id="ff-payment-method-containers">\n <div id="success-screen" style="display: none">\n <div class="success">\n <img alt="Loading" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1IDAuMTExMzI4QzIwLjA3NzQgMC4xMTEzMjggMTUuMjY1NCAxLjU3MTA0IDExLjE3MjUgNC4zMDU4NkM3LjA3OTUyIDcuMDQwNjkgMy44ODk0NSAxMC45Mjc4IDIuMDA1NjYgMTUuNDc1N0MwLjEyMTg4MyAyMC4wMjM1IC0wLjM3MSAyNS4wMjc4IDAuNTg5MzQzIDI5Ljg1NThDMS41NDk2OSAzNC42ODM4IDMuOTIwMTIgMzkuMTE4NSA3LjQwMDkgNDIuNTk5M0MxMC44ODE3IDQ2LjA4MDEgMTUuMzE2NCA0OC40NTA1IDIwLjE0NDQgNDkuNDEwOUMyNC45NzI0IDUwLjM3MTIgMjkuOTc2NyA0OS44NzgzIDM0LjUyNDYgNDcuOTk0NkMzOS4wNzI0IDQ2LjExMDggNDIuOTU5NSA0Mi45MjA3IDQ1LjY5NDQgMzguODI3N0M0OC40MjkyIDM0LjczNDggNDkuODg4OSAyOS45MjI4IDQ5Ljg4ODkgMjUuMDAwMkM0OS44ODg5IDE4LjM5OTMgNDcuMjY2NyAxMi4wNjg3IDQyLjU5OTEgNy40MDExMkMzNy45MzE1IDIuNzMzNTQgMzEuNjAwOSAwLjExMTMyOCAyNSAwLjExMTMyOFpNNDEuMjU1NiAxNi42NDY5TDIwLjgxNTYgMzcuMDcxM0w4Ljc0NDQ0IDI1LjAwMDJDOC4zMzE4OCAyNC41ODc3IDguMTAwMTEgMjQuMDI4MSA4LjEwMDExIDIzLjQ0NDdDOC4xMDAxMSAyMi44NjEyIDguMzMxODggMjIuMzAxNyA4Ljc0NDQ0IDIxLjg4OTFDOS4xNTcgMjEuNDc2NSA5LjcxNjU1IDIxLjI0NDggMTAuMyAyMS4yNDQ4QzEwLjg4MzQgMjEuMjQ0OCAxMS40NDMgMjEuNDc2NSAxMS44NTU2IDIxLjg4OTFMMjAuODQ2NyAzMC44ODAyTDM4LjE3NTYgMTMuNTY2OUMzOC4zNzk4IDEzLjM2MjYgMzguNjIyMyAxMy4yMDA2IDM4Ljg4OTIgMTMuMDlDMzkuMTU2MiAxMi45Nzk1IDM5LjQ0MjIgMTIuOTIyNiAzOS43MzExIDEyLjkyMjZDNDAuMDIgMTIuOTIyNiA0MC4zMDYxIDEyLjk3OTUgNDAuNTczIDEzLjA5QzQwLjgzOTkgMTMuMjAwNiA0MS4wODI0IDEzLjM2MjYgNDEuMjg2NyAxMy41NjY5QzQxLjQ5MDkgMTMuNzcxMiA0MS42NTMgMTQuMDEzNyA0MS43NjM1IDE0LjI4MDZDNDEuODc0MSAxNC41NDc1IDQxLjkzMSAxNC44MzM1IDQxLjkzMSAxNS4xMjI0QzQxLjkzMSAxNS40MTEzIDQxLjg3NDEgMTUuNjk3NCA0MS43NjM1IDE1Ljk2NDNDNDEuNjUzIDE2LjIzMTIgNDEuNDkwOSAxNi40NzM3IDQxLjI4NjcgMTYuNjc4TDQxLjI1NTYgMTYuNjQ2OVoiIGZpbGw9IiM4RURGQzIiLz4KPC9zdmc+Cg==">\n <div>Payment completed successfully</div>\n </div>\n </div>\n</div>\n');const e=this.containerEl.querySelector("#ff-payment-method-containers");this.paymentMethodOrder.forEach(t=>{e.insertAdjacentHTML("beforeend",T[t])}),this.cardInstance=new D(document.querySelector("#cardForm")),this.cardInstance.init(),this.initAccordion(),this.wireCardInputs()}renderCardForm(){}getCardInputSelectors(){return{...this.cardInstance.getCardInputSelectors(),button:"#submitButton"}}getCardInputElements(){return{...this.cardInstance.getCardInputElements(),button:this.cardInputElements.button}}getPaymentButtonElements(){return{paypal:this.containerEl.querySelector("#paypalButton"),googlePay:this.containerEl.querySelector("#googlePayButton"),applePay:this.containerEl.querySelector("#applePayButton")}}getCheckoutOptions(){return{...this.cardInstance.getCheckoutOptions(),cardElements:this.getCardInputElements(),paymentButtonElements:this.getPaymentButtonElements(),applePay:{buttonStyle:"black"},paypal:{buttonColor:"gold",buttonShape:"pill",buttonLabel:"pay",buttonSize:"large",buttonHeight:54},googlePay:{buttonColor:"black",buttonSizeMode:"fill",buttonType:"pay"}}}}var _=Object.freeze({__proto__:null,default:async(e,t,n)=>{const r=new N(e,t,n);return await r.init(),r}});e.APIError=o,e.Billing=P,e.CHECKOUT_STATES={INITIALIZING:"initializing",READY:"ready",PROCESSING:"processing",ACTION_REQUIRED:"action_required",UPDATING:"updating",COMPLETED:"completed",ERROR:"error",DESTROYED:"destroyed"},e.CheckoutError=a,e.ConfigurationError=class extends n{constructor(e){super(e,y.CONFIGURATION_ERROR),this.name="ConfigurationError"}},e.DEFAULTS=h,e.ERROR_CODES=y,e.EVENTS=u,e.FunnefoxSDKError=n,e.NetworkError=s,e.PrimerError=i,e.SDK_VERSION="0.5.0-beta.1",e.ValidationError=r,e.configure=b,e.createCheckout=L,e.createClientSession=A,e.default=P,Object.defineProperty(e,"__esModule",{value:!0})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@funnelfox/billing",
3
- "version": "0.5.0-beta.0",
3
+ "version": "0.5.0-beta.1",
4
4
  "license": "MIT",
5
5
  "author": "Funnelfox",
6
6
  "description": "JavaScript SDK for Funnelfox billing with Primer integration",
@@ -26,7 +26,7 @@
26
26
  "scripts": {
27
27
  "build": "rm -rf dist && rollup -c",
28
28
  "build:watch": "rollup -c -w",
29
- "build:examples": "npm run build && npm pack && npm i ./funnelfox-billing-0.5.0-beta.0.tgz --prefix examples/basic && npm run build --prefix examples/basic",
29
+ "build:examples": "npm run build && npm pack && npm i ./funnelfox-billing-0.5.0-beta.1.tgz --prefix examples/basic && npm run build --prefix examples/basic",
30
30
  "dev": "rollup -c -w",
31
31
  "lint": "eslint \"src/**/*.{ts,tsx}\"",
32
32
  "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
package/src/types.d.ts CHANGED
@@ -44,6 +44,7 @@ export interface CheckoutConfig extends PrimerCheckoutConfig {
44
44
  priceId: string;
45
45
  container: string;
46
46
  clientMetadata?: MetadataType;
47
+ paymentMethodOrder?: PaymentMethod[];
47
48
  }
48
49
 
49
50
  export interface PaymentButtonSelectors {