@pelcro/react-pelcro-js 3.26.0-beta.77 → 3.26.0-beta.78

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
@@ -18214,7 +18214,9 @@ class CybersourceGateway {
18214
18214
  quantity = 1,
18215
18215
  addressId,
18216
18216
  isExistingSource,
18217
- fingerprint_session_id
18217
+ fingerprint_session_id,
18218
+ cardExpirationMonth,
18219
+ cardExpirationYear
18218
18220
  } = options;
18219
18221
  const params = isExistingSource ? {
18220
18222
  source_id: token
@@ -18230,6 +18232,8 @@ class CybersourceGateway {
18230
18232
  coupon_code: couponCode,
18231
18233
  address_id: product.address_required ? addressId : null,
18232
18234
  fingerprint_session_id: fingerprint_session_id,
18235
+ card_expiration_month: cardExpirationMonth,
18236
+ card_expiration_year: cardExpirationYear,
18233
18237
  ...params
18234
18238
  }, (err, res) => {
18235
18239
  callback(err, res);
@@ -18246,7 +18250,9 @@ class CybersourceGateway {
18246
18250
  couponCode,
18247
18251
  product,
18248
18252
  addressId,
18249
- isExistingSource
18253
+ isExistingSource,
18254
+ cardExpirationMonth,
18255
+ cardExpirationYear
18250
18256
  } = options;
18251
18257
  const params = isExistingSource ? {
18252
18258
  source_id: token
@@ -18261,6 +18267,8 @@ class CybersourceGateway {
18261
18267
  campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
18262
18268
  subscription_id: subscriptionIdToRenew,
18263
18269
  address_id: product.address_required ? addressId : null,
18270
+ card_expiration_month: cardExpirationMonth,
18271
+ card_expiration_year: cardExpirationYear,
18264
18272
  ...params
18265
18273
  }, (err, res) => {
18266
18274
  callback(err, res);
@@ -18278,7 +18286,9 @@ class CybersourceGateway {
18278
18286
  giftRecipient,
18279
18287
  quantity = 1,
18280
18288
  addressId,
18281
- isExistingSource
18289
+ isExistingSource,
18290
+ cardExpirationMonth,
18291
+ cardExpirationYear
18282
18292
  } = options;
18283
18293
  const params = isExistingSource ? {
18284
18294
  source_id: token
@@ -18298,6 +18308,8 @@ class CybersourceGateway {
18298
18308
  gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
18299
18309
  gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
18300
18310
  address_id: product.address_required ? addressId : null,
18311
+ card_expiration_month: cardExpirationMonth,
18312
+ card_expiration_year: cardExpirationYear,
18301
18313
  ...params
18302
18314
  }, (err, res) => {
18303
18315
  callback(err, res);
@@ -18314,7 +18326,9 @@ class CybersourceGateway {
18314
18326
  plan,
18315
18327
  couponCode,
18316
18328
  addressId,
18317
- isExistingSource
18329
+ isExistingSource,
18330
+ cardExpirationMonth,
18331
+ cardExpirationYear
18318
18332
  } = options;
18319
18333
  const params = isExistingSource ? {
18320
18334
  source_id: token
@@ -18328,6 +18342,8 @@ class CybersourceGateway {
18328
18342
  coupon_code: couponCode,
18329
18343
  subscription_id: subscriptionIdToRenew,
18330
18344
  address_id: product.address_required ? addressId : null,
18345
+ card_expiration_month: cardExpirationMonth,
18346
+ card_expiration_year: cardExpirationYear,
18331
18347
  ...params
18332
18348
  }, (err, res) => {
18333
18349
  callback(err, res);
@@ -18342,7 +18358,9 @@ class CybersourceGateway {
18342
18358
  items,
18343
18359
  couponCode,
18344
18360
  addressId,
18345
- isExistingSource
18361
+ isExistingSource,
18362
+ cardExpirationMonth,
18363
+ cardExpirationYear
18346
18364
  } = options;
18347
18365
  const params = isExistingSource ? {
18348
18366
  source_id: token
@@ -18357,7 +18375,9 @@ class CybersourceGateway {
18357
18375
  ...params,
18358
18376
  ...(addressId && {
18359
18377
  address_id: addressId
18360
- })
18378
+ }),
18379
+ card_expiration_month: cardExpirationMonth,
18380
+ card_expiration_year: cardExpirationYear
18361
18381
  }, (err, res) => {
18362
18382
  callback(err, res);
18363
18383
  });
@@ -18798,7 +18818,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18798
18818
  }
18799
18819
  });
18800
18820
  }
18801
- handleCybersourcePayment(response.token, state);
18821
+ handleCybersourcePayment(response, state);
18802
18822
  });
