show error from backend properly

ui/component/walletSendTip/view.jsx

@@ -22,6 +22,8 @@ const DEFAULT_TIP_AMOUNTS = [1, 5, 25, 100];
 const MINIMUM_FIAT_TIP = 1;
 const MAXIMUM_FIAT_TIP = 1000;
 
+const DEFAULT_TIP_ERROR = __('Sorry, there was an error in processing your payment!');
+
 const TAB_BOOST = 'TabBoost';
 const TAB_FIAT = 'TabFiat';
 const TAB_LBC = 'TabLBC';
@@ -297,10 +299,12 @@ function WalletSendTip(props: Props) {
               });
             })
             .catch(function (error) {
-              let displayError = 'Sorry, there was an error in processing your payment!';
-
-              if (error.message !== 'payment intent failed to confirm') {
+              // show error message from Stripe if one exists (being passed from backend by Beamer's API currently)
+              let displayError;
+              if (error.message) {
                 displayError = error.message;
+              } else {
+                displayError = DEFAULT_TIP_ERROR;
               }
 
               doToast({ message: displayError, isError: true });

ui/page/settingsStripeCard/view.jsx

@@ -361,12 +361,14 @@ class SettingsStripeCard extends React.Component<Props, State> {
         className="card-stack"
         backout={{ title: __(pageTitle), backLabel: __('Back') }}
       >
+        {/* if Stripe javascript didn't load */}
         <div>
           {scriptFailedToLoad && (
             <div className="error__text">{__('There was an error connecting to Stripe. Please try again later.')}</div>
           )}
         </div>
 
+        {/* initial markup to show while getting information */}
         {currentFlowStage === 'loading' && (
           <div className="headerCard toConfirmCard">
             <Card title={__('Connect your card with Odysee')} subtitle={__('Getting your card connection status...')} />
@@ -407,7 +409,7 @@ class SettingsStripeCard extends React.Component<Props, State> {
                   />
                   <br />
                   <Button
-                    button="secondary"
+                    button="primary"
                     label={__('Remove Card')}
                     icon={ICONS.DELETE}
                     onClick={(e) => {
@@ -419,16 +421,15 @@ class SettingsStripeCard extends React.Component<Props, State> {
                       });
                     }}
                   />
+                  <Button
+                    button="secondary"
+                    label={__('View Transactions')}
+                    icon={ICONS.SETTINGS}
+                    navigate={`/$/${PAGES.WALLET}?fiatType=outgoing&tab=fiat-payment-history&currency=fiat`}
+                    style={{marginLeft: '10px'}}
+                  />
                 </>
               }
-              actions={
-                <Button
-                  button="primary"
-                  label={__('View Transactions')}
-                  icon={ICONS.SETTINGS}
-                  navigate={`/$/${PAGES.WALLET}?fiatType=outgoing&tab=fiat-payment-history&currency=fiat`}
-                />
-              }
             />
             <br />
           </div>