From 97fa68af3a2d4bc96a90326b50b14875ddd5a84e Mon Sep 17 00:00:00 2001
From: Ryan Baxley <ryan.baxley1@gmail.com>
Date: Sun, 7 Oct 2018 00:12:44 -0400
Subject: [PATCH 1/3] Remove use of deprecated lifecycle
 componentWillReceiveProps

---
 src/components/Element.js                     |  6 +++---
 src/components/PaymentRequestButtonElement.js |  6 +++---
 src/components/Provider.js                    | 14 +++++++-------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Element.js b/src/components/Element.js
index ce6e6b0..e43446a 100644
--- a/src/components/Element.js
+++ b/src/components/Element.js
@@ -53,7 +53,7 @@ const Element = (
     static contextTypes = elementContextTypes;
 
     static displayName = `${capitalized(type)}Element`;
-
+  
     constructor(props: Props, context: ElementContext) {
       super(props, context);
 
@@ -90,8 +90,8 @@ const Element = (
       });
     }
 
-    componentWillReceiveProps(nextProps: Props) {
-      const options = _extractOptions(nextProps);
+    componentDidUpdate() {
+      const options = _extractOptions(this.props);
       if (
         Object.keys(options).length !== 0 &&
         !isEqual(options, this._options)
diff --git a/src/components/PaymentRequestButtonElement.js b/src/components/PaymentRequestButtonElement.js
index f858a65..0127c15 100644
--- a/src/components/PaymentRequestButtonElement.js
+++ b/src/components/PaymentRequestButtonElement.js
@@ -83,13 +83,13 @@ class PaymentRequestButtonElement extends React.Component<Props> {
       this._element.mount(this._ref);
     });
   }
-  componentWillReceiveProps(nextProps: Props) {
-    if (this.props.paymentRequest !== nextProps.paymentRequest) {
+  componentDidUpdate(prevProps: Props) {
+    if (this.props.paymentRequest !== prevProps.paymentRequest) {
       console.warn(
         'Unsupported prop change: paymentRequest is not a customizable property.'
       );
     }
-    const options = _extractOptions(nextProps);
+    const options = _extractOptions(this.props);
     if (
       Object.keys(options).length !== 0 &&
       !shallowEqual(options, this._options)
diff --git a/src/components/Provider.js b/src/components/Provider.js
index 355dd79..00addcb 100644
--- a/src/components/Provider.js
+++ b/src/components/Provider.js
@@ -150,16 +150,16 @@ export default class Provider extends React.Component<Props> {
     }
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  componentDidUpdate(prevProps: Props) {
     const apiKeyChanged =
       this.props.apiKey &&
-      nextProps.apiKey &&
-      this.props.apiKey !== nextProps.apiKey;
+      prevProps.apiKey &&
+      this.props.apiKey !== prevProps.apiKey;
 
     const stripeInstanceChanged =
       this.props.stripe &&
-      nextProps.stripe &&
-      this.props.stripe !== nextProps.stripe;
+      prevProps.stripe &&
+      this.props.stripe !== prevProps.stripe;
     if (
       !this._didWarn &&
       (apiKeyChanged || stripeInstanceChanged) &&
@@ -174,10 +174,10 @@ export default class Provider extends React.Component<Props> {
       return;
     }
 
-    if (!this._didWakeUpListeners && nextProps.stripe) {
+    if (!this._didWakeUpListeners && this.props.stripe) {
       // Wake up the listeners if we've finally been given a StripeShape
       this._didWakeUpListeners = true;
-      const stripe = ensureStripeShape(nextProps.stripe);
+      const stripe = ensureStripeShape(this.props.stripe);
       this._meta.stripe = stripe;
       this._listeners.forEach((fn) => {
         fn(stripe);

From a8597c7ba483d6312c8140577e2f68230509262f Mon Sep 17 00:00:00 2001
From: Ryan Baxley <ryan.baxley1@gmail.com>
Date: Sun, 7 Oct 2018 00:13:44 -0400
Subject: [PATCH 2/3] Fix bug in demo component

---
 demo/demo/index.js | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/demo/demo/index.js b/demo/demo/index.js
index aa367db..0a4597d 100644
--- a/demo/demo/index.js
+++ b/demo/demo/index.js
@@ -155,16 +155,6 @@ class _PaymentRequestForm extends React.Component<
       },
     });
 
-    paymentRequest.on('token', ({complete, token, ...data}) => {
-      console.log('Received Stripe token: ', token);
-      console.log('Received customer information: ', data);
-      complete('success');
-    });
-
-    paymentRequest.canMakePayment().then((result) => {
-      this.setState({canMakePayment: !!result});
-    });
-
     this.state = {
       canMakePayment: false,
       paymentRequest,
@@ -176,6 +166,18 @@ class _PaymentRequestForm extends React.Component<
     paymentRequest: Object,
   };
 
+  componentDidMount() {
+    this.state.paymentRequest.on('token', ({complete, token, ...data}) => {
+      console.log('Received Stripe token: ', token);
+      console.log('Received customer information: ', data);
+      complete('success');
+    });
+
+    this.state.paymentRequest.canMakePayment().then((result) => {
+      this.setState({canMakePayment: !!result});
+    });
+  }
+
   render() {
     return this.state.canMakePayment ? (
       <PaymentRequestButtonElement

From bc5fcb47e4f2c6cf0fb68cc59f33a20ab16edd0b Mon Sep 17 00:00:00 2001
From: Ryan Baxley <ryan.baxley1@gmail.com>
Date: Tue, 9 Oct 2018 19:40:57 -0400
Subject: [PATCH 3/3] Run prettier

---
 src/components/Element.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Element.js b/src/components/Element.js
index e43446a..9ef3054 100644
--- a/src/components/Element.js
+++ b/src/components/Element.js
@@ -53,7 +53,7 @@ const Element = (
     static contextTypes = elementContextTypes;
 
     static displayName = `${capitalized(type)}Element`;
-  
+
     constructor(props: Props, context: ElementContext) {
       super(props, context);