@pelcro/react-pelcro-js 3.10.1-beta.2 → 3.10.1-beta.20

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.
package/dist/index.cjs.js CHANGED
@@ -10531,35 +10531,38 @@ const showInvoiceDetailsFromUrl = () => {
10531
10531
  isAuthenticated,
10532
10532
  setInvoice,
10533
10533
  whenUserReady,
10534
+ whenSiteReady,
10534
10535
  switchView
10535
10536
  } = usePelcro.getStore();
10536
- whenUserReady(() => {
10537
- const invoiceId = window.Pelcro.helpers.getURLParameter("id");
10538
- const wasSetSuccessfully = setInvoice(invoiceId);
10539
-
10540
- if (!wasSetSuccessfully) {
10541
- const errorMessage = i18next.t("messages:invalidInvoice", {
10542
- returnObjects: true
10543
- });
10544
- return notify.error(errorMessage);
10545
- }
10546
-
10537
+ whenSiteReady(() => {
10547
10538
  if (!isAuthenticated()) {
10548
10539
  return switchView("login");
10549
10540
  }
10550
10541
 
10551
- const {
10552
- invoice
10553
- } = usePelcro.getStore();
10542
+ whenUserReady(() => {
10543
+ const invoiceId = window.Pelcro.helpers.getURLParameter("id");
10544
+ const wasSetSuccessfully = setInvoice(invoiceId);
10554
10545
 
10555
- if (invoice.total === 0) {
10556
- const errorMessage = i18next.t("messages:zeroTotalInvoice", {
10557
- returnObjects: true
10558
- });
10559
- return notify.error(errorMessage);
10560
- }
10546
+ if (!wasSetSuccessfully) {
10547
+ const errorMessage = i18next.t("messages:invalidInvoice", {
10548
+ returnObjects: true
10549
+ });
10550
+ return notify.error(errorMessage);
10551
+ }
10552
+
10553
+ const {
10554
+ invoice
10555
+ } = usePelcro.getStore();
10556
+
10557
+ if (invoice.total === 0) {
10558
+ const errorMessage = i18next.t("messages:zeroTotalInvoice", {
10559
+ returnObjects: true
10560
+ });
10561
+ return notify.error(errorMessage);
10562
+ }
10561
10563
 
10562
- return switchView("invoice-details");
10564
+ return switchView("invoice-details");
10565
+ });
10563
10566
  });
10564
10567
  };
10565
10568
 
@@ -12239,17 +12242,18 @@ function LoginModal({
12239
12242
  const onSuccess = res => {
12240
12243
  var _props$onSuccess;
12241
12244
 
12242
- (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res); // If this is an invoice
12243
-
12244
- if (invoice) {
12245
- switchView("invoice-details");
12246
- }
12245
+ (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res);
12247
12246
 
12248
12247
  if (window.Pelcro.paywall.isArticleRestricted()) {
12249
12248
  initPaywalls();
12250
12249
  }
12251
12250
 
12252
12251
  resetView();
12252
+ const viewFromURL = getStableViewID(window.Pelcro.helpers.getURLParameter("view"));
12253
+
12254
+ if (viewFromURL === "invoice-details") {
12255
+ initViewFromURL();
12256
+ }
12253
12257
  };
12254
12258
 
12255
12259
  const onCreateAccountClick = () => {
@@ -15401,6 +15405,9 @@ const PaymentMethodContainerWithoutStripe = ({
15401
15405
  selectedPaymentMethodId,
15402
15406
  couponCode
15403
15407
  } = usePelcro();
15408
+ const {
15409
+ whenUserReady
15410
+ } = usePelcro.getStore();
15404
15411
  const product = (_props$product = props.product) !== null && _props$product !== void 0 ? _props$product : pelcroStore.product;
15405
15412
  const plan = (_props$plan = props.plan) !== null && _props$plan !== void 0 ? _props$plan : pelcroStore.plan;
15406
15413
  const subscriptionIdToRenew = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : pelcroStore.subscriptionIdToRenew;
@@ -15409,6 +15416,149 @@ const PaymentMethodContainerWithoutStripe = ({
15409
15416
  const isGift = (_props$isGift = props.isGift) !== null && _props$isGift !== void 0 ? _props$isGift : pelcroStore.isGift;
15410
15417
  const isRenewingGift = (_props$isRenewingGift = props.isRenewingGift) !== null && _props$isRenewingGift !== void 0 ? _props$isRenewingGift : pelcroStore.isRenewingGift;
15411
15418
  const invoice = (_props$invoice = props.invoice) !== null && _props$invoice !== void 0 ? _props$invoice : pelcroStore.invoice;
15419
+ const cardProcessor = getSiteCardProcessor();
15420
+ React.useState(Boolean(window.Tapjsli));
15421
+ React.useEffect(() => {
15422
+ whenUserReady(() => {
15423
+ if (cardProcessor === "tap" && !window.Tapjsli) {
15424
+ window.Pelcro.helpers.loadSDK("https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js", "tap-bluebird");
15425
+ window.Pelcro.helpers.loadSDK("https://secure.gosell.io/js/sdk/tap.min.js", "tap-sdk");
15426
+ document.querySelector('script[src="https://secure.gosell.io/js/sdk/tap.min.js"]').addEventListener("load", () => {
15427
+ var _window$Pelcro$site$r;
15428
+
15429
+ console.log("From event listener: Tap script is loaded");
15430
+ const tapKey = window.Tapjsli((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings.publishable_key);
15431
+ let elements = tapKey.elements({});
15432
+ let style = {
15433
+ base: {
15434
+ color: "#535353",
15435
+ lineHeight: "18px",
15436
+ fontFamily: "sans-serif",
15437
+ fontSmoothing: "antialiased",
15438
+ fontSize: "16px",
15439
+ "::placeholder": {
15440
+ color: "rgba(0, 0, 0, 0.26)",
15441
+ fontSize: "15px"
15442
+ }
15443
+ },
15444
+ invalid: {
15445
+ color: "red"
15446
+ }
15447
+ }; // input labels/placeholders
15448
+
15449
+ let labels = {
15450
+ cardNumber: "Card Number",
15451
+ expirationDate: "MM/YY",
15452
+ cvv: "CVV",
15453
+ cardHolder: "Card Holder Name"
15454
+ }; //payment options
15455
+
15456
+ let paymentOptions = {
15457
+ labels: labels,
15458
+ TextDirection: "ltr"
15459
+ }; //create element, pass style and payment options
15460
+
15461
+ let card = elements.create("card", {
15462
+ style: style
15463
+ }, paymentOptions); //mount element
15464
+
15465
+ card.mount("#tapPaymentIframe"); //card change event listener
15466
+
15467
+ card.addEventListener("change", function (event) {// if (event.error_interactive) {
15468
+ // onFailure(event.error_interactive);
15469
+ // return dispatch({
15470
+ // type: SHOW_ALERT,
15471
+ // payload: {
15472
+ // type: "error",
15473
+ // content: getErrorMessages(event.error_interactive)
15474
+ // }
15475
+ // });
15476
+ // } else {
15477
+ // dispatch({
15478
+ // type: SHOW_ALERT,
15479
+ // payload: { type: "error", content: "" }
15480
+ // });
15481
+ // }
15482
+ // let displayError = document.getElementById("error-handler");
15483
+ // if (event.error) {
15484
+ // displayError.textContent = event.error.message;
15485
+ // } else {
15486
+ // displayError.textContent = "";
15487
+ // }
15488
+ });
15489
+ tapInstanceRef.current = tapKey;
15490
+ tapInstanceCard.current = card;
15491
+ });
15492
+ }
15493
+
15494
+ if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
15495
+ var _window$Pelcro$site$r2;
15496
+
15497
+ console.log("window.Tapjsli script is loaded");
15498
+ const tapKey = window.Tapjsli((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.tap_gateway_settings.publishable_key);
15499
+ let elements = tapKey.elements({});
15500
+ let style = {
15501
+ base: {
15502
+ color: "#535353",
15503
+ lineHeight: "18px",
15504
+ fontFamily: "sans-serif",
15505
+ fontSmoothing: "antialiased",
15506
+ fontSize: "16px",
15507
+ "::placeholder": {
15508
+ color: "rgba(0, 0, 0, 0.26)",
15509
+ fontSize: "15px"
15510
+ }
15511
+ },
15512
+ invalid: {
15513
+ color: "red"
15514
+ }
15515
+ }; // input labels/placeholders
15516
+
15517
+ let labels = {
15518
+ cardNumber: "Card Number",
15519
+ expirationDate: "MM/YY",
15520
+ cvv: "CVV",
15521
+ cardHolder: "Card Holder Name"
15522
+ }; //payment options
15523
+
15524
+ let paymentOptions = {
15525
+ labels: labels,
15526
+ TextDirection: "ltr"
15527
+ }; //create element, pass style and payment options
15528
+
15529
+ let card = elements.create("card", {
15530
+ style: style
15531
+ }, paymentOptions); //mount element
15532
+
15533
+ card.mount("#tapPaymentIframe"); //card change event listener
15534
+
15535
+ card.addEventListener("change", function (event) {// if (event.error_interactive) {
15536
+ // onFailure(event.error_interactive);
15537
+ // return dispatch({
15538
+ // type: SHOW_ALERT,
15539
+ // payload: {
15540
+ // type: "error",
15541
+ // content: getErrorMessages(event.error_interactive)
15542
+ // }
15543
+ // });
15544
+ // } else {
15545
+ // dispatch({
15546
+ // type: SHOW_ALERT,
15547
+ // payload: { type: "error", content: "" }
15548
+ // });
15549
+ // }
15550
+ // let displayError = document.getElementById("error-handler");
15551
+ // if (event.error) {
15552
+ // displayError.textContent = event.error.message;
15553
+ // } else {
15554
+ // displayError.textContent = "";
15555
+ // }
15556
+ });
15557
+ tapInstanceRef.current = tapKey;
15558
+ tapInstanceCard.current = card;
15559
+ }
15560
+ });
15561
+ }, [selectedPaymentMethodId]);
15412
15562
  React.useEffect(() => {
15413
15563
  if (window.Pelcro.coupon.getFromUrl()) {
15414
15564
  dispatch({
@@ -15864,13 +16014,11 @@ const PaymentMethodContainerWithoutStripe = ({
15864
16014
  const tapInstanceRef = React__default['default'].useRef(null);
15865
16015
  const tapInstanceCard = React__default['default'].useRef(null);
15866
16016
  React.useEffect(() => {
15867
- const cardProcessor = getSiteCardProcessor();
15868
-
15869
16017
  if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
15870
- var _window$Pelcro$site$r, _window$Pelcro$site$r2;
16018
+ var _window$Pelcro$site$r3, _window$Pelcro$site$r4;
15871
16019
 
15872
- const payPageId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings.pay_page_id;
15873
- const reportGroup = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.vantiv_gateway_settings.report_group;
16020
+ const payPageId = (_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.vantiv_gateway_settings.pay_page_id;
16021
+ const reportGroup = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.vantiv_gateway_settings.report_group;
15874
16022
  vantivInstanceRef.current = new window.EprotectIframeClient({
15875
16023
  paypageId: payPageId,
15876
16024
  reportGroup: reportGroup,
@@ -15892,72 +16040,6 @@ const PaymentMethodContainerWithoutStripe = ({
15892
16040
  }
15893
16041
  });
15894
16042
  }
15895
-
15896
- if (cardProcessor === "tap" && !selectedPaymentMethodId) {
15897
- var _window$Pelcro$site$r3;
15898
-
15899
- const tapKey = Tapjsli((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.tap_gateway_settings.publishable_key);
15900
- let elements = tapKey.elements({});
15901
- let style = {
15902
- base: {
15903
- color: "#535353",
15904
- lineHeight: "18px",
15905
- fontFamily: "sans-serif",
15906
- fontSmoothing: "antialiased",
15907
- fontSize: "16px",
15908
- "::placeholder": {
15909
- color: "rgba(0, 0, 0, 0.26)",
15910
- fontSize: "15px"
15911
- }
15912
- },
15913
- invalid: {
15914
- color: "red"
15915
- }
15916
- }; // input labels/placeholders
15917
-
15918
- let labels = {
15919
- cardNumber: "Card Number",
15920
- expirationDate: "MM/YY",
15921
- cvv: "CVV",
15922
- cardHolder: "Card Holder Name"
15923
- }; //payment options
15924
-
15925
- let paymentOptions = {
15926
- labels: labels,
15927
- TextDirection: "ltr"
15928
- }; //create element, pass style and payment options
15929
-
15930
- let card = elements.create("card", {
15931
- style: style
15932
- }, paymentOptions); //mount element
15933
-
15934
- card.mount("#tapPaymentIframe"); //card change event listener
15935
-
15936
- card.addEventListener("change", function (event) {// if (event.error_interactive) {
15937
- // onFailure(event.error_interactive);
15938
- // return dispatch({
15939
- // type: SHOW_ALERT,
15940
- // payload: {
15941
- // type: "error",
15942
- // content: getErrorMessages(event.error_interactive)
15943
- // }
15944
- // });
15945
- // } else {
15946
- // dispatch({
15947
- // type: SHOW_ALERT,
15948
- // payload: { type: "error", content: "" }
15949
- // });
15950
- // }
15951
- // let displayError = document.getElementById("error-handler");
15952
- // if (event.error) {
15953
- // displayError.textContent = event.error.message;
15954
- // } else {
15955
- // displayError.textContent = "";
15956
- // }
15957
- });
15958
- tapInstanceRef.current = tapKey;
15959
- tapInstanceCard.current = card;
15960
- }
15961
16043
  }, [selectedPaymentMethodId]);
15962
16044
 
15963
16045
  const initPaymentRequest = (state, dispatch) => {
@@ -16030,9 +16112,9 @@ const PaymentMethodContainerWithoutStripe = ({
16030
16112
 
16031
16113
 
16032
16114
  const updateTotalAmountWithTax = () => {
16033
- var _window$Pelcro$site$r4;
16115
+ var _window$Pelcro$site$r5;
16034
16116
 
16035
- const taxesEnabled = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.taxes_enabled;
16117
+ const taxesEnabled = (_window$Pelcro$site$r5 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r5 === void 0 ? void 0 : _window$Pelcro$site$r5.taxes_enabled;
16036
16118
 
16037
16119
  if (taxesEnabled && type === "createPayment") {
16038
16120
  dispatch({
@@ -16079,7 +16161,6 @@ const PaymentMethodContainerWithoutStripe = ({
16079
16161
 
16080
16162
  if (err) {
16081
16163
  onFailure(err);
16082
- console.error(err);
16083
16164
  dispatch({
16084
16165
  type: SET_COUPON_ERROR,
16085
16166
  payload: getErrorMessages(err)
@@ -16716,13 +16797,13 @@ const PaymentMethodContainerWithoutStripe = ({
16716
16797
 
16717
16798
 
16718
16799
  const resolveTaxCalculation = () => {
16719
- var _window$Pelcro$site$r5;
16800
+ var _window$Pelcro$site$r6;
16720
16801
 
16721
16802
  if (type === "invoicePayment") {
16722
16803
  return new Promise(resolve => resolve());
16723
16804
  }
16724
16805
 
16725
- const taxesEnabled = (_window$Pelcro$site$r5 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r5 === void 0 ? void 0 : _window$Pelcro$site$r5.taxes_enabled;
16806
+ const taxesEnabled = (_window$Pelcro$site$r6 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r6 === void 0 ? void 0 : _window$Pelcro$site$r6.taxes_enabled;
16726
16807
  return new Promise((resolve, reject) => {
16727
16808
  // resolve early if taxes isn't enabled
16728
16809
  if (!taxesEnabled) {
@@ -17081,12 +17162,17 @@ const UnwrappedForm = es_12(PaymentMethodContainerWithoutStripe);
17081
17162
 
17082
17163
  const PaymentMethodContainer = props => {
17083
17164
  const [isStripeLoaded, setIsStripeLoaded] = React.useState(Boolean(window.Stripe));
17165
+ const {
17166
+ whenUserReady
17167
+ } = usePelcro.getStore();
17084
17168
  React.useEffect(() => {
17085
- if (!window.Stripe) {
17086
- document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
17087
- setIsStripeLoaded(true);
17088
- });
17089
- }
17169
+ whenUserReady(() => {
17170
+ if (!window.Stripe) {
17171
+ document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
17172
+ setIsStripeLoaded(true);
17173
+ });
17174
+ }
17175
+ });
17090
17176
  }, []);
17091
17177
 
17092
17178
  if (isStripeLoaded) {
package/dist/index.esm.js CHANGED
@@ -10501,35 +10501,38 @@ const showInvoiceDetailsFromUrl = () => {
10501
10501
  isAuthenticated,
10502
10502
  setInvoice,
10503
10503
  whenUserReady,
10504
+ whenSiteReady,
10504
10505
  switchView
10505
10506
  } = usePelcro.getStore();
10506
- whenUserReady(() => {
10507
- const invoiceId = window.Pelcro.helpers.getURLParameter("id");
10508
- const wasSetSuccessfully = setInvoice(invoiceId);
10509
-
10510
- if (!wasSetSuccessfully) {
10511
- const errorMessage = i18next.t("messages:invalidInvoice", {
10512
- returnObjects: true
10513
- });
10514
- return notify.error(errorMessage);
10515
- }
10516
-
10507
+ whenSiteReady(() => {
10517
10508
  if (!isAuthenticated()) {
10518
10509
  return switchView("login");
10519
10510
  }
10520
10511
 
10521
- const {
10522
- invoice
10523
- } = usePelcro.getStore();
10512
+ whenUserReady(() => {
10513
+ const invoiceId = window.Pelcro.helpers.getURLParameter("id");
10514
+ const wasSetSuccessfully = setInvoice(invoiceId);
10524
10515
 
10525
- if (invoice.total === 0) {
10526
- const errorMessage = i18next.t("messages:zeroTotalInvoice", {
10527
- returnObjects: true
10528
- });
10529
- return notify.error(errorMessage);
10530
- }
10516
+ if (!wasSetSuccessfully) {
10517
+ const errorMessage = i18next.t("messages:invalidInvoice", {
10518
+ returnObjects: true
10519
+ });
10520
+ return notify.error(errorMessage);
10521
+ }
10522
+
10523
+ const {
10524
+ invoice
10525
+ } = usePelcro.getStore();
10526
+
10527
+ if (invoice.total === 0) {
10528
+ const errorMessage = i18next.t("messages:zeroTotalInvoice", {
10529
+ returnObjects: true
10530
+ });
10531
+ return notify.error(errorMessage);
10532
+ }
10531
10533
 
10532
- return switchView("invoice-details");
10534
+ return switchView("invoice-details");
10535
+ });
10533
10536
  });
10534
10537
  };
10535
10538
 
@@ -12209,17 +12212,18 @@ function LoginModal({
12209
12212
  const onSuccess = res => {
12210
12213
  var _props$onSuccess;
12211
12214
 
12212
- (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res); // If this is an invoice
12213
-
12214
- if (invoice) {
12215
- switchView("invoice-details");
12216
- }
12215
+ (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res);
12217
12216
 
12218
12217
  if (window.Pelcro.paywall.isArticleRestricted()) {
12219
12218
  initPaywalls();
12220
12219
  }
12221
12220
 
12222
12221
  resetView();
12222
+ const viewFromURL = getStableViewID(window.Pelcro.helpers.getURLParameter("view"));
12223
+
12224
+ if (viewFromURL === "invoice-details") {
12225
+ initViewFromURL();
12226
+ }
12223
12227
  };
12224
12228
 
12225
12229
  const onCreateAccountClick = () => {
@@ -15371,6 +15375,9 @@ const PaymentMethodContainerWithoutStripe = ({
15371
15375
  selectedPaymentMethodId,
15372
15376
  couponCode
15373
15377
  } = usePelcro();
15378
+ const {
15379
+ whenUserReady
15380
+ } = usePelcro.getStore();
15374
15381
  const product = (_props$product = props.product) !== null && _props$product !== void 0 ? _props$product : pelcroStore.product;
15375
15382
  const plan = (_props$plan = props.plan) !== null && _props$plan !== void 0 ? _props$plan : pelcroStore.plan;
15376
15383
  const subscriptionIdToRenew = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : pelcroStore.subscriptionIdToRenew;
@@ -15379,6 +15386,149 @@ const PaymentMethodContainerWithoutStripe = ({
15379
15386
  const isGift = (_props$isGift = props.isGift) !== null && _props$isGift !== void 0 ? _props$isGift : pelcroStore.isGift;
15380
15387
  const isRenewingGift = (_props$isRenewingGift = props.isRenewingGift) !== null && _props$isRenewingGift !== void 0 ? _props$isRenewingGift : pelcroStore.isRenewingGift;
15381
15388
  const invoice = (_props$invoice = props.invoice) !== null && _props$invoice !== void 0 ? _props$invoice : pelcroStore.invoice;
15389
+ const cardProcessor = getSiteCardProcessor();
15390
+ useState(Boolean(window.Tapjsli));
15391
+ useEffect(() => {
15392
+ whenUserReady(() => {
15393
+ if (cardProcessor === "tap" && !window.Tapjsli) {
15394
+ window.Pelcro.helpers.loadSDK("https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js", "tap-bluebird");
15395
+ window.Pelcro.helpers.loadSDK("https://secure.gosell.io/js/sdk/tap.min.js", "tap-sdk");
15396
+ document.querySelector('script[src="https://secure.gosell.io/js/sdk/tap.min.js"]').addEventListener("load", () => {
15397
+ var _window$Pelcro$site$r;
15398
+
15399
+ console.log("From event listener: Tap script is loaded");
15400
+ const tapKey = window.Tapjsli((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings.publishable_key);
15401
+ let elements = tapKey.elements({});
15402
+ let style = {
15403
+ base: {
15404
+ color: "#535353",
15405
+ lineHeight: "18px",
15406
+ fontFamily: "sans-serif",
15407
+ fontSmoothing: "antialiased",
15408
+ fontSize: "16px",
15409
+ "::placeholder": {
15410
+ color: "rgba(0, 0, 0, 0.26)",
15411
+ fontSize: "15px"
15412
+ }
15413
+ },
15414
+ invalid: {
15415
+ color: "red"
15416
+ }
15417
+ }; // input labels/placeholders
15418
+
15419
+ let labels = {
15420
+ cardNumber: "Card Number",
15421
+ expirationDate: "MM/YY",
15422
+ cvv: "CVV",
15423
+ cardHolder: "Card Holder Name"
15424
+ }; //payment options
15425
+
15426
+ let paymentOptions = {
15427
+ labels: labels,
15428
+ TextDirection: "ltr"
15429
+ }; //create element, pass style and payment options
15430
+
15431
+ let card = elements.create("card", {
15432
+ style: style
15433
+ }, paymentOptions); //mount element
15434
+
15435
+ card.mount("#tapPaymentIframe"); //card change event listener
15436
+
15437
+ card.addEventListener("change", function (event) {// if (event.error_interactive) {
15438
+ // onFailure(event.error_interactive);
15439
+ // return dispatch({
15440
+ // type: SHOW_ALERT,
15441
+ // payload: {
15442
+ // type: "error",
15443
+ // content: getErrorMessages(event.error_interactive)
15444
+ // }
15445
+ // });
15446
+ // } else {
15447
+ // dispatch({
15448
+ // type: SHOW_ALERT,
15449
+ // payload: { type: "error", content: "" }
15450
+ // });
15451
+ // }
15452
+ // let displayError = document.getElementById("error-handler");
15453
+ // if (event.error) {
15454
+ // displayError.textContent = event.error.message;
15455
+ // } else {
15456
+ // displayError.textContent = "";
15457
+ // }
15458
+ });
15459
+ tapInstanceRef.current = tapKey;
15460
+ tapInstanceCard.current = card;
15461
+ });
15462
+ }
15463
+
15464
+ if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
15465
+ var _window$Pelcro$site$r2;
15466
+
15467
+ console.log("window.Tapjsli script is loaded");
15468
+ const tapKey = window.Tapjsli((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.tap_gateway_settings.publishable_key);
15469
+ let elements = tapKey.elements({});
15470
+ let style = {
15471
+ base: {
15472
+ color: "#535353",
15473
+ lineHeight: "18px",
15474
+ fontFamily: "sans-serif",
15475
+ fontSmoothing: "antialiased",
15476
+ fontSize: "16px",
15477
+ "::placeholder": {
15478
+ color: "rgba(0, 0, 0, 0.26)",
15479
+ fontSize: "15px"
15480
+ }
15481
+ },
15482
+ invalid: {
15483
+ color: "red"
15484
+ }
15485
+ }; // input labels/placeholders
15486
+
15487
+ let labels = {
15488
+ cardNumber: "Card Number",
15489
+ expirationDate: "MM/YY",
15490
+ cvv: "CVV",
15491
+ cardHolder: "Card Holder Name"
15492
+ }; //payment options
15493
+
15494
+ let paymentOptions = {
15495
+ labels: labels,
15496
+ TextDirection: "ltr"
15497
+ }; //create element, pass style and payment options
15498
+
15499
+ let card = elements.create("card", {
15500
+ style: style
15501
+ }, paymentOptions); //mount element
15502
+
15503
+ card.mount("#tapPaymentIframe"); //card change event listener
15504
+
15505
+ card.addEventListener("change", function (event) {// if (event.error_interactive) {
15506
+ // onFailure(event.error_interactive);
15507
+ // return dispatch({
15508
+ // type: SHOW_ALERT,
15509
+ // payload: {
15510
+ // type: "error",
15511
+ // content: getErrorMessages(event.error_interactive)
15512
+ // }
15513
+ // });
15514
+ // } else {
15515
+ // dispatch({
15516
+ // type: SHOW_ALERT,
15517
+ // payload: { type: "error", content: "" }
15518
+ // });
15519
+ // }
15520
+ // let displayError = document.getElementById("error-handler");
15521
+ // if (event.error) {
15522
+ // displayError.textContent = event.error.message;
15523
+ // } else {
15524
+ // displayError.textContent = "";
15525
+ // }
15526
+ });
15527
+ tapInstanceRef.current = tapKey;
15528
+ tapInstanceCard.current = card;
15529
+ }
15530
+ });
15531
+ }, [selectedPaymentMethodId]);
15382
15532
  useEffect(() => {
15383
15533
  if (window.Pelcro.coupon.getFromUrl()) {
15384
15534
  dispatch({
@@ -15834,13 +15984,11 @@ const PaymentMethodContainerWithoutStripe = ({
15834
15984
  const tapInstanceRef = React__default.useRef(null);
15835
15985
  const tapInstanceCard = React__default.useRef(null);
15836
15986
  useEffect(() => {
15837
- const cardProcessor = getSiteCardProcessor();
15838
-
15839
15987
  if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
15840
- var _window$Pelcro$site$r, _window$Pelcro$site$r2;
15988
+ var _window$Pelcro$site$r3, _window$Pelcro$site$r4;
15841
15989
 
15842
- const payPageId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings.pay_page_id;
15843
- const reportGroup = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.vantiv_gateway_settings.report_group;
15990
+ const payPageId = (_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.vantiv_gateway_settings.pay_page_id;
15991
+ const reportGroup = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.vantiv_gateway_settings.report_group;
15844
15992
  vantivInstanceRef.current = new window.EprotectIframeClient({
15845
15993
  paypageId: payPageId,
15846
15994
  reportGroup: reportGroup,
@@ -15862,72 +16010,6 @@ const PaymentMethodContainerWithoutStripe = ({
15862
16010
  }
15863
16011
  });
15864
16012
  }
15865
-
15866
- if (cardProcessor === "tap" && !selectedPaymentMethodId) {
15867
- var _window$Pelcro$site$r3;
15868
-
15869
- const tapKey = Tapjsli((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.tap_gateway_settings.publishable_key);
15870
- let elements = tapKey.elements({});
15871
- let style = {
15872
- base: {
15873
- color: "#535353",
15874
- lineHeight: "18px",
15875
- fontFamily: "sans-serif",
15876
- fontSmoothing: "antialiased",
15877
- fontSize: "16px",
15878
- "::placeholder": {
15879
- color: "rgba(0, 0, 0, 0.26)",
15880
- fontSize: "15px"
15881
- }
15882
- },
15883
- invalid: {
15884
- color: "red"
15885
- }
15886
- }; // input labels/placeholders
15887
-
15888
- let labels = {
15889
- cardNumber: "Card Number",
15890
- expirationDate: "MM/YY",
15891
- cvv: "CVV",
15892
- cardHolder: "Card Holder Name"
15893
- }; //payment options
15894
-
15895
- let paymentOptions = {
15896
- labels: labels,
15897
- TextDirection: "ltr"
15898
- }; //create element, pass style and payment options
15899
-
15900
- let card = elements.create("card", {
15901
- style: style
15902
- }, paymentOptions); //mount element
15903
-
15904
- card.mount("#tapPaymentIframe"); //card change event listener
15905
-
15906
- card.addEventListener("change", function (event) {// if (event.error_interactive) {
15907
- // onFailure(event.error_interactive);
15908
- // return dispatch({
15909
- // type: SHOW_ALERT,
15910
- // payload: {
15911
- // type: "error",
15912
- // content: getErrorMessages(event.error_interactive)
15913
- // }
15914
- // });
15915
- // } else {
15916
- // dispatch({
15917
- // type: SHOW_ALERT,
15918
- // payload: { type: "error", content: "" }
15919
- // });
15920
- // }
15921
- // let displayError = document.getElementById("error-handler");
15922
- // if (event.error) {
15923
- // displayError.textContent = event.error.message;
15924
- // } else {
15925
- // displayError.textContent = "";
15926
- // }
15927
- });
15928
- tapInstanceRef.current = tapKey;
15929
- tapInstanceCard.current = card;
15930
- }
15931
16013
  }, [selectedPaymentMethodId]);
15932
16014
 
15933
16015
  const initPaymentRequest = (state, dispatch) => {
@@ -16000,9 +16082,9 @@ const PaymentMethodContainerWithoutStripe = ({
16000
16082
 
16001
16083
 
16002
16084
  const updateTotalAmountWithTax = () => {
16003
- var _window$Pelcro$site$r4;
16085
+ var _window$Pelcro$site$r5;
16004
16086
 
16005
- const taxesEnabled = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.taxes_enabled;
16087
+ const taxesEnabled = (_window$Pelcro$site$r5 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r5 === void 0 ? void 0 : _window$Pelcro$site$r5.taxes_enabled;
16006
16088
 
16007
16089
  if (taxesEnabled && type === "createPayment") {
16008
16090
  dispatch({
@@ -16049,7 +16131,6 @@ const PaymentMethodContainerWithoutStripe = ({
16049
16131
 
16050
16132
  if (err) {
16051
16133
  onFailure(err);
16052
- console.error(err);
16053
16134
  dispatch({
16054
16135
  type: SET_COUPON_ERROR,
16055
16136
  payload: getErrorMessages(err)
@@ -16686,13 +16767,13 @@ const PaymentMethodContainerWithoutStripe = ({
16686
16767
 
16687
16768
 
16688
16769
  const resolveTaxCalculation = () => {
16689
- var _window$Pelcro$site$r5;
16770
+ var _window$Pelcro$site$r6;
16690
16771
 
16691
16772
  if (type === "invoicePayment") {
16692
16773
  return new Promise(resolve => resolve());
16693
16774
  }
16694
16775
 
16695
- const taxesEnabled = (_window$Pelcro$site$r5 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r5 === void 0 ? void 0 : _window$Pelcro$site$r5.taxes_enabled;
16776
+ const taxesEnabled = (_window$Pelcro$site$r6 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r6 === void 0 ? void 0 : _window$Pelcro$site$r6.taxes_enabled;
16696
16777
  return new Promise((resolve, reject) => {
16697
16778
  // resolve early if taxes isn't enabled
16698
16779
  if (!taxesEnabled) {
@@ -17051,12 +17132,17 @@ const UnwrappedForm = es_12(PaymentMethodContainerWithoutStripe);
17051
17132
 
17052
17133
  const PaymentMethodContainer = props => {
17053
17134
  const [isStripeLoaded, setIsStripeLoaded] = useState(Boolean(window.Stripe));
17135
+ const {
17136
+ whenUserReady
17137
+ } = usePelcro.getStore();
17054
17138
  useEffect(() => {
17055
- if (!window.Stripe) {
17056
- document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
17057
- setIsStripeLoaded(true);
17058
- });
17059
- }
17139
+ whenUserReady(() => {
17140
+ if (!window.Stripe) {
17141
+ document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
17142
+ setIsStripeLoaded(true);
17143
+ });
17144
+ }
17145
+ });
17060
17146
  }, []);
17061
17147
 
17062
17148
  if (isStripeLoaded) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pelcro/react-pelcro-js",
3
3
  "description": "Pelcro's React UI Elements",
4
- "version": "3.10.1-beta.2",
4
+ "version": "3.10.1-beta.20",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "main": "dist/index.cjs.js",