18803
18823
  };
18804
18824
  function handleCybersourcePayment(paymentRequest, state) {
@@ -18816,7 +18836,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18816
18836
  window.Pelcro.source.create({
18817
18837
  auth_token: window.Pelcro.user.read().auth_token,
18818
18838
  token: paymentRequest,
18819
- gateway: "cybersource"
18839
+ gateway: "cybersource",
18840
+ cardExpirationMonth: state.month,
18841
+ cardExpirationYear: state.year
18820
18842
  }, (err, res) => {
18821
18843
  dispatch({
18822
18844
  type: DISABLE_SUBMIT,
@@ -18844,6 +18866,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18844
18866
  content: t("messages.sourceUpdated")
18845
18867
  }
18846
18868
  });
18869
+
18870
+ // Reinitialize Cybersource microform after successful payment
18871
+ setTimeout(() => {
18872
+ cybersourceInstanceRef.current = null;
18873
+ initCybersourceScript();
18874
+ }, 1000);
18847
18875
  onSuccess(res);
18848
18876
  } //
18849
18877
  );
@@ -18867,11 +18895,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18867
18895
  product,
18868
18896
  isExistingSource: isUsingExistingPaymentMethod,
18869
18897
  subscriptionIdToRenew,
18870
- addressId: selectedAddressId
18898
+ addressId: selectedAddressId,
18899
+ cardExpirationMonth: state.month,
18900
+ cardExpirationYear: state.year
18871
18901
  }, (err, res) => {
18872
18902
  if (err) {
18873
18903
  return handlePaymentError(err);
18874
18904
  }
18905
+
18906
+ // Reinitialize Cybersource microform after successful payment
18907
+ setTimeout(() => {
18908
+ cybersourceInstanceRef.current = null;
18909
+ initCybersourceScript();
18910
+ }, 1000);
18875
18911
  onSuccess(res);
18876
18912
  });
18877
18913
  } else if (giftSubscriprition) {
@@ -18884,11 +18920,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18884
18920
  product,
18885
18921
  isExistingSource: isUsingExistingPaymentMethod,
18886
18922
  giftRecipient,
18887
- addressId: selectedAddressId
18923
+ addressId: selectedAddressId,
18924
+ cardExpirationMonth: state.month,
18925
+ cardExpirationYear: state.year
18888
18926
  }, (err, res) => {
18889
18927
  if (err) {
18890
18928
  return handlePaymentError(err);
18891
18929
  }
18930
+
18931
+ // Reinitialize Cybersource microform after successful payment
18932
+ setTimeout(() => {
18933
+ cybersourceInstanceRef.current = null;
18934
+ initCybersourceScript();
18935
+ }, 1000);
18892
18936
  onSuccess(res);
18893
18937
  });
18894
18938
  } else if (renewSubscription) {
@@ -18901,11 +18945,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18901
18945
  product,
18902
18946
  isExistingSource: isUsingExistingPaymentMethod,
18903
18947
  subscriptionIdToRenew,
18904
- addressId: selectedAddressId
18948
+ addressId: selectedAddressId,
18949
+ cardExpirationMonth: state.month,
18950
+ cardExpirationYear: state.year
18905
18951
  }, (err, res) => {
18906
18952
  if (err) {
18907
18953
  return handlePaymentError(err);
18908
18954
  }
18955
+
18956
+ // Reinitialize Cybersource microform after successful payment
18957
+ setTimeout(() => {
18958
+ cybersourceInstanceRef.current = null;
18959
+ initCybersourceScript();
18960
+ }, 1000);
18909
18961
  onSuccess(res);
18910
18962
  });
