From 574ac1f5664e832ddb2901bbd1a6222e7a9a1d48 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 4 Feb 2020 23:47:23 -0500
Subject: [PATCH] handle credit card script failure

---
 ui/component/cardVerify/view.jsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/ui/component/cardVerify/view.jsx b/ui/component/cardVerify/view.jsx
index 744cf02cb..901ed4963 100644
--- a/ui/component/cardVerify/view.jsx
+++ b/ui/component/cardVerify/view.jsx
@@ -37,6 +37,7 @@ class CardVerify extends React.Component {
     super(props);
     this.state = {
       open: false,
+      scriptFailedToLoad: false,
     };
   }
 
@@ -117,7 +118,7 @@ class CardVerify extends React.Component {
   };
 
   onScriptError = (...args) => {
-    throw new Error('Unable to load credit validation script.');
+    this.setState({ scriptFailedToLoad: true });
   };
 
   onClosed = () => {
@@ -159,13 +160,21 @@ class CardVerify extends React.Component {
   };
 
   render() {
+    const { scriptFailedToLoad } = this.props;
+
     return (
-      <Button
-        button="primary"
-        label={this.props.label}
-        disabled={this.props.disabled || this.state.open || this.hasPendingClick}
-        onClick={this.onClick.bind(this)}
-      />
+      <div>
+        {scriptFailedToLoad && (
+          <div className="error-text">There was an error connecting to Stripe. Please try again later.</div>
+        )}
+
+        <Button
+          button="primary"
+          label={this.props.label}
+          disabled={this.props.disabled || this.state.open || this.hasPendingClick}
+          onClick={this.onClick.bind(this)}
+        />
+      </div>
     );
   }
 }