mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-04 12:44:57 +03:00
165 lines
9.2 KiB
Handlebars
165 lines
9.2 KiB
Handlebars
<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 »
|
||
</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 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>·</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 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>
|
||
</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}}
|