@pelcro/react-pelcro-js 3.29.0 → 3.30.0

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
@@ -11603,6 +11603,7 @@ const loadPaymentSDKs = () => {
11603
11603
  pure_1(window.Pelcro.environment.stripe);
11604
11604
  }
11605
11605
  });
11606
+ window.Pelcro.helpers.loadSDK("https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js", "apple-pay-sdk");
11606
11607
 
11607
11608
  // Load PayPal SDKs
11608
11609
  const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
@@ -11616,6 +11617,11 @@ const loadPaymentSDKs = () => {
11616
11617
  if (!window.jQuery) {
11617
11618
  window.Pelcro.helpers.loadSDK("https://code.jquery.com/jquery-3.6.0.slim.min.js", "vantiv-jquery-sdk");
11618
11619
  }
11620
+ window.Pelcro.helpers.loadSDK("https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "vantiv-jquery-sdk");
11621
+ const eProtectApi3PreLiveURL = "https://request.eprotect.vantivprelive.com/eProtect/eProtect-api3.js";
11622
+ const eProtectApi3ProductionURL = "https://request.eprotect.vantivcnp.com/eProtect/eProtect-api3.js";
11623
+ const eProtectApi3scriptUrlToUse = window.Pelcro.site.read().vantiv_gateway_settings.environment === "production" ? eProtectApi3ProductionURL : eProtectApi3PreLiveURL;
11624
+ window.Pelcro.helpers.loadSDK(eProtectApi3scriptUrlToUse, "vantiv-eprotect-api");
11619
11625
  if (!window.EprotectIframeClient) {
11620
11626
  const PRELIVE_URL = "https://request.eprotect.vantivprelive.com/eProtect/js/eProtect-iframe-client.min.js";
11621
11627
  const PRODUCTION_URL = "https://request.eprotect.vantivcnp.com/eProtect/js/eProtect-iframe-client3.min.js";
@@ -12419,6 +12425,7 @@ const LOADING = "LOADING";
12419
12425
  const SUBMIT_PAYMENT = "SUBMIT_PAYMENT";
12420
12426
  const SUBSCRIBE = "CREATE_SUBSCRIPTION";
12421
12427
  const HANDLE_PAYPAL_SUBSCRIPTION = "HANDLE_PAYPAL_SUBSCRIPTION";
12428
+ const HANDLE_APPLEPAY_SUBSCRIPTION = "HANDLE_APPLEPAY_SUBSCRIPTION";
12422
12429
  const DISABLE_COUPON_BUTTON = "DISABLE_COUPON_BUTTON";
12423
12430
  const APPLY_COUPON_CODE = "APPLY_COUPON_CODE";
12424
12431
  const REMOVE_APPLIED_COUPON = "REMOVE_APPLIED_COUPON";
@@ -17335,7 +17342,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17335
17342
  updateTotalAmountWithTax();
17336
17343
  }, []);
17337
17344
 
17338
- /*====== Start Cybersource integration ========*/
17345
+ /* ====== Start Cybersource integration ======== */
17339
17346
  const cybersourceErrorHandle = err => {
17340
17347
  var _err$details, _err$details$response, _err$details$response2;
17341
17348
  if ((err === null || err === void 0 ? void 0 : (_err$details = err.details) === null || _err$details === void 0 ? void 0 : (_err$details$response = _err$details.responseStatus) === null || _err$details$response === void 0 ? void 0 : (_err$details$response2 = _err$details$response.details) === null || _err$details$response2 === void 0 ? void 0 : _err$details$response2.length) > 0) {
@@ -17604,9 +17611,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17604
17611
  });
17605
17612
  };
17606
17613
 
17607
- /*====== End Cybersource integration ========*/
17614
+ /* ====== End Cybersource integration ======== */
17608
17615
 
17609
- /*====== Start Tap integration ========*/
17616
+ /* ====== Start Tap integration ======== */
17610
17617
  const submitUsingTap = state => {
17611
17618
  var _ref3, _ref4, _ref5, _state$updatedPrice;
17612
17619
  const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -17870,28 +17877,28 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17870
17877
  cardHolder: "Card Holder Name"
17871
17878
  };
17872
17879
 
17873
- //payment options
17880
+ // payment options
17874
17881
  let paymentOptions = {
17875
17882
  labels: labels,
17876
17883
  TextDirection: "ltr"
17877
17884
  };
17878
17885
 
17879
- //create element, pass style and payment options
17886
+ // create element, pass style and payment options
17880
17887
  let card = elements.create("card", {
17881
17888
  style: style
17882
17889
  }, paymentOptions);
17883
17890
 
17884
- //mount element
17891
+ // mount element
17885
17892
  card.mount("#tapPaymentIframe");
17886
17893
 
17887
- //card change event listener
17894
+ // card change event listener
17888
17895
  card.addEventListener("change", function (event) {
17889
- //If needed
17896
+ // If needed
17890
17897
  });
17891
17898
  tapInstanceRef.current = tapKey;
17892
17899
  tapInstanceCard.current = card;
17893
17900
  };
17894
- /*====== End Tap integration ========*/
17901
+ /* ====== End Tap integration ======== */
17895
17902
 
17896
17903
  const submitUsingVantiv = state => {
17897
17904
  const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -18079,7 +18086,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18079
18086
  }
18080
18087
  }, [selectedPaymentMethodId]);
18081
18088
 
