@pelcro/react-pelcro-js 3.49.0 → 3.50.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
@@ -17273,6 +17273,9 @@ class TapGateway {
17273
17273
  }
17274
17274
  }
17275
17275
 
17276
+ /**
17277
+ * Cybersource gateway strategy
17278
+ */
17276
17279
  /**
17277
17280
  * Cybersource gateway strategy
17278
17281
  */
@@ -17319,7 +17322,9 @@ class CybersourceGateway {
17319
17322
  quantity = 1,
17320
17323
  addressId,
17321
17324
  isExistingSource,
17322
- fingerprint_session_id
17325
+ fingerprint_session_id,
17326
+ cardExpirationMonth,
17327
+ cardExpirationYear
17323
17328
  } = options;
17324
17329
  const params = isExistingSource ? {
17325
17330
  source_id: token
@@ -17335,6 +17340,8 @@ class CybersourceGateway {
17335
17340
  coupon_code: couponCode,
17336
17341
  address_id: product.address_required ? addressId : null,
17337
17342
  fingerprint_session_id: fingerprint_session_id,
17343
+ card_expiration_month: cardExpirationMonth,
17344
+ card_expiration_year: cardExpirationYear,
17338
17345
  ...params
17339
17346
  }, (err, res) => {
17340
17347
  callback(err, res);
@@ -17351,7 +17358,9 @@ class CybersourceGateway {
17351
17358
  couponCode,
17352
17359
  product,
17353
17360
  addressId,
17354
- isExistingSource
17361
+ isExistingSource,
17362
+ cardExpirationMonth,
17363
+ cardExpirationYear
17355
17364
  } = options;
17356
17365
  const params = isExistingSource ? {
17357
17366
  source_id: token
@@ -17366,6 +17375,8 @@ class CybersourceGateway {
17366
17375
  campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
17367
17376
  subscription_id: subscriptionIdToRenew,
17368
17377
  address_id: product.address_required ? addressId : null,
17378
+ card_expiration_month: cardExpirationMonth,
17379
+ card_expiration_year: cardExpirationYear,
17369
17380
  ...params
17370
17381
  }, (err, res) => {
17371
17382
  callback(err, res);
@@ -17383,7 +17394,9 @@ class CybersourceGateway {
17383
17394
  giftRecipient,
17384
17395
  quantity = 1,
17385
17396
  addressId,
17386
- isExistingSource
17397
+ isExistingSource,
17398
+ cardExpirationMonth,
17399
+ cardExpirationYear
17387
17400
  } = options;
17388
17401
  const params = isExistingSource ? {
17389
17402
  source_id: token
@@ -17403,6 +17416,8 @@ class CybersourceGateway {
17403
17416
  gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
17404
17417
  gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
17405
17418
  address_id: product.address_required ? addressId : null,
17419
+ card_expiration_month: cardExpirationMonth,
17420
+ card_expiration_year: cardExpirationYear,
17406
17421
  ...params
17407
17422
  }, (err, res) => {
17408
17423
  callback(err, res);
@@ -17419,7 +17434,9 @@ class CybersourceGateway {
17419
17434
  plan,
17420
17435
  couponCode,
17421
17436
  addressId,
17422
- isExistingSource
17437
+ isExistingSource,
17438
+ cardExpirationMonth,
17439
+ cardExpirationYear
17423
17440
  } = options;
17424
17441
  const params = isExistingSource ? {
17425
17442
  source_id: token
@@ -17433,6 +17450,8 @@ class CybersourceGateway {
17433
17450
  coupon_code: couponCode,
17434
17451
  subscription_id: subscriptionIdToRenew,
17435
17452
  address_id: product.address_required ? addressId : null,
17453
+ card_expiration_month: cardExpirationMonth,
17454
+ card_expiration_year: cardExpirationYear,
17436
17455
  ...params
17437
17456
  }, (err, res) => {
17438
17457
  callback(err, res);
@@ -17447,7 +17466,9 @@ class CybersourceGateway {
17447
17466
  items,
17448
17467
  couponCode,
17449
17468
  addressId,
17450
- isExistingSource
17469
+ isExistingSource,
17470
+ cardExpirationMonth,
17471
+ cardExpirationYear
17451
17472
  } = options;
17452
17473
  const params = isExistingSource ? {
17453
17474
  source_id: token
@@ -17462,7 +17483,9 @@ class CybersourceGateway {
17462
17483
  ...params,
17463
17484
  ...(addressId && {
17464
17485
  address_id: addressId
17465
- })
17486
+ }),
17487
+ card_expiration_month: cardExpirationMonth,
17488
+ card_expiration_year: cardExpirationYear
17466
17489
  }, (err, res) => {
17467
17490
  callback(err, res);
17468
17491
  });
@@ -17869,7 +17892,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17869
17892
  }
17870
17893
  });
17871
17894
  }
17872
- handleCybersourcePayment(response.token, state);
17895
+ handleCybersourcePayment(response, state);
17873
17896
  });
