Ghost-Admin/app/templates/components/gh-members-lab-setting.hbs

<div class="flex flex-column b--whitegrey bt">

    <section class="bb b--whitegrey pa5">
        <div class="flex justify-between">
            <div>
                <h4 class="gh-setting-title">Connect to Stripe</h4>
                <p class="gh-setting-desc pa0 ma0">Configure API keys to create subscriptions and take payments</p>
            </div>
            <div>
                <button type="button" class="gh-btn" {{action (toggle "membersStripeOpen" this)}} data-test-toggle-membersstripe><span>{{if membersStripeOpen "Close" "Expand"}}</span></button>
            </div>
        </div>

        {{#liquid-if membersStripeOpen}}
            <div class="flex flex-column flex-row-l items-start justify-between mb4 mt6">
                <div class="w-100 w-50-l">
                    <div class="mb4">
                        <label class="fw6 f8">Stripe Publishable key</label>
                        {{gh-text-input
                            type="password"
                            value=(readonly subscriptionSettings.stripeConfig.public_token)
                            input=(action "setSubscriptionSettings" "public_token")
                            class="mt1 password"
                        }}
                    </div>
                    <div class="nudge-top--3">
                        <label class="fw6 f8 mt4">Stripe Secret key</label>
                        {{gh-text-input
                            type="password"
                            value=(readonly subscriptionSettings.stripeConfig.secret_token)
                            input=(action "setSubscriptionSettings" "secret_token")
                            class="mt1 password"
                        }}
                        <a href="https://dashboard.stripe.com/account/apikeys" target="_blank" class="mt1 fw4 f8">
                            Find your Stripe API keys here &raquo;
                        </a>
                    </div>
                </div>
                <div class="ml0 ml5-l mt6">
                    <div class="gh-members-stripe-info">
                        <div class="gh-members-stripe-info-header">
                            <h4>How you get 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.<br />
                            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" class="gh-members-stripe-link">sign up here</a>.
                        </p>
                    </div>
                </div>
            </div>
        {{/liquid-if}}
    </section>

    <section class="bb b--whitegrey pa5">
        <div class="flex justify-between">
            <div>
                <h4 class="gh-setting-title">Subscription pricing</h4>
                <p class="gh-setting-desc pa0 ma0">Set monthly and yearly recurring subscription prices</p>
            </div>
            <div>
                <button type="button" class="gh-btn" {{action (toggle "membersPricingOpen" this)}} data-test-toggle-memberspricing><span>{{if membersPricingOpen "Close" "Expand"}}</span></button>
            </div>
        </div>

        {{#liquid-if membersPricingOpen}}
            <div class="w-100 w-50-l flex flex-column flex-row-ns mt8">
                <div class="w-100 w-50-ns mr3-ns">
                    {{#gh-form-group}}
                    <label class="fw6 f8">Monthly price</label>

                    <div class="flex items-center justify-center mt1 gh-input-group gh-labs-price-label">
                        {{gh-text-input
                            value=(readonly subscriptionSettings.stripeConfig.plans.monthly.dollarAmount)
                            type="number"
                            input=(action "setSubscriptionSettings" "month")
                        }}
                        <span class="gh-input-append">USD/month</span>
                    </div>
                    {{/gh-form-group}}
                </div>
                <div class="w-100 w-50-ns ml2-ns">
                    {{#gh-form-group class="description-container"}}
                    <label class="fw6 f8">Yearly price</label>
                    <div class="flex items-center justify-center mt1 gh-input-group gh-labs-price-label">
                        {{gh-text-input
                                value=(readonly subscriptionSettings.stripeConfig.plans.yearly.dollarAmount)
                                type="number"
                                input=(action "setSubscriptionSettings" "year")
                            }}
                        <span class="gh-input-append">USD/year</span>
                    </div>
                    {{/gh-form-group}}
                </div>
            </div>
            <div class="f8 fw4 midgrey">Currently only USD is supported, more currencies <a href="https://ghost.org/docs/members/" target="_blank" rel="noopener">coming soon</a></div>
        {{/liquid-if}}
    </section>

    <section class="bb b--whitegrey pa5">
        <div class="flex justify-between">
            <div>
                <h4 class="gh-setting-title">Allow free member signup</h4>
                <p class="gh-setting-desc pa0 ma0">If disabled, members can only be signed up via payment checkout or API integration</p>
            </div>
            <div>
                <div class="for-switch">
                    <label class="switch" for="members-allow-self-signup"
                        {{action "setSubscriptionSettings" "allowSelfSignup" bubbles="false"}}>
                        <input type="checkbox" checked={{subscriptionSettings.allowSelfSignup}} class="gh-input"
                            onclick={{action "setSubscriptionSettings" "allowSelfSignup"}}
                            data-test-checkbox="members-allow-self-signup">
                        <span class="input-toggle-component mt1"></span>
                    </label>
                </div>
            </div>
        </div>
    </section>

    <section class="bb b--whitegrey pa5">
        <div class="flex justify-between">
            <div>
                <h4 class="gh-setting-title">Default post access</h4>
                <p class="gh-setting-desc pa0 ma0">When a new post is created, who should have access to it?</p>
            </div>
            <div>
                <button type="button" class="gh-btn" {{action (toggle "membersPostAccessOpen" this)}} data-test-toggle-memberspostaccess><span>{{if membersPostAccessOpen "Close" "Expand"}}</span></button>
            </div>
        </div>

        {{#liquid-if membersPostAccessOpen}}
        <div class="flex flex-column w-50 flex mt8">
            <div class="gh-radio {{if (eq settings.defaultContentVisibility "public") "active"}}"
                {{action "setDefaultContentVisibility" "public" on="click"}}>
                <div class="gh-radio-button" data-test-publishmenu-unpublished-option></div>
                <div class="gh-radio-content">
                    <div class="gh-radio-label">Public<br>
                    <small class="midgrey">All site visitors to your site, no login required</small></div>
                </div>
            </div>

            <div class="gh-radio {{if (eq settings.defaultContentVisibility "members") "active"}}"
                {{action "setDefaultContentVisibility" "members" on="click"}}>
                <div class="gh-radio-button" data-test-publishmenu-published-option></div>
                <div class="gh-radio-content">
                    <div class="gh-radio-label">Members only<br>
                    <small class="midgrey">All logged-in members</small></div>
                </div>
            </div>

            <div class="gh-radio {{if (eq settings.defaultContentVisibility "paid") "active"}}"
                {{action "setDefaultContentVisibility" "paid" on="click"}}>
                <div class="gh-radio-button" data-test-publishmenu-published-option></div>
                <div class="gh-radio-content">
                    <div class="gh-radio-label">Paid-members only<br>
                    <small class="midgrey">Only logged-in members with an active Stripe subscription</small></div>
                </div>
            </div>
        </div>
        {{/liquid-if}}
    </section>

    <section class="bb b--whitegrey pa5">
        <div class="flex justify-between">
            <div>
                <h4 class="gh-setting-title">Email settings</h4>
                <p class="gh-setting-desc pa0 ma0">Customise signup, signin and subscription emails</p>
            </div>
            <div>
                <button type="button" class="gh-btn" {{action (toggle "membersEmailOpen" this)}} data-test-toggle-membersemail><span>{{if membersEmailOpen "Close" "Expand"}}</span></button>
            </div>
        </div>

        {{#liquid-if membersEmailOpen}}
        <div class="flex flex-column w-100 w-50-l flex mt8">
            {{#gh-form-group}}
            <label class="fw6 f8">From Address</label>
            <div class="flex items-center justify-center mt1 gh-input-group">
                {{gh-text-input
                    value=(readonly subscriptionSettings.fromAddress)
                    input=(action "setSubscriptionSettings" "fromAddress")
                    class="w20"
                }}
                <span class="gh-input-append"> @{{config.blogDomain}}</span>
            </div>
            <div class="f8 fw4 midgrey mt1">Your members will receive system emails from this address</div>
            {{/gh-form-group}}
            {{#if hasMailgunAPIKeyOption}}
                {{#gh-form-group}}
                    <label class="fw6 f8">Mailgun API key</label>
                    {{gh-text-input
                        type="password"
                        value=(readonly subscriptionSettings.mailgunApiKey)
                        input=(action "setSubscriptionSettings" "mailgunApiKey")
                        class="mt1 password"
                        autocomplete="new-password"
                    }}
                    <a href="https://app.mailgun.com/app/account/security/api_keys" target="_blank" class="mt1 fw4 f8">
                        Find your Mailgun API keys here &raquo;
                    </a>
                {{/gh-form-group}}

                {{#gh-form-group}}
                    <label class="fw6 f8">Mailgun domain</label>
                    {{gh-text-input
                        value=(readonly subscriptionSettings.mailgunDomain)
                        input=(action "setSubscriptionSettings" "mailgunDomain")
                        class="mt1"
                    }}
                {{/gh-form-group}}
            {{/if}}
        </div>
        {{/liquid-if}}
    </section>
</div>