18082
- //Trigger the handleVantivPayment method when a vantivePaymentRequest is present
18089
+ // Trigger the handleVantivPayment method when a vantivPaymentRequest is present
18083
18090
  React.useEffect(() => {
18084
18091
  if (vantivPaymentRequest) {
18085
18092
  handleVantivPayment(vantivPaymentRequest, updatedCouponCode);
@@ -18226,7 +18233,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18226
18233
  if (err) {
18227
18234
  onFailure(err);
18228
18235
 
18229
- //reset the coupon code in local state
18236
+ // reset the coupon code in local state
18230
18237
  setUpdatedCouponCode("");
18231
18238
  dispatch({
18232
18239
  type: SET_COUPON_ERROR,
@@ -18287,7 +18294,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18287
18294
  payload: res.data.coupon
18288
18295
  });
18289
18296
 
18290
- //set the coupon code in local state to be able to use with Vantiv
18297
+ // set the coupon code in local state to be able to use with Vantiv
18291
18298
  setUpdatedCouponCode(res.data.coupon.code);
18292
18299
  dispatch({
18293
18300
  type: SET_PERCENT_OFF,
@@ -18360,7 +18367,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18360
18367
  const removeAppliedCoupon = state => {
18361
18368
  state.couponCode = "";
18362
18369
 
18363
- //reset the coupon code in local state
18370
+ // reset the coupon code in local state
18364
18371
  setUpdatedCouponCode("");
18365
18372
  dispatch({
18366
18373
  type: SET_COUPON_ERROR,
@@ -19100,6 +19107,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19100
19107
  handlePaypalSubscription(state, action.payload);
19101
19108
  }
19102
19109
  });
19110
+ case HANDLE_APPLEPAY_SUBSCRIPTION:
19111
+ return lib_5(state, (state, dispatch) => {
19112
+ setVantivPaymentRequest(action.payload);
19113
+ });
19103
19114
  case SET_UPDATED_PRICE:
19104
19115
  return lib_7({
19105
19116
  ...state,
@@ -20213,6 +20224,330 @@ const OrderCreateFreeButton = _ref => {
20213
20224
  }, otherProps), t("labels.submit"));
20214
20225
  };
20215
20226
 
20227
+ /**
20228
+ * ApplePayButton component
20229
+ * @return {JSX}
20230
+ */
20231
+ const ApplePayButton = _ref => {
20232
+ var _window$Pelcro$site$r;
20233
+ let {
20234
+ onClick,
20235
+ props,
20236
+ ...otherProps
20237
+ } = _ref;
20238
+ const {
20239
+ dispatch,
20240
+ state
20241
+ } = React.useContext(store$k);
20242
+ const {
20243
+ plan,
20244
+ invoice,
20245
+ order
20246
+ } = usePelcro();
20247
+ const {
20248
+ pay_page_id: payPageId,
20249
+ report_group: reportGroup,
20250
+ apple_pay_merchant_id: ApplePayMerchantId,
20251
+ apple_pay_enabled: ApplePayEnabled
20252
+ } = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings;
20253
+ const getOrderInfo = () => {
20254
+ if (!order) {
20255
+ return {
20256
+ price: null,
20257
+ currency: null,
20258
+ label: null
20259
+ };
20260
+ }
20261
+ const isQuickPurchase = !Array.isArray(order);
20262
+ if (isQuickPurchase) {
20263
+ return {
20264
+ price: order.price * order.quantity,
20265
+ currency: order.currency,
20266
+ label: order.name
20267
+ };
20268
+ }
20269
+ if (order.length === 0) {
20270
+ return {
20271
+ price: null,
20272
+ currency: null,
20273
+ label: null
20274
+ };
20275
+ }
20276
+ const price = order.reduce((total, item) => total + item.price * item.quantity, 0);
20277
+ return {
20278
+ price,
20279
+ currency: order[0].currency,
20280
+ label: "Order"
20281
+ };
20282
+ };
20283
+ const orderPrice = getOrderInfo().price;
20284
+ const orderCurrency = getOrderInfo().currency;
20285
+ const orderLabel = getOrderInfo().label;
20286
+ React.useEffect(() => {
20287
+ if (window.ApplePaySession) {
20288
+ // Indicates whether the device supports Apple Pay and whether the user has an active card in Wallet.
20289
+ // eslint-disable-next-line no-undef
20290
+ const promise = ApplePaySession.canMakePaymentsWithActiveCard(ApplePayMerchantId);
20291
+ promise.then(function (canMakePayments) {
20292
+ if (canMakePayments && ApplePayEnabled) {
20293
+ // Display Apple Pay Buttons here…
20294
+ const pelcroApplyPayButton = document.getElementById("pelcro-apple-pay-button");
20295
+ if (pelcroApplyPayButton) {
20296
+ pelcroApplyPayButton.style.display = "block";
20297
+ }
20298
+ console.log("ApplePay canMakePayments function: ", canMakePayments);
20299
+ }
20300
+ });
20301
+ } else {
20302
+ console.error("ApplePay is not available on this browser");
20303
+ }
20304
+ }, []);
20305
+ React.useEffect(() => {
20306
+ function onApplePayButtonClicked() {
20307
+ var _ref2, _ref3, _ref4, _ref5, _state$updatedPrice, _props$plan, _window, _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$l;
20308
+ // eslint-disable-next-line no-undef
20309
+ if (!ApplePaySession) {
20310
+ return;
20311
+ }
20312
+ const updatedPrice = (_ref2 = (_ref3 = (_ref4 = (_ref5 = (_state$updatedPrice = state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : props === null || props === void 0 ? void 0 : (_props$plan = props.plan) === null || _props$plan === void 0 ? void 0 : _props$plan.amount) !== null && _ref5 !== void 0 ? _ref5 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref4 !== void 0 ? _ref4 : orderPrice) !== null && _ref3 !== void 0 ? _ref3 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref2 !== void 0 ? _ref2 : null;
20313
+ const getCurrencyCode = () => {
20314
+ if (plan) {
20315
+ return plan === null || plan === void 0 ? void 0 : plan.currency.toUpperCase();
20316
+ } else if (order) {
20317
+ return orderCurrency.toUpperCase();
20318
+ } else if (invoice) {
20319
+ return invoice === null || invoice === void 0 ? void 0 : invoice.currency.toUpperCase();
20320
+ }
20321
+ };
20322
+ dispatch({
20323
+ type: DISABLE_SUBMIT,
20324
+ payload: true
20325
+ });
20326
+
20327
+ // Define ApplePayPaymentRequest
20328
+ // @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/creating_an_apple_pay_session
20329
+ const ApplePayPaymentRequest = {
20330
+ countryCode: ((_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : (_window$Pelcro$user$l = _window$Pelcro$user.location) === null || _window$Pelcro$user$l === void 0 ? void 0 : _window$Pelcro$user$l.countryCode) || "US",
20331
+ currencyCode: getCurrencyCode(),
20332
+ merchantCapabilities: ["supports3DS"],
20333
+ supportedNetworks: ["visa", "masterCard", "amex", "discover"],
20334
+ total: {
20335
+ label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || orderLabel || `invoice #${invoice === null || invoice === void 0 ? void 0 : invoice.id}`,
20336
+ type: "final",
20337
+ amount: updatedPrice / 100
20338
+ }
20339
+ };
20340
+
20341
+ // Create ApplePaySession
20342
+ // @todo - Clarify supported version parameter
20343
+ // @odo - Apple Pay demo uses version 6 (https://applepaydemo.apple.com/)
20344
+ const session = new ApplePaySession(3, ApplePayPaymentRequest); // eslint-disable-line no-undef
20345
+
20346
+ // @todo - Detect whether web browser supports a particular Apple Pay version.
20347
+ // @see https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778014-supportsversion
20348
+
20349
+ session.onvalidatemerchant = async event => {
20350
+ const {
20351
+ validationURL
20352
+ } = event;
20353
+ // Call your own server to request a new merchant session.
20354
+ window.Pelcro.payment.startSession({
20355
+ auth_token: window.Pelcro.user.read().auth_token,
20356
+ site_id: window.Pelcro.siteid,
20357
+ validation_url: validationURL
20358
+ }, (err, res) => {
20359
+ if (err) {
20360
+ // Handle any errors during merchant validation
20361
+ session.abort();
20362
+ return dispatch({
20363
+ type: SHOW_ALERT,
20364
+ payload: {
20365
+ type: "error",
20366
+ content: getErrorMessages(err)
20367
+ }
20368
+ });
20369
+ }
20370
+ // Complete merchant validation with the merchant session object
20371
+ const merchantSession = res;
20372
+ session.completeMerchantValidation(merchantSession);
20373
+ });
20374
+ };
20375
+ session.onpaymentmethodselected = event => {
20376
+ // Define ApplePayPaymentMethodUpdate based on the selected payment method.
20377
+ // No updates or errors are needed, pass an empty object.
20378
+ const newTotal = {
20379
+ label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || orderLabel || `invoice #${invoice === null || invoice === void 0 ? void 0 : invoice.id}`,
20380
+ type: "final",
20381
+ amount: updatedPrice / 100
20382
+ };
20383
+ const newLineItems = [{
20384
+ label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || orderLabel || `invoice #${invoice === null || invoice === void 0 ? void 0 : invoice.id}`,
20385
+ type: "final",
20386
+ amount: updatedPrice / 100
20387
+ }];
20388
+ session.completePaymentMethodSelection(newTotal, newLineItems);
20389
+ };
20390
+
20391
+ // TODO: Check if onshippingmethodselected it should be implemented
20392
+ // session.onshippingmethodselected = (event) => {
20393
+ // // Define ApplePayShippingMethodUpdate based on the selected shipping method.
20394
+ // // No updates or errors are needed, pass an empty object.
20395
+ // const newTotal = {
20396
+ // label: plan?.nickname || orderLabel || `invoice #${invoice?.id}`,
20397
+ // type: "final",
20398
+ // amount: updatedPrice / 100
20399
+ // };
20400
+
20401
+ // const newLineItems = [
20402
+ // {
20403
+ // label: plan?.nickname || orderLabel || `invoice #${invoice?.id}`,
20404
+ // type: "final",
20405
+ // amount: updatedPrice / 100
20406
+ // }
20407
+ // ];
20408
+
20409
+ // session.completeShippingMethodSelection(newTotal, newLineItems);
20410
+ // };
20411
+
20412
+ // TODO: Check if onshippingcontactselected it should be implemented
20413
+ // session.onshippingcontactselected = (event) => {
20414
+ // // Define ApplePayShippingContactUpdate based on the selected shipping contact.
20415
+ // const update = {};
20416
+ // session.completeShippingContactSelection(update);
20417
+ // };
20418
+
20419
+ session.onpaymentauthorized = event => {
20420
+ // Define ApplePayPaymentAuthorizationResult
20421
+ const result = {
20422
+ status: ApplePaySession.STATUS_SUCCESS // eslint-disable-line no-undef
20423
+ };
20424
+
20425
+ const {
20426
+ paymentData
20427
+ } = event.payment.token;
20428
+ const {
20429
+ data,
20430
+ signature,
20431
+ version
20432
+ } = paymentData;
20433
+ const {
20434
+ ephemeralPublicKey,
20435
+ publicKeyHash,
20436
+ transactionId
20437
+ } = paymentData.header;
20438
+ const applePayToken = {
20439
+ data: data,
20440
+ signature: signature,
20441
+ version: version,
20442
+ header: {
20443
+ ephemeralPublicKey: ephemeralPublicKey,
20444
+ publicKeyHash: publicKeyHash,
20445
+ transactionId: transactionId
20446
+ }
20447
+ };
20448
+ const orderId = `pelcro-${new Date().getTime()}`;
20449
+ const eProtectRequest = {
20450
+ paypageId: payPageId,
20451
+ reportGroup: reportGroup,
20452
+ orderId: orderId,
20453
+ id: orderId,
20454
+ applepay: applePayToken,
20455
+ url: "https://request.eprotect.vantivprelive.com"
20456
+ };
20457
+
20458
+ // successCallback function to handle the response from WorldPay.
20459
+ function successCallback(vantivResponse) {
20460
+ const {
20461
+ expDate
20462
+ } = vantivResponse;
20463
+ const expMonth = expDate.substring(0, 2);
20464
+ const expYear = expDate.substring(2);
20465
+ const vantivPaymentRequest = {
20466
+ ...vantivResponse,
20467
+ expMonth: expMonth,
20468
+ expYear: expYear,
20469
+ applePay: true
20470
+ };
20471
+
20472
+ // Process the registrationId or continue with further payment processing.
20473
+ dispatch({
20474
+ type: HANDLE_APPLEPAY_SUBSCRIPTION,
20475
+ payload: vantivPaymentRequest
20476
+ });
20477
+ dispatch({
20478
+ type: LOADING,
20479
+ payload: true
20480
+ });
20481
+ session.completePayment(result);
20482
+ }
20483
+
20484
+ // errorCallback function to handle any errors that may occur during the tokenization process.
20485
+ function errorCallback(error) {
20486
+ console.error("Error retrieving Registration ID:", error);
20487
+ // Handle error appropriately.
20488
+ }
20489
+ // errorCallback function to handle any errors that may occur during the tokenization process.
20490
+ function timeoutCallback() {
20491
+ console.error("eProtect Timeout");
20492
+ // Handle error appropriately.
20493
+ }
20494
+
20495
+ // eslint-disable-next-line no-undef
20496
+ new eProtect().sendToEprotect(eProtectRequest, {}, successCallback, errorCallback, timeoutCallback, 15000);
20497
+ };
20498
+
20499
+ // TODO: Check if oncouponcodechanged it should be implemented
20500
+ // session.oncouponcodechanged = (event) => {
20501
+ // // Define ApplePayCouponCodeUpdate
20502
+ // const newTotal = calculateNewTotal(event.couponCode);
20503
+ // const newLineItems = calculateNewLineItems(event.couponCode);
20504
+ // const newShippingMethods = calculateNewShippingMethods(
20505
+ // event.couponCode
20506
+ // );
20507
+ // const errors = calculateErrors(event.couponCode);
20508
+
20509
+ // session.completeCouponCodeChange({
20510
+ // newTotal: newTotal,
20511
+ // newLineItems: newLineItems,
20512
+ // newShippingMethods: newShippingMethods,
20513
+ // errors: errors
20514
+ // });
20515
+ // };
20516
+
20517
+ session.oncancel = event => {
20518
+ // Payment cancelled by WebKit
20519
+ dispatch({
20520
+ type: LOADING,
20521
+ payload: false
20522
+ });
20523
+ dispatch({
20524
+ type: DISABLE_SUBMIT,
20525
+ payload: false
20526
+ });
20527
+ };
20528
+ session.begin();
20529
+ }
20530
+ const pelcroApplyPayButton = document.getElementById("pelcro-apple-pay-button");
20531
+ if (pelcroApplyPayButton) {
20532
+ pelcroApplyPayButton.addEventListener("click", onApplePayButtonClicked);
20533
+ }
20534
+ return () => {
20535
+ if (pelcroApplyPayButton) {
20536
+ pelcroApplyPayButton.removeEventListener("click", onApplePayButtonClicked);
20537
+ }
20538
+ };
20539
+ }, [state.updatedPrice]);
20540
+ return /*#__PURE__*/React__default['default'].createElement("apple-pay-button", {
20541
+ id: "pelcro-apple-pay-button",
20542
+ style: {
20543
+ display: "none"
20544
+ },
20545
+ buttonstyle: "black",
20546
+ type: "plain",
20547
+ locale: "en-US"
20548
+ });
20549
+ };
20550
+
20216
20551
  /**
20217
20552
  *
20218
20553
  */
@@ -20227,6 +20562,7 @@ function PaymentMethodView(_ref) {
20227
20562
  showExternalPaymentMethods,
20228
20563
  showSubscriptionButton,
20229
20564
  showOrderButton,
20565
+ showApplePayButton,
20230
20566
  order
20231
20567
  } = _ref;
20232
20568
  const {
@@ -20293,7 +20629,7 @@ function PaymentMethodView(_ref) {
20293
20629
  className: "plc-mb-2"
20294
20630
  }, /*#__PURE__*/React__default['default'].createElement(CouponCode, null), /*#__PURE__*/React__default['default'].createElement(DiscountedPrice, null)), /*#__PURE__*/React__default['default'].createElement(TaxAmount, null), /*#__PURE__*/React__default['default'].createElement("div", {
20295
20631
  className: "plc-grid plc-mt-4 plc-gap-y-2"
20296
- }, /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : null)))));
20632
+ }, /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : null, showApplePayButton && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ApplePayButton, null)) : null)))));
20297
20633
  }