17874
17897
  };
17875
17898
  function handleCybersourcePayment(paymentRequest, state) {
@@ -17887,7 +17910,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17887
17910
  window.Pelcro.source.create({
17888
17911
  auth_token: window.Pelcro.user.read().auth_token,
17889
17912
  token: paymentRequest,
17890
- gateway: "cybersource"
17913
+ gateway: "cybersource",
17914
+ cardExpirationMonth: state.month,
17915
+ cardExpirationYear: state.year
17891
17916
  }, (err, res) => {
17892
17917
  dispatch({
17893
17918
  type: DISABLE_SUBMIT,
@@ -17915,6 +17940,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17915
17940
  content: t("messages.sourceUpdated")
17916
17941
  }
17917
17942
  });
17943
+
17944
+ // Reinitialize Cybersource microform after successful payment
17945
+ setTimeout(() => {
17946
+ cybersourceInstanceRef.current = null;
17947
+ initCybersourceScript();
17948
+ }, 1000);
17918
17949
  onSuccess(res);
17919
17950
  } //
17920
17951
  );
@@ -17938,11 +17969,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17938
17969
  product,
17939
17970
  isExistingSource: isUsingExistingPaymentMethod,
17940
17971
  subscriptionIdToRenew,
17941
- addressId: selectedAddressId
17972
+ addressId: selectedAddressId,
17973
+ cardExpirationMonth: state.month,
17974
+ cardExpirationYear: state.year
17942
17975
  }, (err, res) => {
17943
17976
  if (err) {
17944
17977
  return handlePaymentError(err);
17945
17978
  }
17979
+
17980
+ // Reinitialize Cybersource microform after successful payment
17981
+ setTimeout(() => {
17982
+ cybersourceInstanceRef.current = null;
17983
+ initCybersourceScript();
17984
+ }, 1000);
17946
17985
  onSuccess(res);
17947
17986
  });
17948
17987
  } else if (giftSubscriprition) {
@@ -17955,11 +17994,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17955
17994
  product,
17956
17995
  isExistingSource: isUsingExistingPaymentMethod,
17957
17996
  giftRecipient,
17958
- addressId: selectedAddressId
17997
+ addressId: selectedAddressId,
17998
+ cardExpirationMonth: state.month,
17999
+ cardExpirationYear: state.year
17959
18000
  }, (err, res) => {
17960
18001
  if (err) {
17961
18002
  return handlePaymentError(err);
17962
18003
  }
18004
+
18005
+ // Reinitialize Cybersource microform after successful payment
18006
+ setTimeout(() => {
18007
+ cybersourceInstanceRef.current = null;
18008
+ initCybersourceScript();
18009
+ }, 1000);
17963
18010
  onSuccess(res);
17964
18011
  });