18911
18963
  } else if (createSubscription) {
@@ -18918,22 +18970,27 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18918
18970
  product,
18919
18971
  isExistingSource: isUsingExistingPaymentMethod,
18920
18972
  addressId: selectedAddressId,
18921
- fingerprint_session_id: state.cyberSourceSessionId
18973
+ fingerprint_session_id: state.cyberSourceSessionId,
18974
+ cardExpirationMonth: state.month,
18975
+ cardExpirationYear: state.year
18922
18976
  }, (err, res) => {
18923
18977
  if (err) {
18924
18978
  return handlePaymentError(err);
18925
18979
  }
18980
+
18981
+ // Reinitialize Cybersource microform after successful payment
18982
+ setTimeout(() => {
18983
+ cybersourceInstanceRef.current = null;
18984
+ initCybersourceScript();
18985
+ }, 1000);
18926
18986
  onSuccess(res);
18927
18987
  });
18928
18988
  }
18929
18989
  }
18930
18990
  }
18931
- const tokenizeCard = (error, microformInstance) => {
18932
- if (error) {
18933
- return;
18934
- }
18935
- cybersourceInstanceRef.current = microformInstance;
18936
- };
18991
+
18992
+ // No longer needed - microform instance is stored directly in initCybersourceScript
18993
+
18937
18994
  const appendCybersourceFingerprintScripts = () => {
18938
18995
  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro$site$r4;
18939
18996
  const uniqueId = crypto.randomUUID();
@@ -18957,6 +19014,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18957
19014
  }
18958
19015
  };
18959
19016
  const initCybersourceScript = () => {
19017
+ // Clear existing card number field before reinitializing
19018
+ const cardNumberElement = document.querySelector("#cybersourceCardNumber");
19019
+ if (cardNumberElement) {
19020
+ cardNumberElement.innerHTML = "";
19021
+ }
19022
+
18960
19023
  // jwk api call
18961
19024
  window.Pelcro.payment.getJWK({
18962
19025
  auth_token: window.Pelcro.user.read().auth_token,
@@ -18981,35 +19044,56 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18981
19044
  });
18982
19045
  }
18983
19046
  const {
18984
- key: jwk
19047
+ key: jwk,
19048
+ captureContext,
19049
+ js_client
18985
19050
  } = res;