20298
20634
 
20299
20635
  const SubscriptionRenewView = _ref => {
@@ -20344,6 +20680,7 @@ const SubscriptionRenewView = _ref => {
20344
20680
  type: "createPayment",
20345
20681
  showCoupon: true,
20346
20682
  showExternalPaymentMethods: false,
20683
+ showApplePayButton: true,
20347
20684
  onSuccess: onSuccess,
20348
20685
  onGiftRenewalSuccess: onGiftRenewalSuccess,
20349
20686
  onFailure: onFailure,
@@ -21716,6 +22053,7 @@ const SubscriptionCreateView = _ref => {
21716
22053
  type: "createPayment",
21717
22054
  showCoupon: true,
21718
22055
  showExternalPaymentMethods: true,
22056
+ showApplePayButton: true,
21719
22057
  onSuccess: onSuccess,
21720
22058
  onFailure: onFailure,
21721
22059
  showSubscriptionButton: showSubscriptionButton
@@ -24328,6 +24666,7 @@ function PaymentMethodUpdateView(props) {
24328
24666
  type: "updatePaymentSource",
24329
24667
  showCoupon: false,
24330
24668
  showExternalPaymentMethods: false,
24669
+ showApplePayButton: false,
24331
24670
  onDisplay: props.onDisplay,
24332
24671
  onFailure: props.onFailure,
24333
24672
  onSuccess: props.onSuccess
@@ -25481,7 +25820,9 @@ const CartRemoveItemButton = _ref => {
25481
25820
  "data-key": itemId,
25482
25821
  icon: /*#__PURE__*/React__default['default'].createElement(SvgXIcon, {
25483
25822
  "aria-hidden": "true",
25484
- focusable: "false"
25823
+ focusable: "false",
25824
+ height: "20",
25825
+ width: "20"
25485
25826
  }),
25486
25827
  className: "plc-bg-transparent plc-w-9 plc-h-9 plc-p-2",
25487
25828
  onClick: () => {
@@ -25751,6 +26092,7 @@ const OrderCreateView = props => {
25751
26092
  type: "orderCreate",
25752
26093
  showCoupon: true,
25753
26094
  showExternalPaymentMethods: false,
26095
+ showApplePayButton: true,
25754
26096
  showOrderButton: showOrderButton,
25755
26097
  order: order
25756
26098
  }, props))));
@@ -32072,7 +32414,8 @@ const InvoicePaymentView = props => {
32072
32414
  }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, Object.assign({
32073
32415
  type: "invoicePayment",
32074
32416
  showCoupon: false,
32075
- showExternalPaymentMethods: true
32417
+ showExternalPaymentMethods: true,
32418
+ showApplePayButton: true
32076
32419
  }, props))));