17965
18012
  } else if (renewSubscription) {
@@ -17972,11 +18019,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17972
18019
  product,
17973
18020
  isExistingSource: isUsingExistingPaymentMethod,
17974
18021
  subscriptionIdToRenew,
17975
- addressId: selectedAddressId
18022
+ addressId: selectedAddressId,
18023
+ cardExpirationMonth: state.month,
18024
+ cardExpirationYear: state.year
17976
18025
  }, (err, res) => {
17977
18026
  if (err) {
17978
18027
  return handlePaymentError(err);
17979
18028
  }
18029
+
18030
+ // Reinitialize Cybersource microform after successful payment
18031
+ setTimeout(() => {
18032
+ cybersourceInstanceRef.current = null;
18033
+ initCybersourceScript();
18034
+ }, 1000);
17980
18035
  onSuccess(res);
17981
18036
  });
17982
18037
  } else if (createSubscription) {
@@ -17989,22 +18044,27 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17989
18044
  product,
17990
18045
  isExistingSource: isUsingExistingPaymentMethod,
17991
18046
  addressId: selectedAddressId,
17992
- fingerprint_session_id: state.cyberSourceSessionId
18047
+ fingerprint_session_id: state.cyberSourceSessionId,
18048
+ cardExpirationMonth: state.month,
18049
+ cardExpirationYear: state.year
17993
18050
  }, (err, res) => {
17994
18051
  if (err) {
17995
18052
  return handlePaymentError(err);
17996
18053
  }
18054
+
18055
+ // Reinitialize Cybersource microform after successful payment
18056
+ setTimeout(() => {
18057
+ cybersourceInstanceRef.current = null;
18058
+ initCybersourceScript();
18059
+ }, 1000);
17997
18060
  onSuccess(res);
17998
18061
  });
17999
18062
  }
18000
18063
  }
18001
18064
  }
18002
- const tokenizeCard = (error, microformInstance) => {
18003
- if (error) {
18004
- return;
18005
- }
18006
- cybersourceInstanceRef.current = microformInstance;
18007
- };
18065
+
18066
+ // No longer needed - microform instance is stored directly in initCybersourceScript
18067
+
18008
18068
  const appendCybersourceFingerprintScripts = () => {
18009
18069
  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro$site$r4;
18010
18070
  const uniqueId = crypto.randomUUID();
@@ -18028,6 +18088,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18028
18088
  }
18029
18089
  };
18030
18090
  const initCybersourceScript = () => {
18091
+ // Clear existing card number field before reinitializing
18092
+ const cardNumberElement = document.querySelector("#cybersourceCardNumber");
18093
+ if (cardNumberElement) {
18094
+ cardNumberElement.innerHTML = "";
18095
+ }
18096
+
18031
18097
  // jwk api call
18032
18098
  window.Pelcro.payment.getJWK({
18033
18099
  auth_token: window.Pelcro.user.read().auth_token,
@@ -18052,34 +18118,56 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18052
18118
  });
18053
18119
  }
18054
18120
  const {
18055
- key: jwk
18121
+ key: jwk,
18122
+ captureContext,
18123
+ js_client
18056
18124
  } = res;