18986
- // SETUP MICROFORM
18987
- // eslint-disable-next-line no-undef
18988
- FLEX.microform({
18989
- keyId: jwk.kid,
18990
- keystore: jwk,
18991
- container: "#cybersourceCardNumber",
18992
- placeholder: "Card Number",
18993
- styles: {
18994
- input: {
18995
- "font-size": "14px",
18996
- "font-family": "helvetica, tahoma, calibri, sans-serif",
18997
- color: "#555"
18998
- },
18999
- ":focus": {
19000
- color: "blue"
19001
- },
19002
- ":disabled": {
19003
- cursor: "not-allowed"
19004
- },
19005
- valid: {
19006
- color: "#3c763d"
19007
- },
19008
- invalid: {
19009
- color: "#a94442"
19051
+
19052
+ // Load the SDK from the dynamic URL (if not already loaded)
19053
+ const existingScript = document.querySelector(`script[src="${js_client}"]`);
19054
+ if (!existingScript) {
19055
+ window.Pelcro.helpers.loadSDK(js_client, "cybersource-cdn");
19056
+ }
19057
+ const initializeMicroform = () => {
19058
+ // SETUP MICROFORM
19059
+ // eslint-disable-next-line no-undef
19060
+ const flex = new Flex(captureContext);
19061
+ const microform = flex.microform({
19062
+ styles: {
19063
+ input: {
19064
+ "font-size": "14px",
19065
+ "font-family": "helvetica, tahoma, calibri, sans-serif",
19066
+ color: "#555"
19067
+ },
19068
+ ":focus": {
19069
+ color: "blue"
19070
+ },
19071
+ ":disabled": {
19072
+ cursor: "not-allowed"
19073
+ },
19074
+ valid: {
19075
+ color: "#3c763d"
19076
+ },
19077
+ invalid: {
19078
+ color: "#a94442"
19079
+ }
19010
19080
  }
19011
- }
19012
- }, tokenizeCard);
19081
+ });
19082
+ const number = microform.createField("number", {
19083
+ placeholder: "Enter your card number"
19084
+ });
19085
+ number.load("#cybersourceCardNumber");
19086
+ cybersourceInstanceRef.current = microform;
19087
+ };
19088
+
19089
+ // Wait for SDK to load then initialize microform
19090
+ if (existingScript) {
19091
+ // Script already loaded, initialize immediately
19092
+ initializeMicroform();
19093
+ } else {
19094
+ // Wait for new script to load
19095
+ document.querySelector(`script[src="${js_client}"]`).addEventListener("load", initializeMicroform);
19096
+ }
19013
19097
  });
19014
19098
  };
19015
19099
 
@@ -20205,13 +20289,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
20205
20289
  if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
20206
20290
  initTapScript();
20207
20291
  }
