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

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 +31 -29
  5. package/dist/funnelfox-billing.esm.js +31 -29
  6. package/dist/funnelfox-billing.js +59 -35
  7. package/dist/funnelfox-billing.min.js +1 -1
  8. package/package.json +2 -2
  9. package/src/types.d.ts +42 -4
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.2';
217
217
  const DEFAULTS = {
218
218
  BASE_URL: 'https://billing.funnelfox.com',
219
219
  REGION: 'default',
@@ -330,16 +330,6 @@ class PrimerWrapper {
330
330
  throw new PrimerError('Failed to create Primer headless checkout', error);
331
331
  }
332
332
  }
333
- initializeCardElements(selectors) {
334
- const { cardNumber, expiryDate, cvv, cardholderName, button } = selectors;
335
- return {
336
- cardNumber: document.querySelector(cardNumber),
337
- expiryDate: document.querySelector(expiryDate),
338
- cvv: document.querySelector(cvv),
339
- cardholderName: document.querySelector(cardholderName),
340
- button: document.querySelector(button),
341
- };
342
- }
343
333
  disableButtons(disabled) {
344
334
  if (!this.paymentMethodsInterfaces)
345
335
  return;
@@ -347,8 +337,7 @@ class PrimerWrapper {
347
337
  this.paymentMethodsInterfaces[method].setDisabled(disabled);
348
338
  }
349
339
  }
350
- async renderButton(allowedPaymentMethod, { container, }) {
351
- const containerEl = this.validateContainer(container);
340
+ async renderButton(allowedPaymentMethod, { htmlNode, onMethodRenderError, onMethodRender, }) {
352
341
  let button;
353
342
  this.ensurePrimerAvailable();
354
343
  if (!this.headless) {
@@ -360,10 +349,18 @@ class PrimerWrapper {
360
349
  throw new Error('Payment method manager is not available');
361
350
  }
362
351
  button = pmManager.createButton();
363
- await button.render(containerEl, {});
352
+ await button.render(htmlNode, {});
364
353
  this.destroyCallbacks.push(() => button.clean());
354
+ onMethodRender(allowedPaymentMethod);
355
+ return {
356
+ setDisabled: (disabled) => {
357
+ button.setDisabled(disabled);
358
+ },
359
+ destroy: () => button.clean(),
360
+ };
365
361
  }
366
362
  catch (error) {
363
+ onMethodRenderError(allowedPaymentMethod);
367
364
  throw new PrimerError('Failed to initialize Primer checkout', error);
368
365
  }
369
366
  }
@@ -382,23 +379,14 @@ class PrimerWrapper {
382
379
  });
383
380
  }
384
381
  else {
385
- // For button methods, render directly into htmlNode
386
- this.ensurePrimerAvailable();
387
- if (!this.headless) {
388
- throw new PrimerError('Headless checkout not found');
389
- }
390
382
  try {
391
- const pmManager = await this.headless.createPaymentMethodManager(method);
392
- if (!pmManager) {
393
- throw new Error('Payment method manager is not available');
394
- }
395
- const button = pmManager.createButton();
396
- await button.render(htmlNode, {});
397
- this.destroyCallbacks.push(() => button.clean());
398
- options.onMethodRender(method);
383
+ return await this.renderButton(method, {
384
+ htmlNode,
385
+ onMethodRenderError: options.onMethodRenderError,
386
+ onMethodRender: options.onMethodRender,
387
+ });
399
388
  }
400
389
  catch (error) {
401
- options.onMethodRenderError(method);
402
390
  throw new PrimerError('Failed to initialize Primer checkout', error);
403
391
  }
404
392
  }
@@ -491,6 +479,7 @@ class PrimerWrapper {
491
479
  };
492
480
  }
493
481
  catch (error) {
482
+ onMethodRenderError(PaymentMethod.PAYMENT_CARD);
494
483
  throw new PrimerError('Failed to initialize Primer checkout', error);
495
484
  }
496
485
  }