18057
- // SETUP MICROFORM
18058
- FLEX.microform({
18059
- keyId: jwk.kid,
18060
- keystore: jwk,
18061
- container: "#cybersourceCardNumber",
18062
- placeholder: "Card Number",
18063
- styles: {
18064
- input: {
18065
- "font-size": "14px",
18066
- "font-family": "helvetica, tahoma, calibri, sans-serif",
18067
- color: "#555"
18068
- },
18069
- ":focus": {
18070
- color: "blue"
18071
- },
18072
- ":disabled": {
18073
- cursor: "not-allowed"
18074
- },
18075
- valid: {
18076
- color: "#3c763d"
18077
- },
18078
- invalid: {
18079
- color: "#a94442"
18125
+
18126
+ // Load the SDK from the dynamic URL (if not already loaded)
18127
+ const existingScript = document.querySelector(`script[src="${js_client}"]`);
18128
+ if (!existingScript) {
18129
+ window.Pelcro.helpers.loadSDK(js_client, "cybersource-cdn");
18130
+ }
18131
+ const initializeMicroform = () => {
18132
+ // SETUP MICROFORM
18133
+ // eslint-disable-next-line no-undef
18134
+ const flex = new Flex(captureContext);
18135
+ const microform = flex.microform({
18136
+ styles: {
18137
+ input: {
18138
+ "font-size": "14px",
18139
+ "font-family": "helvetica, tahoma, calibri, sans-serif",
18140
+ color: "#555"
18141
+ },
18142
+ ":focus": {
18143
+ color: "blue"
18144
+ },
18145
+ ":disabled": {
18146
+ cursor: "not-allowed"
18147
+ },
18148
+ valid: {
18149
+ color: "#3c763d"
18150
+ },
18151
+ invalid: {
18152
+ color: "#a94442"
18153
+ }
18080
18154
  }
18081
- }
18082
- }, tokenizeCard);
18155
+ });
18156
+ const number = microform.createField("number", {
18157
+ placeholder: "Enter your card number"
18158
+ });
18159
+ number.load("#cybersourceCardNumber");
18160
+ cybersourceInstanceRef.current = microform;
18161
+ };
18162
+
18163
+ // Wait for SDK to load then initialize microform
18164
+ if (existingScript) {
18165
+ // Script already loaded, initialize immediately
18166
+ initializeMicroform();
18167
+ } else {
18168
+ // Wait for new script to load
18169
+ document.querySelector(`script[src="${js_client}"]`).addEventListener("load", initializeMicroform);
18170
+ }
18083
18171
  });
18084
18172
  };
18085
18173
 
@@ -19193,13 +19281,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19193
19281
  if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
19194
19282
  initTapScript();
19195
19283
  }