20208
- if (cardProcessor === "cybersource" && !selectedPaymentMethodId && !window.FLEX) {
20209
- window.Pelcro.helpers.loadSDK("https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js", "cybersource-cdn");
20210
- document.querySelector('script[src="https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js"]').addEventListener("load", () => {
20211
- initCybersourceScript();
20212
- });
20213
- }
20214
- if (cardProcessor === "cybersource" && !selectedPaymentMethodId && window.FLEX) {
20292
+ if (cardProcessor === "cybersource" && !selectedPaymentMethodId) {
20215
20293
  initCybersourceScript();
20216
20294
  }
20217
20295
  if (cardProcessor === "cybersource") {
@@ -20810,7 +20888,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
20810
20888
  gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
20811
20889
  gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
20812
20890
  address_id: product.address_required ? selectedAddressId : null,
20813
- metadata: props === null || props === void 0 ? void 0 : props.subCreateMetadata
20891
+ metadata: props === null || props === void 0 ? void 0 : props.subCreateMetadata,
20892
+ cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
20893
+ cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
20814
20894
  }, (err, res) => {
20815
20895
  var _res$data;
20816
20896
  if (res !== null && res !== void 0 && (_res$data = res.data) !== null && _res$data !== void 0 && _res$data.setup_intent) {
@@ -20985,7 +21065,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
20985
21065
  isExistingSource: Boolean(selectedPaymentMethodId),
20986
21066
  items: mappedOrderItems,
20987
21067
  addressId: selectedAddressId,
20988
- couponCode
21068
+ couponCode,
21069
+ cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
21070
+ cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
20989
21071
  }, (err, orderResponse) => {
20990
21072
  var _window$Pelcro14, _window$Pelcro14$user, _window$Pelcro14$user2;
20991
21073
  if (err) {
@@ -21333,7 +21415,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
21333
21415
  campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
21334
21416
  ...(selectedAddressId && {
21335
21417
  address_id: selectedAddressId
21336
- })
21418
+ }),
21419
+ card_expiration_month: state === null || state === void 0 ? void 0 : state.month,
21420
+ card_expiration_year: state === null || state === void 0 ? void 0 : state.year
21337
21421
  }, (err, res) => {
21338
21422
  if (err) {
21339
21423
  return handlePaymentError(err);
package/dist/index.esm.js CHANGED
@@ -18184,7 +18184,9 @@ class CybersourceGateway {
18184
18184
  quantity = 1,
18185
18185
  addressId,
18186
18186
  isExistingSource,
18187
- fingerprint_session_id
18187
+ fingerprint_session_id,
18188
+ cardExpirationMonth,
18189
+ cardExpirationYear
18188
18190
  } = options;
18189
18191
  const params = isExistingSource ? {
18190
18192
  source_id: token
@@ -18200,6 +18202,8 @@ class CybersourceGateway {
18200
18202
  coupon_code: couponCode,
18201
18203
  address_id: product.address_required ? addressId : null,
18202
18204
  fingerprint_session_id: fingerprint_session_id,
18205
+ card_expiration_month: cardExpirationMonth,
18206
+ card_expiration_year: cardExpirationYear,
18203
18207
  ...params
18204
18208
  }, (err, res) => {
18205
18209
  callback(err, res);
@@ -18216,7 +18220,9 @@ class CybersourceGateway {
18216
18220
  couponCode,
18217
18221
  product,
18218
18222
  addressId,
18219
- isExistingSource
18223
+ isExistingSource,
18224
+ cardExpirationMonth,
18225
+ cardExpirationYear
18220
18226
  } = options;
18221
18227
  const params = isExistingSource ? {
18222
18228
  source_id: token
@@ -18231,6 +18237,8 @@ class CybersourceGateway {
18231
18237
  campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
18232
18238
  subscription_id: subscriptionIdToRenew,
18233
18239
  address_id: product.address_required ? addressId : null,
18240
+ card_expiration_month: cardExpirationMonth,
18241
+ card_expiration_year: cardExpirationYear,
18234
18242
  ...params
18235
18243
  }, (err, res) => {
18236
18244
  callback(err, res);
@@ -18248,7 +18256,9 @@ class CybersourceGateway {
18248
18256
  giftRecipient,
18249
18257
  quantity = 1,
18250
18258
  addressId,
18251
- isExistingSource
18259
+ isExistingSource,
18260
+ cardExpirationMonth,
18261
+ cardExpirationYear
18252
18262
  } = options;
18253
18263
  const params = isExistingSource ? {
18254
18264
  source_id: token
@@ -18268,6 +18278,8 @@ class CybersourceGateway {
18268
18278
  gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
18269
18279
  gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
18270
18280
  address_id: product.address_required ? addressId : null,
18281
+ card_expiration_month: cardExpirationMonth,
18282
+ card_expiration_year: cardExpirationYear,
18271
18283
  ...params
18272
18284
  }, (err, res) => {
18273
18285
  callback(err, res);
@@ -18284,7 +18296,9 @@ class CybersourceGateway {
18284
18296
  plan,
18285
18297
  couponCode,
18286
18298
  addressId,
18287
- isExistingSource
18299
+ isExistingSource,
18300
+ cardExpirationMonth,
18301
+ cardExpirationYear
18288
18302
  } = options;
18289
18303
  const params = isExistingSource ? {
18290
18304
  source_id: token
@@ -18298,6 +18312,8 @@ class CybersourceGateway {
18298
18312
  coupon_code: couponCode,
18299
18313
  subscription_id: subscriptionIdToRenew,
18300
18314
  address_id: product.address_required ? addressId : null,
18315
+ card_expiration_month: cardExpirationMonth,
18316
+ card_expiration_year: cardExpirationYear,
18301
18317
  ...params
18302
18318
  }, (err, res) => {
18303
18319
  callback(err, res);
@@ -18312,7 +18328,9 @@ class CybersourceGateway {
18312
18328
  items,
18313
18329
  couponCode,
18314
18330
  addressId,
18315
- isExistingSource
18331
+ isExistingSource,
18332
+ cardExpirationMonth,
18333
+ cardExpirationYear
18316
18334
  } = options;
18317
18335
  const params = isExistingSource ? {
18318
18336
  source_id: token
@@ -18327,7 +18345,9 @@ class CybersourceGateway {
18327
18345
  ...params,
18328
18346
  ...(addressId && {
18329
18347
  address_id: addressId
18330
- })
18348
+ }),
18349
+ card_expiration_month: cardExpirationMonth,
18350
+ card_expiration_year: cardExpirationYear
18331
18351
  }, (err, res) => {
18332
18352
  callback(err, res);
18333
18353
  });
@@ -18768,7 +18788,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18768
18788
  }
18769
18789
  });
18770
18790
  }
18771
- handleCybersourcePayment(response.token, state);
18791
+ handleCybersourcePayment(response, state);
18772
18792
  });
18773
18793
  };
18774
18794
  function handleCybersourcePayment(paymentRequest, state) {
@@ -18786,7 +18806,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18786
18806
  window.Pelcro.source.create({
18787
18807
  auth_token: window.Pelcro.user.read().auth_token,
18788
18808
  token: paymentRequest,
18789
- gateway: "cybersource"
18809
+ gateway: "cybersource",
18810
+ cardExpirationMonth: state.month,
18811
+ cardExpirationYear: state.year
18790
18812
  }, (err, res) => {
18791
18813
  dispatch({
18792
18814
  type: DISABLE_SUBMIT,
@@ -18814,6 +18836,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18814
18836
  content: t("messages.sourceUpdated")
18815
18837
  }
18816
18838
  });
18839
+
18840
+ // Reinitialize Cybersource microform after successful payment
18841
+ setTimeout(() => {
18842
+ cybersourceInstanceRef.current = null;
18843
+ initCybersourceScript();
18844
+ }, 1000);
18817
18845
  onSuccess(res);
18818
18846
  } //
18819
18847
  );
@@ -18837,11 +18865,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18837
18865
  product,
18838
18866
  isExistingSource: isUsingExistingPaymentMethod,
18839
18867
  subscriptionIdToRenew,
18840
- addressId: selectedAddressId
18868
+ addressId: selectedAddressId,
18869
+ cardExpirationMonth: state.month,
18870
+ cardExpirationYear: state.year
18841
18871
  }, (err, res) => {
18842
18872
  if (err) {
18843
18873
  return handlePaymentError(err);
18844
18874
  }
18875
+
18876
+ // Reinitialize Cybersource microform after successful payment
18877
+ setTimeout(() => {
18878
+ cybersourceInstanceRef.current = null;
18879
+ initCybersourceScript();
18880
+ }, 1000);
18845
18881
  onSuccess(res);
18846
18882
  });
