I am having a problem, i developed a custom sign up page because portal is not so customizable but i don’t know how to manage the user sign up. If i click on subscribe a plan and finish the process (with testing card) no member is created in my local instance of Ghost (also i am using Dashi theme). My goal is to mimic the portal sign-up function: Requires name and email and that info is passed to Stripe checkout and then to the new created account/membership. If it’s too complicated at least i would like that an account/membership is created after i finish the checkout.
This is my custom page: `{{!< default}}
{{#if @member.paid}}
.checkout-plan {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding-bottom: 10%;
}
.aux-fixed-h{
min-height: 420px; /* Fixed height for the dynamic content */
overflow: auto; /* In case the content is more, it will become scrollable */
height: 730px;
padding: 10%;
}
.checkout-plan__content ul {
text-align: left;
list-style-type: disc;
padding-left: 20px;
}
.checkout-plan__content {
flex: 1 0 auto; /* This makes the content take up all available space, pushing the button down */
}
.btn-custom{
background-color: transparent;
padding-left: 10%;
padding-right: 10%;
font-weight: 300;
}
#price-year{
margin-top: 4%;
}
#currencySelect{
padding: 10px 20px;
border-radius:36px;
margin-bottom: 0;
font-weight: 600;
}
#choose-a-plan{
}
#choose-and-currency{
width: 100%;
display: flex; /* Set this element to flex */
justify-content: space-between; /* Space out the child elements */
padding: 0 2%;
}
.to-right{
align-items: flex-end;
}
{{!-- Logged in, paying member: Redirect home --}}
<script>window.location = '{{@site.url}}';</script>
{{else if @member}}
{{!-- Logged in, paying member: Redirect to account page --}}
<script>window.location = '/account/';</script>
{{else}}
{{#page}}
{{#if feature_image}}
<div class="site__cover">
<img class="lazyload"
data-srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-sizes="auto"
data-src="{{img_url feature_image size="m"}}"
src="{{img_url feature_image size="xxs"}}"
alt="{{title}}"
/>
</div>
{{/if}}
{{/page}}
<div class="site__inner">
<a href="/" class="site__brand">
{{!-- Add logo or title --}}
{{#if @site.logo}}
{{!-- Site logo --}}
<img class="site__logo"
src="{{img_url @site.logo size="s"}}"
alt="{{@site.title}}"/>
{{else}}
{{!-- Site Title --}}
{{@site.title}}
{{/if}}
</a>
<div class="site__content shadow">
<h1 class="site__title">{{#page}}{{title}}{{else}}{{t "Sign up"}}{{/page}}</h1>
<p id="form-input-label">{{t "Sign up to {sitetitle} to get access to more content ommgggg." sitetitle=@site.title}}</p>
{{> subscribe-form form_type="signup" button_text=(t 'Continue') name=true}}
<p class="m-t-lg m-0 text-center">
<small>{{t "Already have an account?"}} <a href="/signin/">{{t "Sign in"}}</a></small>
</p>
</div>
</div>
{{/if}}
<div class="hero__content flex flex-col flex-cc m-b-lg">
<div id="choose-and-currency" class="flex checkout grid m-b-lg">
<div class="flex-col">
<div id="choose-a-plan" class="flex-col page__excerpt m-t text-acc-3 text-center text-lg"><h2>Choose a plan</h2></div>
</div>
<div class="flex-col to-right">
<select id="currencySelect" class="m-t text-center text-lg">
<option value="USD"><strong>USD</strong></option>
<option value="EUR"><strong>EUR</strong></option>
<option value="MXN"><strong>MXN</strong></option>
</select>
</div>
</div>
</div>
</div>
{{! Show the dynamic part }}
<div class="checkout grid pricing js-membership m-b-lg">
{{! Get all tiers with yearly price and benefits data }}
{{#get "tiers" include="yearly_price,benefits" limit="all" as |tiers|}}
{{! Loop through our tiers collection }}
{{#foreach tiers}}
<div class="card checkout-plan tier-{{slug}}" data-tier="{{id}}" data-currency="{{currency}}">
<div class="aux-fixed-h">
<header class="checkout-plan__hdr flex flex-col flex-cc text-acc m-b-lg p-l p-r">
<h3 class="checkout-plan__title m-0">{{name}}</h3>
<div class="checkout-plan__price">
<strong>{{price yearly_price currency=currency}}</strong>
<sup>/Year</sup>
</div>
<div class="checkout-plan__description text-center m-t-sm text-11 text-acc">{{description}}</div>
</header>
<div class="checkout-plan__content text-acc m-b">
<ul class="m-b-0 text-acc-3">
{{#if benefits}}
{{#foreach benefits as |benefit|}}
<li>{{benefit}}</li>
{{/foreach}}
{{/if}}
</ul>
</div>
</div>
<div class="gh-portal-btn-product center" style="text-align: center">
<p id="price-year"><b>price per year:</b></p>
<a href="javascript:" data-portal="signup/{{id}}/yearly" class="btn btn--brand btn--sm btn--rounded btn-custom">{{price yearly_price currency=currency}} <b>{{currency}}</b></a>
</div>
</div>
{{/foreach}}
{{/get}}
</div>
`