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

<div class="gh-launch-wizard-settings-container">
    <div class="gh-stack overflow-y-auto flex-grow-1">
        <div class="gh-stack-item gh-setting-first">
            <div class="gh-members-stripe-info gh-launch-wizard-stripe-info">
                <div class="gh-members-stripe-info-header">
                    <h4>Getting paid</h4>
                    {{svg-jar "stripe-verified-partner-badge" class="gh-members-stripe-badge"}}
                </div>
                <p class="f8 mt2 mb0">
                    Stripe is our exclusive direct payments partner. Ghost collects <strong>no fees</strong> on any payments! If you don’t have a Stripe account yet, you can <a href="https://stripe.com" target="_blank" rel="noopener noreferrer" class="gh-members-stripe-link">sign up here</a>.
                </p>
            </div>
        </div>
        {{#if this.config.stripeDirect}}
            <div class="gh-stack-item gh-setting flex-column">
                <div class="mb4">
                    <label for="stripe-publishable-key" class="gh-setting-title">Stripe Publishable key</label>
                    <GhTextInput
                        @id="stripe-publishable-key"
                        @type="password"
                        @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.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>
                </div>
            </div>
            <div class="gh-setting-desc"><a href="javascript:void(0)" {{on "click" @skipStep}}>Skip</a> if you don't want to offer paid subscriptions.</div>
        {{else}}
            <div class="gh-stack-item gh-setting flex-wrap">
                {{!-- Stripe already configured --}}
                {{#if this.settings.stripeConnectAccountId}}
                    <div>
                        <h4 class="gh-setting-title">Already connected to Stripe</h4>
                        <p class="gh-setting-desc mt2">
                            Connected to <a href="https://dashboard.stripe.com/{{this.settings.stripeConnectAccountId}}" target="_blank">{{this.settings.stripeConnectDisplayName}}</a>

                            {{#unless this.settings.stripeConnectLivemode}}
                                <span class="gh-members-connect-testmodelabel">Test mode</span>
                            {{/unless}}
                        </p>
                    </div>
                    {{#if this.hasActiveStripeSubscriptions}}
                        <p class="red ma0 pa0 f8 nudge-bottom--2">
                            Cannot disconnect while there are members with active Stripe subscriptions.
                        </p>
                    {{else}}
                        <div class="gh-setting-action">
                            <button type="button" class="gh-btn" {{on "click" (perform this.openDisconnectStripeConnectModalTask)}}><span>Disconnect</span></button>
                        </div>
                    {{/if}}
                {{!-- Stripe not yet configured --}}
                {{else}}
                    <div class="w-100">
                        <div class="gh-setting-title">Generate secure key</div>
                        <div class="flex items-center mb4 gh-members-connectbutton-container justify-between mt2">
                            <a href="{{this.stripeConnectAuthUrl}}" class="stripe-connect" target="_blank" rel="noopener noreferrer"><span>Connect with Stripe</span></a>
                            <div class="ml2 flex items-center flex-nowrap">
                                <span class="mr2 f8 midgrey nowrap {{if this.stripeConnectTestMode "gh-members-connect-testmodeon"}}">Test mode</span>
                                <div class="for-switch small">
                                    <label class="switch" for="stripe-connect-test-mode" {{on "click" this.toggleStripeConnectTestMode}}>
                                        <input type="checkbox" class="gh-input" checked={{this.stripeConnectTestMode}} {{on "click" this.toggleStripeConnectTestMode}} data-test-checkbox="stripe-connect-test-mode">
                                        <span class="input-toggle-component mt1"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="gh-setting-action">
                            <GhTextarea
                                class="gh-launch-wizard-stripe-connect-token"
                                placeholder="Paste your secure key here"
                                {{on "input" this.setStripeConnectIntegrationToken}}
                            />
                            {{#if this.stripeConnectError}}<p class="mb0 mt2 f8 red">{{this.stripeConnectError}}</p>{{/if}}
                        </div>
                        <div class="gh-setting-desc skip-step"><a href="javascript:void(0)" {{on "click" @skipStep}}>Skip</a> if you don't want to offer paid subscriptions.</div>
                    </div>
                {{/if}}
            </div>
        {{/if}}
    </div>
    <div class="gh-launch-wizard-nav-buttons">
        <button type="button" class="gh-btn gh-btn-outline gh-btn-icon-dark gh-btn-large w-30" {{on "click" @backStep}}><span>{{svg-jar "arrow-left-tail"}}</span></button>

        <GhTaskButton
            @task={{this.saveAndContinueTask}}
            @runningText="Saving"
            @class="w-70 ml4 right gh-btn gh-btn-black gh-btn-large gh-btn-icon-right"
            data-test-button="wizard-next"
        >
            {{#if this.saveAndContinueTask.isRunning}}
                <span>Saving...</span>
            {{else}}
                <span>{{if this.settings.stripeConnectAccountId "Continue" "Save and continue"}}{{svg-jar "arrow-right-tail"}}</span>
            {{/if}}
        </GhTaskButton>
    </div>
</div>

{{#if this.showDisconnectStripeConnectModal}}
    <GhFullscreenModal
        @modal="disconnect-stripe"
        @model={{hash
            stripeConnectAccountName=this.settings.stripeConnectDisplayName
        }}
        @confirm={{perform this.disconnectStripeConnectIntegrationTask}}
        @close={{this.closeDisconnectStripeModal}}
        @modifier="action wide" />
{{/if}}