18847
18883
  } else if (giftSubscriprition) {
@@ -18854,11 +18890,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18854
18890
  product,
18855
18891
  isExistingSource: isUsingExistingPaymentMethod,
18856
18892
  giftRecipient,
18857
- addressId: selectedAddressId
18893
+ addressId: selectedAddressId,
18894
+ cardExpirationMonth: state.month,
18895
+ cardExpirationYear: state.year
18858
18896
  }, (err, res) => {
18859
18897
  if (err) {
18860
18898
  return handlePaymentError(err);
18861
18899
  }
18900
+
18901
+ // Reinitialize Cybersource microform after successful payment
18902
+ setTimeout(() => {
18903
+ cybersourceInstanceRef.current = null;
18904
+ initCybersourceScript();
18905
+ }, 1000);
18862
18906
  onSuccess(res);
18863
18907
  });
18864
18908
  } else if (renewSubscription) {
@@ -18871,11 +18915,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18871
18915
  product,
18872
18916
  isExistingSource: isUsingExistingPaymentMethod,
18873
18917
  subscriptionIdToRenew,
18874
- addressId: selectedAddressId
18918
+ addressId: selectedAddressId,
18919
+ cardExpirationMonth: state.month,
18920
+ cardExpirationYear: state.year
18875
18921
  }, (err, res) => {
18876
18922
  if (err) {
18877
18923
  return handlePaymentError(err);
18878
18924
  }
18925
+
18926
+ // Reinitialize Cybersource microform after successful payment
18927
+ setTimeout(() => {
18928
+ cybersourceInstanceRef.current = null;
18929
+ initCybersourceScript();
18930
+ }, 1000);
18879
18931
  onSuccess(res);
18880
18932
  });