19196
- if (cardProcessor === "cybersource" && !selectedPaymentMethodId && !window.FLEX) {
19197
- window.Pelcro.helpers.loadSDK("https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js", "cybersource-cdn");
19198
- document.querySelector('script[src="https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js"]').addEventListener("load", () => {
19199
- initCybersourceScript();
19200
- });
19201
- }
19202
- if (cardProcessor === "cybersource" && !selectedPaymentMethodId && window.FLEX) {
19284
+ if (cardProcessor === "cybersource" && !selectedPaymentMethodId) {
19203
19285
  initCybersourceScript();
19204
19286
  }
19205
19287
  if (cardProcessor === "cybersource") {
@@ -19715,7 +19797,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19715
19797
  gift_recipient_last_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.lastName,
19716
19798
  gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
19717
19799
  gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
19718
- address_id: product.address_required ? selectedAddressId : null
19800
+ address_id: product.address_required ? selectedAddressId : null,
19801
+ metadata: props === null || props === void 0 ? void 0 : props.subCreateMetadata,
19802
+ cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
19803
+ cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
19719
19804
  }, (err, res) => {
19720
19805
  var _res$data;
19721
19806
  if (res !== null && res !== void 0 && (_res$data = res.data) !== null && _res$data !== void 0 && _res$data.setup_intent) {
@@ -19890,7 +19975,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19890
19975
  isExistingSource: Boolean(selectedPaymentMethodId),
19891
19976
  items: mappedOrderItems,
19892
19977
  addressId: selectedAddressId,
19893
- couponCode
19978
+ couponCode,
19979
+ cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
19980
+ cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
19894
19981
  }, (err, orderResponse) => {
19895
19982
  var _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro2$user$;
19896
19983
  if (err) {
@@ -20171,7 +20258,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
20171
20258
  campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
20172
20259
  ...(selectedAddressId && {
20173
20260
  address_id: selectedAddressId
20174
- })
20261
+ }),
20262
+ cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
20263
+ cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
20175
20264
  }, (err, res) => {
20176
20265
  if (err) {
20177
20266
  return handlePaymentError(err);
package/dist/index.esm.js CHANGED
@@ -17243,6 +17243,9 @@ class TapGateway {
17243
17243
  }
17244
17244
  }
17245
17245
 
17246
+ /**
17247
+ * Cybersource gateway strategy
17248
+ */
17246
17249
  /**
17247
17250
  * Cybersource gateway strategy
17248
17251
  */
@@ -17289,7 +17292,9 @@ class CybersourceGateway {
17289
17292
  quantity = 1,
17290
17293
  addressId,
17291
17294
  isExistingSource,
17292
- fingerprint_session_id
17295
+ fingerprint_session_id,
17296
+ cardExpirationMonth,
17297
+ cardExpirationYear
17293
17298
  } = options;
17294
17299
  const params = isExistingSource ? {
17295
17300
  source_id: token
@@ -17305,6 +17310,8 @@ class CybersourceGateway {
17305
17310
  coupon_code: couponCode,
17306
17311
  address_id: product.address_required ? addressId : null,
17307
17312
  fingerprint_session_id: fingerprint_session_id,
17313
+ card_expiration_month: cardExpirationMonth,
17314
+ card_expiration_year: cardExpirationYear,
17308
17315
  ...params
17309
17316
  }, (err, res) => {
17310
17317
  callback(err, res);
@@ -17321,7 +17328,9 @@ class CybersourceGateway {
17321
17328
  couponCode,
17322
17329
  product,
17323
17330
  addressId,
17324
- isExistingSource
17331
+ isExistingSource,
17332
+ cardExpirationMonth,
17333
+ cardExpirationYear
17325
17334
  } = options;
17326
17335
  const params = isExistingSource ? {
17327
17336
  source_id: token
@@ -17336,6 +17345,8 @@ class CybersourceGateway {
17336
17345
  campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
17337
17346
  subscription_id: subscriptionIdToRenew,
17338
17347
  address_id: product.address_required ? addressId : null,
17348
+ card_expiration_month: cardExpirationMonth,
17349
+ card_expiration_year: cardExpirationYear,
17339
17350
  ...params
17340
17351
  }, (err, res) => {
17341
17352
  callback(err, res);
@@ -17353,7 +17364,9 @@ class CybersourceGateway {
17353
17364
  giftRecipient,
17354
17365
  quantity = 1,
17355
17366
  addressId,
17356
- isExistingSource
17367
+ isExistingSource,
17368
+ cardExpirationMonth,
17369
+ cardExpirationYear
17357
17370
  } = options;
17358
17371
  const params = isExistingSource ? {
17359
17372
  source_id: token
@@ -17373,6 +17386,8 @@ class CybersourceGateway {
17373
17386
  gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
17374
17387
  gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
17375
17388
  address_id: product.address_required ? addressId : null,
17389
+ card_expiration_month: cardExpirationMonth,
17390
+ card_expiration_year: cardExpirationYear,
17376
17391
  ...params
17377
17392
  }, (err, res) => {
17378
17393
  callback(err, res);
@@ -17389,7 +17404,9 @@ class CybersourceGateway {
17389
17404
  plan,
17390
17405
  couponCode,
17391
17406
  addressId,
17392
- isExistingSource
17407
+ isExistingSource,
17408
+ cardExpirationMonth,
17409
+ cardExpirationYear
17393
17410
  } = options;
17394
17411
  const params = isExistingSource ? {
17395
17412
  source_id: token
@@ -17403,6 +17420,8 @@ class CybersourceGateway {
17403
17420
  coupon_code: couponCode,
17404
17421
  subscription_id: subscriptionIdToRenew,
17405
17422
  address_id: product.address_required ? addressId : null,
17423
+ card_expiration_month: cardExpirationMonth,
17424
+ card_expiration_year: cardExpirationYear,
17406
17425
  ...params
17407
17426
  }, (err, res) => {
17408
17427
  callback(err, res);
@@ -17417,7 +17436,9 @@ class CybersourceGateway {
17417
17436
  items,
17418
17437
  couponCode,
17419
17438
  addressId,
17420
- isExistingSource
17439
+ isExistingSource,
17440
+ cardExpirationMonth,
17441
+ cardExpirationYear
17421
17442
  } = options;
17422
17443
  const params = isExistingSource ? {
17423
17444
  source_id: token
@@ -17432,7 +17453,9 @@ class CybersourceGateway {
17432
17453
  ...params,
17433
17454
  ...(addressId && {
17434
17455
  address_id: addressId
17435
- })
17456
+ }),
17457
+ card_expiration_month: cardExpirationMonth,
17458
+ card_expiration_year: cardExpirationYear
17436
17459
  }, (err, res) => {
17437
17460
  callback(err, res);
17438
17461
  });
@@ -17839,7 +17862,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17839
17862
  }
17840
17863
  });
17841
17864
  }
17842
- handleCybersourcePayment(response.token, state);
17865
+ handleCybersourcePayment(response, state);
17843
17866
  });
17844
17867
  };
17845
17868
  function handleCybersourcePayment(paymentRequest, state) {
@@ -17857,7 +17880,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17857
17880
  window.Pelcro.source.create({
17858
17881
  auth_token: window.Pelcro.user.read().auth_token,
17859
17882
  token: paymentRequest,
17860
- gateway: "cybersource"
17883
+ gateway: "cybersource",
17884
+ cardExpirationMonth: state.month,
17885
+ cardExpirationYear: state.year
17861
17886
  }, (err, res) => {
17862
17887
  dispatch({
17863
17888
  type: DISABLE_SUBMIT,
@@ -17885,6 +17910,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17885
17910
  content: t("messages.sourceUpdated")
17886
17911
  }
17887
17912
  });
17913
+
17914
+ // Reinitialize Cybersource microform after successful payment
17915
+ setTimeout(() => {
17916
+ cybersourceInstanceRef.current = null;
17917
+ initCybersourceScript();
17918
+ }, 1000);
17888
17919
  onSuccess(res);
17889
17920
  } //
17890
17921
  );
@@ -17908,11 +17939,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17908
17939
  product,
17909
17940
  isExistingSource: isUsingExistingPaymentMethod,
17910
17941
  subscriptionIdToRenew,
17911
- addressId: selectedAddressId
17942
+ addressId: selectedAddressId,
17943
+ cardExpirationMonth: state.month,
17944
+ cardExpirationYear: state.year
17912
17945
  }, (err, res) => {
17913
17946
  if (err) {
17914
17947
  return handlePaymentError(err);
17915
17948
  }
17949
+
17950
+ // Reinitialize Cybersource microform after successful payment
17951
+ setTimeout(() => {
17952
+ cybersourceInstanceRef.current = null;
17953
+ initCybersourceScript();
17954
+ }, 1000);
17916
17955
  onSuccess(res);
17917
17956
  });