32077
32420
  };
32078
32421
 
@@ -33734,6 +34077,7 @@ exports.AddressUpdateTextInput = AddressUpdateTextInput;
33734
34077
  exports.AddressUpdateView = AddressUpdateView;
33735
34078
  exports.Alert = AlertWithContext;
33736
34079
  exports.AlertElement = Alert;
34080
+ exports.ApplePayButton = ApplePayButton;
33737
34081
  exports.ApplyCouponButton = ApplyCouponButton;
33738
34082
  exports.Auth0LoginButton = Auth0LoginButton;
33739
34083
  exports.Badge = Badge;
package/dist/index.esm.js CHANGED
@@ -11573,6 +11573,7 @@ const loadPaymentSDKs = () => {
11573
11573
  pure_1(window.Pelcro.environment.stripe);
11574
11574
  }
11575
11575
  });
11576
+ window.Pelcro.helpers.loadSDK("https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js", "apple-pay-sdk");
11576
11577
 
11577
11578
  // Load PayPal SDKs
11578
11579
  const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
@@ -11586,6 +11587,11 @@ const loadPaymentSDKs = () => {
11586
11587
  if (!window.jQuery) {
11587
11588
  window.Pelcro.helpers.loadSDK("https://code.jquery.com/jquery-3.6.0.slim.min.js", "vantiv-jquery-sdk");
11588
11589
  }
11590
+ window.Pelcro.helpers.loadSDK("https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "vantiv-jquery-sdk");
11591
+ const eProtectApi3PreLiveURL = "https://request.eprotect.vantivprelive.com/eProtect/eProtect-api3.js";
11592
+ const eProtectApi3ProductionURL = "https://request.eprotect.vantivcnp.com/eProtect/eProtect-api3.js";
11593
+ const eProtectApi3scriptUrlToUse = window.Pelcro.site.read().vantiv_gateway_settings.environment === "production" ? eProtectApi3ProductionURL : eProtectApi3PreLiveURL;
11594
+ window.Pelcro.helpers.loadSDK(eProtectApi3scriptUrlToUse, "vantiv-eprotect-api");
11589
11595
  if (!window.EprotectIframeClient) {
11590
11596
  const PRELIVE_URL = "https://request.eprotect.vantivprelive.com/eProtect/js/eProtect-iframe-client.min.js";
11591
11597
  const PRODUCTION_URL = "https://request.eprotect.vantivcnp.com/eProtect/js/eProtect-iframe-client3.min.js";
@@ -12389,6 +12395,7 @@ const LOADING = "LOADING";
12389
12395
  const SUBMIT_PAYMENT = "SUBMIT_PAYMENT";
12390
12396
  const SUBSCRIBE = "CREATE_SUBSCRIPTION";
12391
12397
  const HANDLE_PAYPAL_SUBSCRIPTION = "HANDLE_PAYPAL_SUBSCRIPTION";
12398
+ const HANDLE_APPLEPAY_SUBSCRIPTION = "HANDLE_APPLEPAY_SUBSCRIPTION";
12392
12399
  const DISABLE_COUPON_BUTTON = "DISABLE_COUPON_BUTTON";
12393
12400
  const APPLY_COUPON_CODE = "APPLY_COUPON_CODE";
12394
12401
  const REMOVE_APPLIED_COUPON = "REMOVE_APPLIED_COUPON";
@@ -17305,7 +17312,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17305
17312
  updateTotalAmountWithTax();
17306
17313
  }, []);
17307
17314
 
17308
- /*====== Start Cybersource integration ========*/
17315
+ /* ====== Start Cybersource integration ======== */
17309
17316
  const cybersourceErrorHandle = err => {
17310
17317
  var _err$details, _err$details$response, _err$details$response2;
17311
17318
  if ((err === null || err === void 0 ? void 0 : (_err$details = err.details) === null || _err$details === void 0 ? void 0 : (_err$details$response = _err$details.responseStatus) === null || _err$details$response === void 0 ? void 0 : (_err$details$response2 = _err$details$response.details) === null || _err$details$response2 === void 0 ? void 0 : _err$details$response2.length) > 0) {
@@ -17574,9 +17581,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17574
17581
  });
17575
17582
  };
