Ghost/ghost/admin/app/components/settings/members/stripe-settings-form.hbs

165 lines
9.2 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="gh-main-section">
{{#if this.stripeDirect}}
<section>
<div class="flex flex-column flex-row-l items-start justify-between">
<div class="w-100 w-50-l">
<div class="mb4">
<label class="fw6 f8" for="stripe-publishable-key">Stripe Publishable key</label>
<input
type="text"
id="stripe-publishable-key"
class="gh-input mt1 password"
value={{this.stripeDirectPublicKey}}
{{on "input" this.setStripeDirectPublicKey}}
/>
</div>
<div class="nudge-top--3">
<label class="fw6 f8 mt4" for="stripe-secret-key">Stripe Secret key</label>
<input
type="text"
id="stripe-secret-key"
class="gh-input mt1 password"
value={{this.stripeDirectSecretKey}}
{{on "input" this.setStripeDirectSecretKey}}
/>
<a href="https://dashboard.stripe.com/account/apikeys" target="_blank" class="mt1 fw4 f8" rel="noopener noreferrer">
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 dont 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>
</div>
</section>
<div class="mb4 mt4 flex justify-end">
<GhTaskButton
@buttonText="Save settings"
@task={{this.saveSettingsTask}}
@successText="Saved"
@runningText="Saving"
@class="gh-btn gh-btn-primary gh-btn-icon"
data-test-button="save-members-settings"
/>
</div>
{{else}}
{{#if (and this.stripeConnectAccountId (not this.saveStripeSettingsTask.isRunning))}}
<button type="button" class="gh-btn gh-btn-stripe-disconnect" data-test-button="stripe-disconnect" {{on "click" this.openDisconnectStripeModal}}><span>Disconnect</span></button>
<div class="gh-stripe-connected-container">
<div class="gh-logos-stripe-connect">
<div class="gh-logo-squircle" style="background-image:url(assets/img/orb-squircle.png);"></div>
<div class="gh-logo-squircle" style="background-image:url(assets/img/stripe.svg);"></div>
</div>
<h1>You are connected to Stripe</h1>
<div class="gh-stripe-connected-info">
<div class="gh-stripe-site-title">
<p>Connected to <a href="https://dashboard.stripe.com/{{this.stripeConnectAccountId}}" target="_blank" rel="noopener noreferrer">{{this.stripeConnectAccountName}}</a></p>
{{#unless this.stripeConnectLivemode}}
<div class="gh-members-connect-testmodelabel">Test mode</div>
{{/unless}}
</div>
{{#if this.hasActiveStripeSubscriptions}}
<span class="gh-stripe-error-hasactivesub">
Cannot disconnect while there are members with active Stripe subscriptions.
</span>
{{/if}}
</div>
<div class="gh-stripe-guide-container">
<p>read next</p>
<a class="gh-stripe-guide" href="https://ghost.org/resources/managing-your-stripe-account/?ref=admin" target="_blank" rel="noopener noreferrer">
<div class="gh-stripe-guide-content">
<div class="gh-stripe-guide-content-body">
<h3>How to setup and manage your Stripe account</h3>
<p>Learn how to configure your Stripe account to work with Ghost, from custom branding to payment receipt emails.</p>
</div>
<div class="gh-stripe-guide-content-footer">
{{svg-jar "ghost-orb-pink"}}
<h4>Ghost Resources</h4>
<span>&middot;</span>
<p>Kym Ellis</p>
</div>
</div>
<div class="gh-stripe-guide-image">
<img src="https://ghost.org/resources/content/images/2022/02/Stripe---Home.jpg" alt="Stripe guide on Ghost Resources"/>
</div>
</a>
</div>
</div>
{{else}}
<div class="flex flex-column flex-row-l items-start justify-between">
<div class="w-100 w-50-l">
<label class="fw6 f8">Generate secure key</label>
<div class="flex items-center mb4 justify-between gh-members-connectbutton-container mt2">
<a href="{{if this.stripeConnectTestMode this.testStripeConnectAuthUrl this.liveStripeConnectAuthUrl}}" class="stripe-connect" target="_blank" rel="noopener noreferrer"><span></span></a>
<div class="ml2 flex items-center flex-nowrap">
<span class="mr2 f8 midgrey nowrap {{if this.stripeConnectTestMode "gh-members-connect-testmodeon"}}">{{if this.stripeConnectTestMode "Using" "Use"}} test mode</span>
<div class="for-switch small">
<label class="switch" for="stripe-connect-test-mode">
<input type="checkbox" id="stripe-connect-test-mode" class="gh-input" checked={{this.stripeConnectTestMode}} {{on "input" this.setStripeConnectTestMode}} aria-label="Use Stripe test mode" data-test-checkbox="stripe-connect-test-mode">
<span class="input-toggle-component mt1"></span>
</label>
</div>
</div>
</div>
<div class="nudge-top--3">
<textarea
class="gh-input gh-members-stripe-connect-token"
placeholder="Paste your secure key here"
aria-label="Stripe connect secure key"
{{on "input" this.setStripeConnectIntegrationToken}}
></textarea>
{{#if this.stripeConnectError}}<p class="mb0 mt2 f8 red">{{this.stripeConnectError}}</p>{{/if}}
</div>
</div>
<div class="mt5 mt5-m mt8-l ml0 ml5-l">
<div class="gh-members-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.<br />
Ghost collects <strong>no fees</strong> on any payments! If you dont 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>
</div>
<div class="gh-members-connect-savecontainer {{if this.settings.stripeConnectIntegrationToken "expanded"}}">
<GhTaskButton
@buttonText="Save Stripe settings"
@task={{this.saveStripeSettingsTask}}
@unlinkedTask={{true}}
@successText="Saved"
@disabled={{is-empty this.settings.stripeConnectIntegrationToken}}
@runningText="Saving"
@class="gh-btn gh-btn-green gh-btn-icon"
/>
</div>
{{/if}}
{{/if}}
</div>
{{#if this.showDisconnectStripeConnectModal}}
<GhFullscreenModal @modal="disconnect-stripe"
@model={{hash
stripeConnectAccountName=this.stripeConnectAccountName
}}
@confirm={{this.disconnectStripeConnectIntegration}}
@close={{this.closeDisconnectStripeModal}}
@modifier="action wide" />
{{/if}}