17918
17957
  } else if (giftSubscriprition) {
@@ -17925,11 +17964,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17925
17964
  product,
17926
17965
  isExistingSource: isUsingExistingPaymentMethod,
17927
17966
  giftRecipient,
17928
- addressId: selectedAddressId
17967
+ addressId: selectedAddressId,
17968
+ cardExpirationMonth: state.month,
17969
+ cardExpirationYear: state.year
17929
17970
  }, (err, res) => {
17930
17971
  if (err) {
17931
17972
  return handlePaymentError(err);
17932
17973
  }
17974
+
17975
+ // Reinitialize Cybersource microform after successful payment
17976
+ setTimeout(() => {
17977
+ cybersourceInstanceRef.current = null;
17978
+ initCybersourceScript();
17979
+ }, 1000);
17933
17980
  onSuccess(res);
17934
17981
  });
17935
17982
  } else if (renewSubscription) {
@@ -17942,11 +17989,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17942
17989
  product,
17943
17990
  isExistingSource: isUsingExistingPaymentMethod,
17944
17991
  subscriptionIdToRenew,
17945
- addressId: selectedAddressId
17992
+ addressId: selectedAddressId,
17993
+ cardExpirationMonth: state.month,
17994
+ cardExpirationYear: state.year
17946
17995
  }, (err, res) => {
17947
17996
  if (err) {
17948
17997
  return handlePaymentError(err);
17949
17998
  }
17999
+
18000
+ // Reinitialize Cybersource microform after successful payment
18001
+ setTimeout(() => {
18002
+ cybersourceInstanceRef.current = null;
18003
+ initCybersourceScript();
18004
+ }, 1000);
17950
18005
  onSuccess(res);
17951
18006
  });