17576
17583
 
17577
- /*====== End Cybersource integration ========*/
17584
+ /* ====== End Cybersource integration ======== */
17578
17585
 
17579
- /*====== Start Tap integration ========*/
17586
+ /* ====== Start Tap integration ======== */
17580
17587
  const submitUsingTap = state => {
17581
17588
  var _ref3, _ref4, _ref5, _state$updatedPrice;
17582
17589
  const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -17840,28 +17847,28 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17840
17847
  cardHolder: "Card Holder Name"
17841
17848
  };
17842
17849
 
17843
- //payment options
17850
+ // payment options
17844
17851
  let paymentOptions = {
17845
17852
  labels: labels,
17846
17853
  TextDirection: "ltr"
17847
17854
  };
17848
17855
 
17849
- //create element, pass style and payment options
17856
+ // create element, pass style and payment options
17850
17857
  let card = elements.create("card", {
17851
17858
  style: style
17852
17859
  }, paymentOptions);
17853
17860
 
17854
- //mount element
17861
+ // mount element
17855
17862
  card.mount("#tapPaymentIframe");
17856
17863
 
17857
- //card change event listener
17864
+ // card change event listener
17858
17865
  card.addEventListener("change", function (event) {
17859
- //If needed
17866
+ // If needed
17860
17867
  });
17861
17868
  tapInstanceRef.current = tapKey;
17862
17869
  tapInstanceCard.current = card;
17863
17870
  };
17864
- /*====== End Tap integration ========*/
17871
+ /* ====== End Tap integration ======== */
17865
17872
 
17866
17873
  const submitUsingVantiv = state => {
17867
17874
  const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -18049,7 +18056,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18049
18056
  }
18050
18057
  }, [selectedPaymentMethodId]);
18051
18058
 