@@ -841,6 +830,12 @@ class CheckoutInstance extends EventEmitter {
841
830
  constructor(config) {
842
831
  super();
843
832
  this.counter = 0;
833
+ this.paymentMethodOrder = [
834
+ PaymentMethod.APPLE_PAY,
835
+ PaymentMethod.GOOGLE_PAY,
836
+ PaymentMethod.PAYPAL,
837
+ PaymentMethod.PAYMENT_CARD,
838
+ ];
844
839
  this.handleInputChange = (inputName, error) => {
845
840
  this.emit(EVENTS.INPUT_ERROR, { name: inputName, error });
846
841
  };
@@ -1020,6 +1015,9 @@ class CheckoutInstance extends EventEmitter {
1020
1015
  let checkoutOptions;
1021
1016
  if (!this.checkoutConfig.cardSelectors ||
1022
1017
  !this.checkoutConfig.paymentButtonSelectors) {
1018
+ if (this.checkoutConfig.paymentMethodOrder) {
1019
+ this.paymentMethodOrder = this.checkoutConfig.paymentMethodOrder;
1020
+ }
1023
1021
  const defaultSkinCheckoutOptions = await this.getDefaultSkinCheckoutOptions();
1024
1022
  if (!defaultSkinCheckoutOptions.cardElements ||
1025
1023
  !defaultSkinCheckoutOptions.paymentButtonElements) {
@@ -1035,6 +1033,10 @@ class CheckoutInstance extends EventEmitter {
1035
1033
  paymentButtonElements = this.convertPaymentButtonSelectorsToElements(this.checkoutConfig.paymentButtonSelectors);
1036
1034
  checkoutOptions = this.getCheckoutOptions({});
1037
1035
  }
1036
+ if (this.checkoutConfig.paymentMethodOrder) {
1037
+ // eslint-disable-next-line no-console
1038
+ console.warn('paymentMethodOrder is using only for default skin and will be ignored if you are using custom checkout');
1039
+ }
1038
1040
  await this.primerWrapper.renderCheckout(this.clientToken, checkoutOptions, {
1039
1041
  container: containerElement,
1040
1042
  cardElements,
@@ -1191,7 +1193,7 @@ class CheckoutInstance extends EventEmitter {
1191
1193
  async getDefaultSkinCheckoutOptions() {
1192
1194
  const skinFactory = (await import('./chunk-index.es.js'))
1193
1195
  .default;
1194
- const skin = await skinFactory(this.primerWrapper, this.checkoutConfig.container);
1196
+ const skin = await skinFactory(this.primerWrapper, this.checkoutConfig.container, this.paymentMethodOrder);
1195
1197
  this.on(EVENTS.INPUT_ERROR, skin.onInputError);
1196
1198
  this.on(EVENTS.STATUS_CHANGE, skin.onStatusChange);
1197
1199
  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.2';
223
223
  const DEFAULTS = {
224
224
  BASE_URL: 'https://billing.funnelfox.com',
225
225
  REGION: 'default',
@@ -336,16 +336,6 @@
336
336
  throw new PrimerError('Failed to create Primer headless checkout', error);
337
337
  }
338
338
  }
339
- initializeCardElements(selectors) {
340
- const { cardNumber, expiryDate, cvv, cardholderName, button } = selectors;
341
- return {
342
- cardNumber: document.querySelector(cardNumber),
343
- expiryDate: document.querySelector(expiryDate),
344
- cvv: document.querySelector(cvv),
345
- cardholderName: document.querySelector(cardholderName),
346
- button: document.querySelector(button),
347
- };
348
- }
349
339
  disableButtons(disabled) {
350
340
  if (!this.paymentMethodsInterfaces)
351
341
  return;
@@ -353,8 +343,7 @@
353
343
  this.paymentMethodsInterfaces[method].setDisabled(disabled);
354
344
  }
355
345
  }
356
- async renderButton(allowedPaymentMethod, { container, }) {
357
- const containerEl = this.validateContainer(container);
346
+ async renderButton(allowedPaymentMethod, { htmlNode, onMethodRenderError, onMethodRender, }) {
358
347
  let button;
359
348
  this.ensurePrimerAvailable();
360
349
  if (!this.headless) {
@@ -366,10 +355,18 @@
366
355
  throw new Error('Payment method manager is not available');
367
356
  }
368
357
  button = pmManager.createButton();
369
- await button.render(containerEl, {});
358
+ await button.render(htmlNode, {});
370
359
  this.destroyCallbacks.push(() => button.clean());
360
+ onMethodRender(allowedPaymentMethod);
361
+ return {
362
+ setDisabled: (disabled) => {
363
+ button.setDisabled(disabled);
364
+ },
365
+ destroy: () => button.clean(),
366
+ };
371
367
  }
372
368
  catch (error) {
369
+ onMethodRenderError(allowedPaymentMethod);
373
370
  throw new PrimerError('Failed to initialize Primer checkout', error);
374
371
  }
375
372
  }
@@ -388,23 +385,14 @@
388
385
  });
389
386
  }
390
387
  else {
391
- // For button methods, render directly into htmlNode
392
- this.ensurePrimerAvailable();
393
- if (!this.headless) {
394
- throw new PrimerError('Headless checkout not found');
395
- }
396
388
  try {
397
- const pmManager = await this.headless.createPaymentMethodManager(method);
398
- if (!pmManager) {
399
- throw new Error('Payment method manager is not available');
400
- }
401
- const button = pmManager.createButton();
402
- await button.render(htmlNode, {});
403
- this.destroyCallbacks.push(() => button.clean());
404
- options.onMethodRender(method);
389
+ return await this.renderButton(method, {
390
+ htmlNode,
391
+ onMethodRenderError: options.onMethodRenderError,
392
+ onMethodRender: options.onMethodRender,
393
+ });
405
394
  }
406
395
  catch (error) {
407
- options.onMethodRenderError(method);
408
396
  throw new PrimerError('Failed to initialize Primer checkout', error);
409
397
  }
410
398
  }
@@ -497,6 +485,7 @@
497
485
  };
498
486
  }
499
487
  catch (error) {
488
+ onMethodRenderError(exports.PaymentMethod.PAYMENT_CARD);
500
489
  throw new PrimerError('Failed to initialize Primer checkout', error);
501
490
  }
502
491
  }
@@ -847,6 +836,12 @@
847
836
  constructor(config) {
848
837
  super();
849
838
  this.counter = 0;
839
+ this.paymentMethodOrder = [
840
+ exports.PaymentMethod.APPLE_PAY,
841
+ exports.PaymentMethod.GOOGLE_PAY,
842
+ exports.PaymentMethod.PAYPAL,
843
+ exports.PaymentMethod.PAYMENT_CARD,
844
+ ];
850
845
  this.handleInputChange = (inputName, error) => {
851
846
  this.emit(EVENTS.INPUT_ERROR, { name: inputName, error });
852
847
  };
@@ -1026,6 +1021,9 @@
1026
1021
  let checkoutOptions;
1027
1022
  if (!this.checkoutConfig.cardSelectors ||
1028
1023
  !this.checkoutConfig.paymentButtonSelectors) {
1024
+ if (this.checkoutConfig.paymentMethodOrder) {
1025
+ this.paymentMethodOrder = this.checkoutConfig.paymentMethodOrder;
1026
+ }
1029
1027
  const defaultSkinCheckoutOptions = await this.getDefaultSkinCheckoutOptions();
1030
1028
  if (!defaultSkinCheckoutOptions.cardElements ||
1031
1029
  !defaultSkinCheckoutOptions.paymentButtonElements) {
@@ -1041,6 +1039,10 @@
1041
1039
  paymentButtonElements = this.convertPaymentButtonSelectorsToElements(this.checkoutConfig.paymentButtonSelectors);
1042
1040
  checkoutOptions = this.getCheckoutOptions({});
1043
1041
  }
1042
+ if (this.checkoutConfig.paymentMethodOrder) {
1043
+ // eslint-disable-next-line no-console
1044
+ console.warn('paymentMethodOrder is using only for default skin and will be ignored if you are using custom checkout');
1045
+ }
1044
1046
  await this.primerWrapper.renderCheckout(this.clientToken, checkoutOptions, {
1045
1047
  container: containerElement,
1046
1048
  cardElements,
@@ -1197,7 +1199,7 @@
1197
1199
  async getDefaultSkinCheckoutOptions() {
1198
1200
  const skinFactory = (await Promise.resolve().then(function () { return index; }))
1199
1201
  .default;
1200
- const skin = await skinFactory(this.primerWrapper, this.checkoutConfig.container);
1202
+ const skin = await skinFactory(this.primerWrapper, this.checkoutConfig.container, this.paymentMethodOrder);
1201
1203
  this.on(EVENTS.INPUT_ERROR, skin.onInputError);
1202
1204
  this.on(EVENTS.STATUS_CHANGE, skin.onStatusChange);
1203
1205
  this.on(EVENTS.ERROR, (error) => skin.onError(error));
@@ -1341,7 +1343,15 @@
1341
1343
  window.Billing = Billing;
1342
1344
  }
1343
1345
 
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";
1346
+ 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";
1347
+
1348
+ 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";
1349
+
1350
+ 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";
1351
+
1352
+ 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";
1353
+
1354
+ 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
1355
 
1346
1356
  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
1357
 
@@ -1424,8 +1434,14 @@
1424
1434
  default: CardSkin
1425
1435
  });
1426
1436
 
1437
+ const paymentMethodTemplates = {
1438
+ [exports.PaymentMethod.PAYMENT_CARD]: cardTemplate,
1439
+ [exports.PaymentMethod.PAYPAL]: paypalTemplate,
1440
+ [exports.PaymentMethod.GOOGLE_PAY]: googlePayTemplate,
1441
+ [exports.PaymentMethod.APPLE_PAY]: applePayTemplate,
1442
+ };
1427
1443
  class DefaultSkin {
1428
- constructor(primerWrapper, containerSelector) {
1444
+ constructor(primerWrapper, containerSelector, paymentMethodOrder) {
1429
1445
  this.onLoaderChange = (isLoading) => {
1430
1446
  this.primerWrapper.disableButtons(isLoading);
1431
1447
  document
@@ -1498,6 +1514,7 @@
1498
1514
  this.currentPurchaseMethod = null;
1499
1515
  };
1500
1516
  this.containerSelector = containerSelector;
1517
+ this.paymentMethodOrder = paymentMethodOrder;
1501
1518
  const containerEl = document.querySelector(containerSelector);
1502
1519
  if (!containerEl) {
1503
1520
  throw new Error(`Container element not found for selector: ${containerSelector}`);
@@ -1519,9 +1536,12 @@
1519
1536
  }
1520
1537
  });
1521
1538
  };
1522
- const checkedRadio = Array.from(radioButtons).find(radio => radio.checked);
1539
+ const checkedRadio = Array.from(radioButtons)[0];
1540
+ if (!checkedRadio) {
1541
+ throw new Error('Default skin accordion initialization error: No radio button found');
1542
+ }
1523
1543
  setTimeout(() => {
1524
- handleAccordion(checkedRadio || null);
1544
+ checkedRadio.click();
1525
1545
  }, 0);
1526
1546
  radioButtons.forEach(radio => {
1527
1547
  radio.addEventListener('change', () => {
@@ -1544,6 +1564,10 @@
1544
1564
  }
1545
1565
  async init() {
1546
1566
  this.containerEl.insertAdjacentHTML('beforeend', template$1);
1567
+ const paymentMethodContainers = this.containerEl.querySelector('#ff-payment-method-containers');
1568
+ this.paymentMethodOrder.forEach(paymentMethod => {
1569
+ paymentMethodContainers.insertAdjacentHTML('beforeend', paymentMethodTemplates[paymentMethod]);
1570
+ });
1547
1571
  this.cardInstance = new CardSkin(document.querySelector('#cardForm'));
1548
1572
  this.cardInstance.init();
1549
1573
  this.initAccordion();
@@ -1594,8 +1618,8 @@
1594
1618
  };
1595
1619
  }
1596
1620
  }
1597
- const createDefaultSkin = async (primerWrapper, containerSelector) => {
1598
- const skin = new DefaultSkin(primerWrapper, containerSelector);
1621
+ const createDefaultSkin = async (primerWrapper, containerSelector, paymentMethodOrder) => {
1622
+ const skin = new DefaultSkin(primerWrapper, containerSelector, paymentMethodOrder);
1599
1623
  await skin['init']();
1600
1624
  return skin;
1601
1625
  };