17952
18007
  } else if (createSubscription) {
@@ -17959,22 +18014,27 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17959
18014
  product,
17960
18015
  isExistingSource: isUsingExistingPaymentMethod,
17961
18016
  addressId: selectedAddressId,
17962
- fingerprint_session_id: state.cyberSourceSessionId
18017
+ fingerprint_session_id: state.cyberSourceSessionId,
18018
+ cardExpirationMonth: state.month,
18019
+ cardExpirationYear: state.year
17963
18020
  }, (err, res) => {
17964
18021
  if (err) {
17965
18022
  return handlePaymentError(err);
17966
18023
  }
18024
+
18025
+ // Reinitialize Cybersource microform after successful payment
18026
+ setTimeout(() => {
18027
+ cybersourceInstanceRef.current = null;
18028
+ initCybersourceScript();
18029
+ }, 1000);
17967
18030
  onSuccess(res);
17968
18031
  });
17969
18032
  }
17970
18033
  }
17971
18034
  }
17972
- const tokenizeCard = (error, microformInstance) => {
17973
- if (error) {
17974
- return;
17975
- }
17976
- cybersourceInstanceRef.current = microformInstance;
17977
- };
18035
+
18036
+ // No longer needed - microform instance is stored directly in initCybersourceScript
18037
+
17978
18038
  const appendCybersourceFingerprintScripts = () => {
17979
18039
  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro$site$r4;
17980
18040
  const uniqueId = crypto.randomUUID();
@@ -17998,6 +18058,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
17998
18058
  }
17999
18059
  };
18000
18060
  const initCybersourceScript = () => {
18061
+ // Clear existing card number field before reinitializing
18062
+ const cardNumberElement = document.querySelector("#cybersourceCardNumber");
18063
+ if (cardNumberElement) {
18064
+ cardNumberElement.innerHTML = "";
18065
+ }
18066
+
18001
18067
  // jwk api call
18002
18068
  window.Pelcro.payment.getJWK({
18003
18069
  auth_token: window.Pelcro.user.read().auth_token,
@@ -18022,34 +18088,56 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18022
18088
  });
18023
18089
  }
18024
18090
  const {
18025
- key: jwk
18091
+ key: jwk,
18092
+ captureContext,
18093
+ js_client
18026
18094
  } = res;