18052
- //Trigger the handleVantivPayment method when a vantivePaymentRequest is present
18059
+ // Trigger the handleVantivPayment method when a vantivPaymentRequest is present
18053
18060
  useEffect(() => {
18054
18061
  if (vantivPaymentRequest) {
18055
18062
  handleVantivPayment(vantivPaymentRequest, updatedCouponCode);
@@ -18196,7 +18203,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18196
18203
  if (err) {
18197
18204
  onFailure(err);
18198
18205
 
18199
- //reset the coupon code in local state
18206
+ // reset the coupon code in local state
18200
18207
  setUpdatedCouponCode("");
18201
18208
  dispatch({
18202
18209
  type: SET_COUPON_ERROR,
@@ -18257,7 +18264,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18257
18264
  payload: res.data.coupon
18258
18265
  });
18259
18266
 
18260
- //set the coupon code in local state to be able to use with Vantiv
18267
+ // set the coupon code in local state to be able to use with Vantiv
18261
18268
  setUpdatedCouponCode(res.data.coupon.code);
18262
18269
  dispatch({
18263
18270
  type: SET_PERCENT_OFF,
@@ -18330,7 +18337,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18330
18337
  const removeAppliedCoupon = state => {
18331
18338
  state.couponCode = "";
18332
18339
 
18333
- //reset the coupon code in local state
18340
+ // reset the coupon code in local state
18334
18341
  setUpdatedCouponCode("");
18335
18342
  dispatch({
18336
18343
  type: SET_COUPON_ERROR,
@@ -19070,6 +19077,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19070
19077
  handlePaypalSubscription(state, action.payload);
19071
19078
  }
19072
19079
  });
19080
+ case HANDLE_APPLEPAY_SUBSCRIPTION:
19081
+ return lib_5(state, (state, dispatch) => {
19082
+ setVantivPaymentRequest(action.payload);
19083
+ });
19073
19084
  case SET_UPDATED_PRICE:
19074
19085
  return lib_7({
19075
19086
  ...state,
@@ -20183,6 +20194,330 @@ const OrderCreateFreeButton = _ref => {
20183
20194
  }, otherProps), t("labels.submit"));
20184
20195
  };
20185
20196
 
20197
+ /**
20198
+ * ApplePayButton component
20199
+ * @return {JSX}
20200
+ */
20201
+ const ApplePayButton = _ref => {
20202
+ var _window$Pelcro$site$r;
20203
+ let {
20204
+ onClick,
20205
+ props,
20206
+ ...otherProps
20207
+ } = _ref;
20208
+ const {
20209
+ dispatch,
20210
+ state
20211
+ } = useContext(store$k);
20212
+ const {
20213
+ plan,
20214
+ invoice,
20215
+ order
20216
+ } = usePelcro();
20217
+ const {
20218
+ pay_page_id: payPageId,
20219
+ report_group: reportGroup,
20220
+ apple_pay_merchant_id: ApplePayMerchantId,
20221
+ apple_pay_enabled: ApplePayEnabled
20222
+ } = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings;
20223
+ const getOrderInfo = () => {
20224
+ if (!order) {
20225
+ return {
20226
+ price: null,
20227
+ currency: null,
20228
+ label: null
20229
+ };
20230
+ }
20231
+ const isQuickPurchase = !Array.isArray(order);
20232
+ if (isQuickPurchase) {
20233
+ return {
20234
+ price: order.price * order.quantity,
20235
+ currency: order.currency,
20236
+ label: order.name
20237
+ };
20238
+ }
20239
+ if (order.length === 0) {
20240
+ return {
20241
+ price: null,
20242
+ currency: null,
20243
+ label: null
20244
+ };
20245
+ }
20246
+ const price = order.reduce((total, item) => total + item.price * item.quantity, 0);
20247
+ return {
20248
+ price,
20249
+ currency: order[0].currency,
20250
+ label: "Order"
20251
+ };
20252
+ };
20253
+ const orderPrice = getOrderInfo().price;
20254
+ const orderCurrency = getOrderInfo().currency;
20255
+ const orderLabel = getOrderInfo().label;
20256
+ useEffect(() => {
20257
+ if (window.ApplePaySession) {
20258
+ // Indicates whether the device supports Apple Pay and whether the user has an active card in Wallet.
20259
+ // eslint-disable-next-line no-undef
20260
+ const promise = ApplePaySession.canMakePaymentsWithActiveCard(ApplePayMerchantId);
20261
+ promise.then(function (canMakePayments) {
20262
+ if (canMakePayments && ApplePayEnabled) {
20263
+ // Display Apple Pay Buttons here…
20264
+ const pelcroApplyPayButton = document.getElementById("pelcro-apple-pay-button");
20265
+ if (pelcroApplyPayButton) {
20266
+ pelcroApplyPayButton.style.display = "block";
20267
+ }
20268
+ console.log("ApplePay canMakePayments function: ", canMakePayments);
20269
+ }
20270
+ });
20271
+ } else {
20272
+ console.error("ApplePay is not available on this browser");
20273
+ }
20274
+ }, []);
20275
+ useEffect(() => {
20276
+ function onApplePayButtonClicked() {
20277
+ var _ref2, _ref3, _ref4, _ref5, _state$updatedPrice, _props$plan, _window, _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$l;
20278
+ // eslint-disable-next-line no-undef
20279
+ if (!ApplePaySession) {
20280
+ return;
20281
+ }
20282
+ const updatedPrice = (_ref2 = (_ref3 = (_ref4 = (_ref5 = (_state$updatedPrice = state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : props === null || props === void 0 ? void 0 : (_props$plan = props.plan) === null || _props$plan === void 0 ? void 0 : _props$plan.amount) !== null && _ref5 !== void 0 ? _ref5 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref4 !== void 0 ? _ref4 : orderPrice) !== null && _ref3 !== void 0 ? _ref3 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref2 !== void 0 ? _ref2 : null;
20283
+ const getCurrencyCode = () => {
20284
+ if (plan) {
20285
+ return plan === null || plan === void 0 ? void 0 : plan.currency.toUpperCase();
20286
+ } else if (order) {
20287
+ return orderCurrency.toUpperCase();
20288
+ } else if (invoice) {
20289
+ return invoice === null || invoice === void 0 ? void 0 : invoice.currency.toUpperCase();
20290
+ }
20291
+ };
20292
+ dispatch({
20293
+ type: DISABLE_SUBMIT,
20294
+ payload: true
20295
+ });
20296
+
20297
+ // Define ApplePayPaymentRequest
20298
+ // @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/creating_an_apple_pay_session
20299
+ const ApplePayPaymentRequest = {
20300
+ countryCode: ((_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : (_window$Pelcro$user$l = _window$Pelcro$user.location) === null || _window$Pelcro$user$l === void 0 ? void 0 : _window$Pelcro$user$l.countryCode) || "US",
20301
+ currencyCode: getCurrencyCode(),
20302
+ merchantCapabilities: ["supports3DS"],
20303
+ supportedNetworks: ["visa", "masterCard", "amex", "discover"],
20304
+ total: {
20305
+ label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || orderLabel || `invoice #${invoice === null || invoice === void 0 ? void 0 : invoice.id}`,
20306
+ type: "final",
20307
+ amount: updatedPrice / 100
20308
+ }
20309
+ };
20310
+
20311
+ // Create ApplePaySession
20312
+ // @todo - Clarify supported version parameter
20313
+ // @odo - Apple Pay demo uses version 6 (https://applepaydemo.apple.com/)
20314
+ const session = new ApplePaySession(3, ApplePayPaymentRequest); // eslint-disable-line no-undef
20315
+
20316
+ // @todo - Detect whether web browser supports a particular Apple Pay version.
20317
+ // @see https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778014-supportsversion
20318
+
20319
+ session.onvalidatemerchant = async event => {
20320
+ const {
20321
+ validationURL
20322
+ } = event;
20323
+ // Call your own server to request a new merchant session.
20324
+ window.Pelcro.payment.startSession({
20325
+ auth_token: window.Pelcro.user.read().auth_token,
20326
+ site_id: window.Pelcro.siteid,
20327
+ validation_url: validationURL
20328
+ }, (err, res) => {
20329
+ if (err) {
20330
+ // Handle any errors during merchant validation
20331
+ session.abort();
20332
+ return dispatch({
20333
+ type: SHOW_ALERT,
20334
+ payload: {
20335
+ type: "error",
20336
+ content: getErrorMessages(err)
20337
+ }
20338
+ });
20339
+ }
20340
+ // Complete merchant validation with the merchant session object
20341
+ const merchantSession = res;
20342
+ session.completeMerchantValidation(merchantSession);
20343
+ });
20344
+ };
20345
+ session.onpaymentmethodselected = event => {
20346
+ // Define ApplePayPaymentMethodUpdate based on the selected payment method.
20347
+ // No updates or errors are needed, pass an empty object.
20348
+ const newTotal = {
20349
+ label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || orderLabel || `invoice #${invoice === null || invoice === void 0 ? void 0 : invoice.id}`,
20350
+ type: "final",
20351
+ amount: updatedPrice / 100
20352
+ };
20353
+ const newLineItems = [{
20354
+ label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || orderLabel || `invoice #${invoice === null || invoice === void 0 ? void 0 : invoice.id}`,
20355
+ type: "final",
20356
+ amount: updatedPrice / 100
20357
+ }];
20358
+ session.completePaymentMethodSelection(newTotal, newLineItems);
20359
+ };
20360
+
20361
+ // TODO: Check if onshippingmethodselected it should be implemented
20362
+ // session.onshippingmethodselected = (event) => {
20363
+ // // Define ApplePayShippingMethodUpdate based on the selected shipping method.
20364
+ // // No updates or errors are needed, pass an empty object.
20365
+ // const newTotal = {
20366
+ // label: plan?.nickname || orderLabel || `invoice #${invoice?.id}`,
20367
+ // type: "final",
20368
+ // amount: updatedPrice / 100
20369
+ // };
20370
+
20371
+ // const newLineItems = [
20372
+ // {
20373
+ // label: plan?.nickname || orderLabel || `invoice #${invoice?.id}`,
20374
+ // type: "final",
20375
+ // amount: updatedPrice / 100
20376
+ // }
20377
+ // ];
20378
+
20379
+ // session.completeShippingMethodSelection(newTotal, newLineItems);
20380
+ // };
20381
+
20382
+ // TODO: Check if onshippingcontactselected it should be implemented
20383
+ // session.onshippingcontactselected = (event) => {
20384
+ // // Define ApplePayShippingContactUpdate based on the selected shipping contact.
20385
+ // const update = {};
20386
+ // session.completeShippingContactSelection(update);
20387
+ // };
20388
+
20389
+ session.onpaymentauthorized = event => {
20390
+ // Define ApplePayPaymentAuthorizationResult
20391
+ const result = {
20392
+ status: ApplePaySession.STATUS_SUCCESS // eslint-disable-line no-undef
20393
+ };
20394
+
20395
+ const {
20396
+ paymentData
20397
+ } = event.payment.token;
20398
+ const {
20399
+ data,
20400
+ signature,
20401
+ version
20402
+ } = paymentData;
20403
+ const {
20404
+ ephemeralPublicKey,
20405
+ publicKeyHash,
20406
+ transactionId
20407
+ } = paymentData.header;
20408
+ const applePayToken = {
20409
+ data: data,
20410
+ signature: signature,
20411
+ version: version,
20412
+ header: {
20413
+ ephemeralPublicKey: ephemeralPublicKey,
20414
+ publicKeyHash: publicKeyHash,
20415
+ transactionId: transactionId
20416
+ }
20417
+ };
20418
+ const orderId = `pelcro-${new Date().getTime()}`;
20419
+ const eProtectRequest = {
20420
+ paypageId: payPageId,
20421
+ reportGroup: reportGroup,
20422
+ orderId: orderId,
20423
+ id: orderId,
20424
+ applepay: applePayToken,
20425
+ url: "https://request.eprotect.vantivprelive.com"
20426
+ };
20427
+
20428
+ // successCallback function to handle the response from WorldPay.
20429
+ function successCallback(vantivResponse) {
20430
+ const {
20431
+ expDate
20432
+ } = vantivResponse;
20433
+ const expMonth = expDate.substring(0, 2);
20434
+ const expYear = expDate.substring(2);
20435
+ const vantivPaymentRequest = {
20436
+ ...vantivResponse,
20437
+ expMonth: expMonth,
20438
+ expYear: expYear,
20439
+ applePay: true
20440
+ };
20441
+
20442
+ // Process the registrationId or continue with further payment processing.
20443
+ dispatch({
20444
+ type: HANDLE_APPLEPAY_SUBSCRIPTION,
20445
+ payload: vantivPaymentRequest
20446
+ });
20447
+ dispatch({
20448
+ type: LOADING,
20449
+ payload: true
20450
+ });
20451
+ session.completePayment(result);
20452
+ }
20453
+
20454
+ // errorCallback function to handle any errors that may occur during the tokenization process.
20455
+ function errorCallback(error) {
20456
+ console.error("Error retrieving Registration ID:", error);
20457
+ // Handle error appropriately.
20458
+ }
20459
+ // errorCallback function to handle any errors that may occur during the tokenization process.
20460
+ function timeoutCallback() {
20461
+ console.error("eProtect Timeout");
20462
+ // Handle error appropriately.
20463
+ }
20464
+
20465
+ // eslint-disable-next-line no-undef
20466
+ new eProtect().sendToEprotect(eProtectRequest, {}, successCallback, errorCallback, timeoutCallback, 15000);
20467
+ };
20468
+
20469
+ // TODO: Check if oncouponcodechanged it should be implemented
20470
+ // session.oncouponcodechanged = (event) => {
20471
+ // // Define ApplePayCouponCodeUpdate
20472
+ // const newTotal = calculateNewTotal(event.couponCode);
20473
+ // const newLineItems = calculateNewLineItems(event.couponCode);
20474
+ // const newShippingMethods = calculateNewShippingMethods(
20475
+ // event.couponCode
20476
+ // );
20477
+ // const errors = calculateErrors(event.couponCode);
20478
+
20479
+ // session.completeCouponCodeChange({
20480
+ // newTotal: newTotal,
20481
+ // newLineItems: newLineItems,
20482
+ // newShippingMethods: newShippingMethods,
20483
+ // errors: errors
20484
+ // });
20485
+ // };
20486
+
20487
+ session.oncancel = event => {
20488
+ // Payment cancelled by WebKit
20489
+ dispatch({
20490
+ type: LOADING,
20491
+ payload: false
20492
+ });
20493
+ dispatch({
20494
+ type: DISABLE_SUBMIT,
20495
+ payload: false
20496
+ });
20497
+ };
20498
+ session.begin();
20499
+ }
20500
+ const pelcroApplyPayButton = document.getElementById("pelcro-apple-pay-button");
20501
+ if (pelcroApplyPayButton) {
20502
+ pelcroApplyPayButton.addEventListener("click", onApplePayButtonClicked);
20503
+ }
20504
+ return () => {
20505
+ if (pelcroApplyPayButton) {
20506
+ pelcroApplyPayButton.removeEventListener("click", onApplePayButtonClicked);
20507
+ }
20508
+ };
20509
+ }, [state.updatedPrice]);
20510
+ return /*#__PURE__*/React__default.createElement("apple-pay-button", {
20511
+ id: "pelcro-apple-pay-button",
20512
+ style: {
20513
+ display: "none"
20514
+ },
20515
+ buttonstyle: "black",
20516
+ type: "plain",
20517
+ locale: "en-US"
20518
+ });
20519
+ };
20520
+
20186
20521
  /**
20187
20522
  *
20188
20523
  */
@@ -20197,6 +20532,7 @@ function PaymentMethodView(_ref) {
20197
20532
  showExternalPaymentMethods,
20198
20533
  showSubscriptionButton,
20199
20534
  showOrderButton,
20535
+ showApplePayButton,
20200
20536
  order
20201
20537
  } = _ref;
20202
20538
  const {
@@ -20263,7 +20599,7 @@ function PaymentMethodView(_ref) {
20263
20599
  className: "plc-mb-2"
20264
20600
  }, /*#__PURE__*/React__default.createElement(CouponCode, null), /*#__PURE__*/React__default.createElement(DiscountedPrice, null)), /*#__PURE__*/React__default.createElement(TaxAmount, null), /*#__PURE__*/React__default.createElement("div", {
20265
20601
  className: "plc-grid plc-mt-4 plc-gap-y-2"
20266
- }, /*#__PURE__*/React__default.createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : null)))));
20602
+ }, /*#__PURE__*/React__default.createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : null, showApplePayButton && supportsVantiv ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ApplePayButton, null)) : null)))));
20267
20603
  }