18881
18933
  } else if (createSubscription) {
@@ -18888,22 +18940,27 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18888
18940
  product,
18889
18941
  isExistingSource: isUsingExistingPaymentMethod,
18890
18942
  addressId: selectedAddressId,
18891
- fingerprint_session_id: state.cyberSourceSessionId
18943
+ fingerprint_session_id: state.cyberSourceSessionId,
18944
+ cardExpirationMonth: state.month,
18945
+ cardExpirationYear: state.year
18892
18946
  }, (err, res) => {
18893
18947
  if (err) {
18894
18948
  return handlePaymentError(err);
18895
18949
  }
18950
+
18951
+ // Reinitialize Cybersource microform after successful payment
18952
+ setTimeout(() => {
18953
+ cybersourceInstanceRef.current = null;
18954
+ initCybersourceScript();
18955
+ }, 1000);
18896
18956
  onSuccess(res);
18897
18957
  });
18898
18958
  }
18899
18959
  }
18900
18960
  }
18901
- const tokenizeCard = (error, microformInstance) => {
18902
- if (error) {
18903
- return;
18904
- }
18905
- cybersourceInstanceRef.current = microformInstance;
18906
- };
18961
+
18962
+ // No longer needed - microform instance is stored directly in initCybersourceScript
18963
+
18907
18964
  const appendCybersourceFingerprintScripts = () => {
18908
18965
  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro$site$r4;
18909
18966
  const uniqueId = crypto.randomUUID();
@@ -18927,6 +18984,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18927
18984
  }
18928
18985
  };
18929
18986
  const initCybersourceScript = () => {
18987
+ // Clear existing card number field before reinitializing
18988
+ const cardNumberElement = document.querySelector("#cybersourceCardNumber");
18989
+ if (cardNumberElement) {
18990
+ cardNumberElement.innerHTML = "";
18991
+ }
18992
+
18930
18993
  // jwk api call
18931
18994
  window.Pelcro.payment.getJWK({
18932
18995
  auth_token: window.Pelcro.user.read().auth_token,
@@ -18951,35 +19014,56 @@ const PaymentMethodContainerWithoutStripe = _ref => {
18951
19014
  });
18952
19015
  }
18953
19016
  const {
18954
- key: jwk
19017
+ key: jwk,
19018
+ captureContext,
19019
+ js_client
18955
19020
  } = res;
18956
- // SETUP MICROFORM
18957
- // eslint-disable-next-line no-undef
18958
- FLEX.microform({
18959
- keyId: jwk.kid,
18960
- keystore: jwk,
18961
- container: "#cybersourceCardNumber",
18962
- placeholder: "Card Number",
18963
- styles: {
18964
- input: {
18965
- "font-size": "14px",
18966
- "font-family": "helvetica, tahoma, calibri, sans-serif",
18967
- color: "#555"
18968
- },
18969
- ":focus": {
18970
- color: "blue"
18971
- },
18972
- ":disabled": {
18973
- cursor: "not-allowed"
18974
- },
18975
- valid: {
18976
- color: "#3c763d"
18977
- },
18978
- invalid: {
18979
- color: "#a94442"
19021
+
19022
+ // Load the SDK from the dynamic URL (if not already loaded)
19023
+ const existingScript = document.querySelector(`script[src="${js_client}"]`);
19024
+ if (!existingScript) {
19025
+ window.Pelcro.helpers.loadSDK(js_client, "cybersource-cdn");
19026
+ }
19027
+ const initializeMicroform = () => {
19028
+ // SETUP MICROFORM
19029
+ // eslint-disable-next-line no-undef
19030
+ const flex = new Flex(captureContext);
19031
+ const microform = flex.microform({
19032
+ styles: {
19033
+ input: {
19034
+ "font-size": "14px",
19035
+ "font-family": "helvetica, tahoma, calibri, sans-serif",
19036
+ color: "#555"
19037
+ },
19038
+ ":focus": {
19039
+ color: "blue"
19040
+ },
19041
+ ":disabled": {
19042
+ cursor: "not-allowed"
19043
+ },
19044
+ valid: {
19045
+ color: "#3c763d"
19046
+ },
19047
+ invalid: {
19048
+ color: "#a94442"
19049
+ }
18980
19050
  }
18981
- }
18982
- }, tokenizeCard);
19051
+ });
19052
+ const number = microform.createField("number", {
19053
+ placeholder: "Enter your card number"
19054
+ });
19055
+ number.load("#cybersourceCardNumber");
19056
+ cybersourceInstanceRef.current = microform;
19057
+ };
19058
+
19059
+ // Wait for SDK to load then initialize microform
19060
+ if (existingScript) {
19061
+ // Script already loaded, initialize immediately
19062
+ initializeMicroform();
19063
+ } else {
19064
+ // Wait for new script to load
19065
+ document.querySelector(`script[src="${js_client}"]`).addEventListener("load", initializeMicroform);
19066
+ }
18983
19067
  });