18027
- // SETUP MICROFORM
18028
- FLEX.microform({
18029
- keyId: jwk.kid,
18030
- keystore: jwk,
18031
- container: "#cybersourceCardNumber",
18032
- placeholder: "Card Number",
18033
- styles: {
18034
- input: {
18035
- "font-size": "14px",
18036
- "font-family": "helvetica, tahoma, calibri, sans-serif",
18037
- color: "#555"
18038
- },
18039
- ":focus": {
18040
- color: "blue"
18041
- },
18042
- ":disabled": {
18043
- cursor: "not-allowed"
18044
- },
18045
- valid: {
18046
- color: "#3c763d"
18047
- },
18048
- invalid: {
18049
- color: "#a94442"
18095
+
18096
+ // Load the SDK from the dynamic URL (if not already loaded)
18097
+ const existingScript = document.querySelector(`script[src="${js_client}"]`);
18098
+ if (!existingScript) {
18099
+ window.Pelcro.helpers.loadSDK(js_client, "cybersource-cdn");
18100
+ }
18101
+ const initializeMicroform = () => {
18102
+ // SETUP MICROFORM
18103
+ // eslint-disable-next-line no-undef
18104
+ const flex = new Flex(captureContext);
18105
+ const microform = flex.microform({
18106
+ styles: {
18107
+ input: {
18108
+ "font-size": "14px",
18109
+ "font-family": "helvetica, tahoma, calibri, sans-serif",
18110
+ color: "#555"
18111
+ },
18112
+ ":focus": {
18113
+ color: "blue"
18114
+ },
18115
+ ":disabled": {
18116
+ cursor: "not-allowed"
18117
+ },
18118
+ valid: {
18119
+ color: "#3c763d"
18120
+ },
18121
+ invalid: {
18122
+ color: "#a94442"
18123
+ }
18050
18124
  }
18051
- }
18052
- }, tokenizeCard);
18125
+ });
18126
+ const number = microform.createField("number", {
18127
+ placeholder: "Enter your card number"
18128
+ });
18129
+ number.load("#cybersourceCardNumber");
18130
+ cybersourceInstanceRef.current = microform;
18131
+ };
18132
+
18133
+ // Wait for SDK to load then initialize microform
18134
+ if (existingScript) {
18135
+ // Script already loaded, initialize immediately
18136
+ initializeMicroform();
18137
+ } else {
18138
+ // Wait for new script to load
18139
+ document.querySelector(`script[src="${js_client}"]`).addEventListener("load", initializeMicroform);
18140
+ }
18053
18141
  });
18054
18142
  };
18055
18143
 
@@ -19163,13 +19251,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19163
19251
  if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
19164
19252
  initTapScript();
19165
19253
  }
19166
- if (cardProcessor === "cybersource" && !selectedPaymentMethodId && !window.FLEX) {
19167
- window.Pelcro.helpers.loadSDK("https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js", "cybersource-cdn");
19168
- document.querySelector('script[src="https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js"]').addEventListener("load", () => {
19169
- initCybersourceScript();
19170
- });
19171
- }
19172
- if (cardProcessor === "cybersource" && !selectedPaymentMethodId && window.FLEX) {
19254
+ if (cardProcessor === "cybersource" && !selectedPaymentMethodId) {
19173
19255
  initCybersourceScript();
19174
19256
  }
19175
19257
  if (cardProcessor === "cybersource") {
@@ -19685,7 +19767,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19685
19767
  gift_recipient_last_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.lastName,
19686
19768
  gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
19687
19769
  gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
19688
- address_id: product.address_required ? selectedAddressId : null
19770
+ address_id: product.address_required ? selectedAddressId : null,
19771
+ metadata: props === null || props === void 0 ? void 0 : props.subCreateMetadata,
19772
+ cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
19773
+ cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
19689
19774
  }, (err, res) => {
19690
19775
  var _res$data;
19691
19776
  if (res !== null && res !== void 0 && (_res$data = res.data) !== null && _res$data !== void 0 && _res$data.setup_intent) {
@@ -19860,7 +19945,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
19860
19945
  isExistingSource: Boolean(selectedPaymentMethodId),
19861
19946
  items: mappedOrderItems,
19862
19947
  addressId: selectedAddressId,
19863
- couponCode
19948
+ couponCode,
19949
+ cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
19950
+ cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
19864
19951
  }, (err, orderResponse) => {
19865
19952
  var _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro2$user$;
19866
19953
  if (err) {
@@ -20141,7 +20228,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
20141
20228
  campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
20142
20229
  ...(selectedAddressId && {
20143
20230
  address_id: selectedAddressId
20144
- })
20231
+ }),
20232
+ cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
20233
+ cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
20145
20234
  }, (err, res) => {
20146
20235
  if (err) {
20147
20236
  return handlePaymentError(err);
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.49.0",
4
+ "version": "3.50.0",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "main": "dist/index.cjs.js",