20268
20604
 
20269
20605
  const SubscriptionRenewView = _ref => {
@@ -20314,6 +20650,7 @@ const SubscriptionRenewView = _ref => {
20314
20650
  type: "createPayment",
20315
20651
  showCoupon: true,
20316
20652
  showExternalPaymentMethods: false,
20653
+ showApplePayButton: true,
20317
20654
  onSuccess: onSuccess,
20318
20655
  onGiftRenewalSuccess: onGiftRenewalSuccess,
20319
20656
  onFailure: onFailure,
@@ -21686,6 +22023,7 @@ const SubscriptionCreateView = _ref => {
21686
22023
  type: "createPayment",
21687
22024
  showCoupon: true,
21688
22025
  showExternalPaymentMethods: true,
22026
+ showApplePayButton: true,
21689
22027
  onSuccess: onSuccess,
21690
22028
  onFailure: onFailure,
21691
22029
  showSubscriptionButton: showSubscriptionButton
@@ -24298,6 +24636,7 @@ function PaymentMethodUpdateView(props) {
24298
24636
  type: "updatePaymentSource",
24299
24637
  showCoupon: false,
24300
24638
  showExternalPaymentMethods: false,
24639
+ showApplePayButton: false,
24301
24640
  onDisplay: props.onDisplay,
24302
24641
  onFailure: props.onFailure,
24303
24642
  onSuccess: props.onSuccess
@@ -25451,7 +25790,9 @@ const CartRemoveItemButton = _ref => {
25451
25790
  "data-key": itemId,
25452
25791
  icon: /*#__PURE__*/React__default.createElement(SvgXIcon, {
25453
25792
  "aria-hidden": "true",
25454
- focusable: "false"
25793
+ focusable: "false",
25794
+ height: "20",
25795
+ width: "20"
25455
25796
  }),
25456
25797
  className: "plc-bg-transparent plc-w-9 plc-h-9 plc-p-2",
25457
25798
  onClick: () => {
@@ -25721,6 +26062,7 @@ const OrderCreateView = props => {
25721
26062
  type: "orderCreate",
25722
26063
  showCoupon: true,
25723
26064
  showExternalPaymentMethods: false,
26065
+ showApplePayButton: true,
25724
26066
  showOrderButton: showOrderButton,
25725
26067
  order: order
25726
26068
  }, props))));
@@ -32042,7 +32384,8 @@ const InvoicePaymentView = props => {
32042
32384
  }, /*#__PURE__*/React__default.createElement(PaymentMethodView, Object.assign({
32043
32385
  type: "invoicePayment",
32044
32386
  showCoupon: false,
32045
- showExternalPaymentMethods: true
32387
+ showExternalPaymentMethods: true,
32388
+ showApplePayButton: true
32046
32389
  }, props))));
32047
32390
  };
32048
32391
 
@@ -33669,4 +34012,4 @@ const QrCodeModal = _ref => {
33669
34012
  };
33670
34013
  QrCodeModal.viewId = "qrcode";
33671
34014
 
33672
- export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify$1 as notify, unauthenticatedButtons, usePelcro };
34015
+ export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplePayButton, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify$1 as notify, unauthenticatedButtons, usePelcro };
package/dist/pelcro.css CHANGED
@@ -1722,6 +1722,14 @@ in order to scope selectors under pelcro-root
1722
1722
  border-right: 0;
1723
1723
  }
1724
1724
 
1725
+ apple-pay-button {
1726
+ --apple-pay-button-width: 100%;
1727
+ --apple-pay-button-height: 48px;
1728
+ --apple-pay-button-border-radius: 0.25rem;
1729
+ --apple-pay-button-padding: 0px 0px;
1730
+ --apple-pay-button-box-sizing: border-box;
1731
+ }
1732
+
1725
1733
  /* utilities */
1726
1734
 
1727
1735
  .pelcro-root .plc-space-x-0 > :not([hidden]) ~ :not([hidden]) {
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.29.0",
4
+ "version": "3.30.0",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "main": "dist/index.cjs.js",