crain-react-stripe-elements-shim 1.0.0

package/index.js

@@ -0,0 +1,166 @@
+/**
+ * react-stripe-elements compatibility shim for React 19
+ *
+ * Replaces the deprecated react-stripe-elements package (which uses legacy
+ * React context API removed in React 19) with a thin wrapper around
+ * @stripe/react-stripe-js (which uses React.createContext).
+ *
+ * Provides the same public API: StripeProvider, Elements, injectStripe,
+ * CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, etc.
+ */
+'use strict';
+
+var React = require('react');
+var stripeReact = require('@stripe/react-stripe-js');
+var stripeJs = require('@stripe/stripe-js');
+
+// Internal context to pass stripe instance from StripeProvider to Elements
+var StripeContext = React.createContext(null);
+
+/**
+ * StripeProvider - compatibility replacement
+ * Original used getChildContext (legacy API). This uses React.createContext.
+ */
+function StripeProvider(props) {
+  var stripeRef = React.useRef(null);
+  var _s = React.useState(null), stripeInstance = _s[0], setStripeInstance = _s[1];
+
+  React.useEffect(function() {
+    if (props.stripe) {
+      setStripeInstance(props.stripe);
+    } else if (props.apiKey && typeof window !== 'undefined') {
+      stripeJs.loadStripe(props.apiKey).then(function(s) {
+        stripeRef.current = s;
+        setStripeInstance(s);
+      });
+    }
+  }, [props.apiKey, props.stripe]);
+
+  return React.createElement(
+    StripeContext.Provider,
+    { value: stripeInstance },
+    props.children
+  );
+}
+
+/**
+ * Elements - wraps @stripe/react-stripe-js Elements
+ */
+function Elements(props) {
+  var stripe = React.useContext(StripeContext);
+  if (!stripe) {
+    return props.children || null;
+  }
+  var elementProps = {};
+  if (props.fonts) elementProps.fonts = props.fonts;
+  if (props.locale) elementProps.locale = props.locale;
+
+  return React.createElement(
+    stripeReact.Elements,
+    Object.assign({ stripe: stripe }, elementProps),
+    props.children
+  );
+}
+
+/**
+ * injectStripe HOC - compatibility replacement
+ * Original used contextTypes (legacy API). This uses useStripe/useElements hooks.
+ */
+function injectStripe(WrappedComponent, options) {
+  var opts = options || {};
+
+  function InjectedComponent(props) {
+    var stripe = null;
+    var elements = null;
+
+    try {
+      stripe = stripeReact.useStripe();
+      elements = stripeReact.useElements();
+    } catch (e) {
+      // Not inside Elements context — try our StripeContext
+      var ctxStripe = React.useContext(StripeContext);
+      if (ctxStripe) {
+        stripe = ctxStripe;
+      }
+    }
+
+    // Build stripe prop with wrapped methods matching react-stripe-elements API
+    var stripeProxy = null;
+    if (stripe) {
+      stripeProxy = Object.assign({}, stripe, {
+        createToken: function(tokenTypeOrElement, data) {
+          if (typeof tokenTypeOrElement === 'string' && elements) {
+            var el = elements.getElement(tokenTypeOrElement === 'card' ? 'card' : tokenTypeOrElement);
+            if (el) return stripe.createToken(el, data);
+          }
+          if (tokenTypeOrElement && typeof tokenTypeOrElement === 'object') {
+            return stripe.createToken(tokenTypeOrElement, data);
+          }
+          if (elements) {
+            var cardEl = elements.getElement('card');
+            if (cardEl) return stripe.createToken(cardEl, data || tokenTypeOrElement);
+          }
+          return stripe.createToken(tokenTypeOrElement, data);
+        },
+        createSource: function(sourceData) {
+          if (sourceData && typeof sourceData === 'object') {
+            if (elements) {
+              var el = elements.getElement(sourceData.type || 'card');
+              if (el) return stripe.createSource(el, sourceData);
+            }
+            return stripe.createSource(sourceData);
+          }
+          return stripe.createSource(sourceData);
+        },
+        createPaymentMethod: function(type, elementOrData, data) {
+          return stripe.createPaymentMethod.apply(stripe, arguments);
+        },
+        handleCardPayment: function(clientSecret, elementOrData, data) {
+          if (typeof stripe.confirmCardPayment === 'function') {
+            return stripe.confirmCardPayment(clientSecret, elementOrData);
+          }
+          return stripe.handleCardPayment.apply(stripe, arguments);
+        },
+        handleCardSetup: function(clientSecret, elementOrData, data) {
+          if (typeof stripe.confirmCardSetup === 'function') {
+            return stripe.confirmCardSetup(clientSecret, elementOrData);
+          }
+          return stripe.handleCardSetup.apply(stripe, arguments);
+        }
+      });
+    }
+
+    var ref = opts.withRef ? React.createRef() : undefined;
+    return React.createElement(
+      WrappedComponent,
+      Object.assign({}, props, { stripe: stripeProxy, elements: elements, ref: ref })
+    );
+  }
+
+  InjectedComponent.displayName = 'InjectStripe(' + (WrappedComponent.displayName || WrappedComponent.name || 'Component') + ')';
+  return InjectedComponent;
+}
+
+// Re-export element components from @stripe/react-stripe-js
+var CardElement = stripeReact.CardElement;
+var CardNumberElement = stripeReact.CardNumberElement;
+var CardExpiryElement = stripeReact.CardExpiryElement;
+var CardCvcElement = stripeReact.CardCvcElement;
+var PaymentRequestButtonElement = stripeReact.PaymentRequestButtonElement;
+var IbanElement = stripeReact.IbanElement;
+var IdealBankElement = stripeReact.IdealBankElement;
+
+// Legacy aliases
+var CardCVCElement = CardCvcElement;
+
+exports.StripeProvider = StripeProvider;
+exports.Elements = Elements;
+exports.injectStripe = injectStripe;
+exports.CardElement = CardElement;
+exports.CardNumberElement = CardNumberElement;
+exports.CardExpiryElement = CardExpiryElement;
+exports.CardCvcElement = CardCvcElement;
+exports.CardCVCElement = CardCVCElement;
+exports.PaymentRequestButtonElement = PaymentRequestButtonElement;
+exports.IbanElement = IbanElement;
+exports.IdealBankElement = IdealBankElement;

package/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "crain-react-stripe-elements-shim",
+  "version": "1.0.0",
+  "description": "React 19 compat shim for react-stripe-elements using @stripe/react-stripe-js",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {}
+}