Fixed unsaveable Stripe direct keys in launch-site wizard

refs https://github.com/TryGhost/Team/issues/460

- fixed mismatches in property naming for key fields
- updated error handling to show errors for missing and invalid stripe keys

ghost/admin/app/components/gh-launch-wizard/connect-stripe.hbs

@@ -19,20 +19,22 @@
                     <GhTextInput
                         @id="stripe-publishable-key"
                         @type="password"
-                        @value={{readonly this.settings.stripeDirectPublicKey}}
+                        @value={{readonly this.settings.stripePublishableKey}}
                         class="mt1 password"
                         {{on "input" this.setStripeDirectPublicKey}}
                     />
+                    {{#if this.stripePublishableKeyError}}<p class="mb0 mt2 f8 red">{{this.stripePublishableKeyError}}</p>{{/if}}
                 </div>
                 <div>
                     <label for="stripe-secret-key" class="gh-setting-title">Stripe Secret key</label>
                     <GhTextInput
                         @id="stripe-secret-key"
                         @type="password"
-                        @value={{readonly this.settings.stripeDirectSecretKey}}
+                        @value={{readonly this.settings.stripeSecretKey}}
                         class="mt1 password"
                         {{on "input" this.setStripeDirectSecretKey}}
                     />
+                    {{#if this.stripeSecretKeyError}}<p class="mb0 mt2 f8 red">{{this.stripeSecretKeyError}}</p>{{/if}}
                     <a href="https://dashboard.stripe.com/account/apikeys" target="_blank" rel="noopener noreferrer" class="mt1 fw4 f8">
                         Find your Stripe API keys here &raquo;
                     </a>

ghost/admin/app/components/gh-launch-wizard/connect-stripe.js

@@ -12,6 +12,8 @@ export default class GhLaunchWizardConnectStripeComponent extends Component {
 
     @tracked stripeConnectTestMode = false;
     @tracked stripeConnectError = null;
+    @tracked stripePublishableKeyError = null;
+    @tracked stripeSecretKeyError = null;
 
     get stripeConnectAuthUrl() {
         const mode = this.stripeConnectTestMode ? 'test' : 'live';
@@ -32,12 +34,14 @@ export default class GhLaunchWizardConnectStripeComponent extends Component {
     setStripeDirectPublicKey(event) {
         this.settings.set('stripeProductName', this.settings.get('title'));
         this.settings.set('stripePublishableKey', event.target.value);
+        this.stripePublishableKeyError = null;
     }
 
     @action
     setStripeDirectSecretKey(event) {
         this.settings.set('stripeProductName', this.settings.get('title'));
-        this.settings.set('stripePublishableKey', event.target.value);
+        this.settings.set('stripeSecretKey', event.target.value);
+        this.stripeSecretKeyError = null;
     }
 
     @action
@@ -54,23 +58,46 @@ export default class GhLaunchWizardConnectStripeComponent extends Component {
 
     @task
     *saveAndContinue() {
-        if (this.settings.get('stripeConnectIntegrationToken')) {
+        if (this.config.get('stripeDirect')) {
-            try {
+            if (!this.settings.get('stripePublishableKey')) {
-                yield this.settings.save();
+                this.stripePublishableKeyError = 'Enter your publishable key to continue';
-                this.pauseAndContinue.perform();
-                return true;
-            } catch (error) {
-                if (error.payload?.errors) {
-                    this.stripeConnectError = 'Invalid secure key';
-                    return false;
-                }
-
-                throw error;
             }
-        } else {
+
+            if (!this.settings.get('stripeSecretKey')) {
+                this.stripeSecretKeyError = 'Enter your secret key to continue';
+            }
+
+            if (this.stripePublishableKeyError || this.stripeSecretKeyError) {
+                return false;
+            }
+        } else if (!this.settings.get('stripeConnectIntegrationToken')) {
             this.stripeConnectError = 'Paste your secure key to continue';
             return false;
         }
+
+        try {
+            yield this.settings.save();
+            this.pauseAndContinue.perform();
+            return true;
+        } catch (error) {
+            if (error.payload?.errors && error.payload.errors[0].type === 'ValidationError') {
+                const [validationError] = error.payload.errors;
+
+                if (this.config.get('stripeDirect')) {
+                    if (validationError.context.match(/stripe_publishable_key/)) {
+                        this.stripePublishableKeyError = 'Invalid publishable key';
+                    } else {
+                        this.stripeSecretKeyError = 'Invalid secret key';
+                    }
+                } else {
+                    this.stripeConnectError = 'Invalid secure key';
+                }
+
+                return false;
+            }
+
+            throw error;
+        }
     }
 
     @task