18984
19068
  };
18985
19069
 
@@ -20175,13 +20259,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
20175
20259
  if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
20176
20260
  initTapScript();
20177
20261
  }
20178
- if (cardProcessor === "cybersource" && !selectedPaymentMethodId && !window.FLEX) {
20179
- window.Pelcro.helpers.loadSDK("https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js", "cybersource-cdn");
20180
- document.querySelector('script[src="https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js"]').addEventListener("load", () => {
20181
- initCybersourceScript();
20182
- });
20183
- }
20184
- if (cardProcessor === "cybersource" && !selectedPaymentMethodId && window.FLEX) {
20262
+ if (cardProcessor === "cybersource" && !selectedPaymentMethodId) {
20185
20263
  initCybersourceScript();
20186
20264
  }
20187
20265
  if (cardProcessor === "cybersource") {
@@ -20780,7 +20858,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
20780
20858
  gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
20781
20859
  gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
20782
20860
  address_id: product.address_required ? selectedAddressId : null,
20783
- metadata: props === null || props === void 0 ? void 0 : props.subCreateMetadata
20861
+ metadata: props === null || props === void 0 ? void 0 : props.subCreateMetadata,
20862
+ cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
20863
+ cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
20784
20864
  }, (err, res) => {
20785
20865
  var _res$data;
20786
20866
  if (res !== null && res !== void 0 && (_res$data = res.data) !== null && _res$data !== void 0 && _res$data.setup_intent) {
@@ -20955,7 +21035,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
20955
21035
  isExistingSource: Boolean(selectedPaymentMethodId),
20956
21036
  items: mappedOrderItems,
20957
21037
  addressId: selectedAddressId,
20958
- couponCode
21038
+ couponCode,
21039
+ cardExpirationMonth: state === null || state === void 0 ? void 0 : state.month,
21040
+ cardExpirationYear: state === null || state === void 0 ? void 0 : state.year
20959
21041
  }, (err, orderResponse) => {
20960
21042
  var _window$Pelcro14, _window$Pelcro14$user, _window$Pelcro14$user2;
20961
21043
  if (err) {
@@ -21303,7 +21385,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
21303
21385
  campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
21304
21386
  ...(selectedAddressId && {
21305
21387
  address_id: selectedAddressId
21306
- })
21388
+ }),
21389
+ card_expiration_month: state === null || state === void 0 ? void 0 : state.month,
21390
+ card_expiration_year: state === null || state === void 0 ? void 0 : state.year
21307
21391
  }, (err, res) => {
21308
21392
  if (err) {
21309
21393
  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.26.0-beta.77",
4
+ "version": "3.26.0-beta.78",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "main": "dist/index.cjs.js",