Register package version with Stripe instance (#512)

Author: christopher-stripe

.babelrc

@@ -3,6 +3,7 @@
   "plugins": [
     "transform-class-properties",
     "transform-object-rest-spread",
-    [ "transform-es2015-classes", { "loose": true } ]
+    [ "transform-es2015-classes", { "loose": true } ],
+    "transform-inline-environment-variables"
   ]
 }

package.json

@@ -48,6 +48,7 @@
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-es2015-classes": "^6.24.1",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",

src/components/Provider.js

@@ -97,18 +97,16 @@ export default class Provider extends React.Component<Props> {
           "Please load Stripe.js (https://js.stripe.com/v3/) on this page to use react-stripe-elements. If Stripe.js isn't available yet (it's loading asynchronously, or you're using server-side rendering), see https://github.com/stripe/react-stripe-elements#advanced-integrations"
         );
       } else {
-        const {apiKey, children, stripe, ...options} = this.props;
-        this._meta = {
-          tag: 'sync',
-          stripe: getOrCreateStripe(apiKey, options),
-        };
+        const {apiKey, children, ...options} = this.props;
+        const stripe = getOrCreateStripe(apiKey, options);
+        this._meta = {tag: 'sync', stripe};
+        this._register();
       }
     } else if (this.props.stripe) {
       // If we already have a stripe instance (in the constructor), we can behave synchronously.
-      this._meta = {
-        tag: 'sync',
-        stripe: ensureStripeShape(this.props.stripe),
-      };
+      const stripe = ensureStripeShape(this.props.stripe);
+      this._meta = {tag: 'sync', stripe};
+      this._register();
     } else if (this.props.stripe === null) {
       this._meta = {
         tag: 'async',
@@ -179,12 +177,26 @@ export default class Provider extends React.Component<Props> {
       this._didWakeUpListeners = true;
       const stripe = ensureStripeShape(this.props.stripe);
       this._meta.stripe = stripe;
+      this._register();
       this._listeners.forEach((fn) => {
         fn(stripe);
       });
     }
   }
 
+  _register() {
+    const {stripe} = this._meta;
+
+    if (!stripe || !stripe._registerWrapper) {
+      return;
+    }
+
+    stripe._registerWrapper({
+      name: 'react-stripe-elements',
+      version: process.env.npm_package_version || null,
+    });
+  }
+
   props: Props;
   _didWarn: boolean;
   _didWakeUpListeners: boolean;

src/decls/Stripe.js

@@ -56,4 +56,8 @@ declare type StripeShape = {
   confirmIdealPayment: ConfirmPaymentFn,
   confirmSepaDebitPayment: ConfirmPaymentFn,
   confirmSepaDebitSetup: ConfirmSetupFn,
+  _registerWrapper: (wrapper: {|
+    name: string,
+    version: string | null,
+  |}) => void,
 };