Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
126 lines (93 sloc) 6.12 KB
<div class="mt-4">
<h1 class="m-0 p-3 text-blue-darker text-center">Members area</h1>
<h2 class="mt-0 mb-2 text-center uppercase tracking-wide text-grey">Register</h2>
<div class="p-4">
<!-- Registration form starts. Redirect to the private content if successful. Add the data attribute needed by Charge -->
{{ user:register_form redirect="/private-content" attr="data-charge-form" }}
<!-- Add a containing div that puts the two sections side-by-side on wider screens -->
<!-- STATAMIC USER FIELDS -->
<div class="md:flex bg-grey-lighter py-6 px-4 rounded"> <!-- outer container -->
<div class="w-full md:w-1/2 px-3"> <!-- left col -->
<legend class="w-full mb-3 pb-1 text-xs uppercase tracking border-b border-grey text-blue-darker">Account details</legend>
<div class="mb-2">
<label class="block text-xs mb-1">Email</label>
<input class="p-3 input-reset border border-grey rounded w-full" type="text" name="email" value="{{ old:email }}" />
</div>
<div class="mb-2">
<label class="block text-xs mb-1">First Name</label>
<input class="p-3 input-reset border border-grey rounded w-full" type="text" name="first_name" value="{{ old:first_name }}" />
</div>
<div class="mb-2">
<label class="block text-xs mb-1">Last Name</label>
<input class="p-3 input-reset border border-grey rounded w-full" type="text" name="last_name" value="{{ old:last_name }}" />
</div>
<div class="mb-2">
<label class="block text-xs mb-1">Password</label>
<!-- No value="" attribute on these inputs, as we don't want to persist the passwords between page loads (if errors) -->
<input class="p-3 input-reset border border-grey rounded w-full" type="password" name="password" />
</div>
<div class="mb-2">
<label class="block text-xs mb-1">Password Confirmation</label>
<input class="p-3 input-reset border border-grey rounded w-full" type="password" name="password_confirmation" />
</div>
</div> <!-- end left col -->
<!-- STRIPE/CHARGE FIELDS -->
<div class="w-full md:w-1/2 px-3 mt-8 md:mt-0"> <!-- right col -->
<legend class="w-full mb-3 pb-1 text-xs uppercase tracking border-b border-grey text-blue-darker">Payment</legend>
<!-- hidden field that sets the "plan", value matches the ID of the Stripe subscription plan -->
<input type="hidden" name="plan" id="plan" value="demo_membership">
<div class="mb-2">
<label class="block text-xs mb-1" for="cc_name">Name on Card</label>
<input class="p-3 input-reset border border-grey rounded w-full" type="text" data-stripe="name" id="cc_name" required>
</div>
<div class="mb-2">
<label class="block text-xs mb-1" for="cc_number">Zip/Postal Code</label>
<input class="p-3 input-reset border border-grey rounded w-full" type="text" data-stripe="address_zip" id="address_zip" required>
</div>
<div class="mb-2">
<label class="block text-xs mb-1" for="cc_number">Card Number</label>
<input class="p-3 input-reset border border-grey rounded w-full" type="text" data-stripe="number" id="cc_number" required placeholder="4242 4242 4242 4242">
</div>
<div class="table w-100 mb-2">
<div class="table-cell pr-3">
<label class="block text-xs mb-1" for="exp_month">Exp. Month</label>
<input class="p-3 input-reset border border-grey rounded w-full" type="text" data-stripe="exp_month" id="exp_month" maxlength="2" required placeholder="02">
</div>
<div class="table-cell pr-3">
<label class="block text-xs mb-1" for="exp_year">Exp. Year</label>
<input class="p-3 input-reset border border-grey rounded w-full" type="text" data-stripe="exp_year" id="exp_year" maxlength="2" required placeholder="18">
</div>
<div class="table-cell">
<label class="block text-xs mb-1" for="cvc">CVC</label>
<input class="p-3 input-reset border border-grey rounded w-full" type="text" data-stripe="cvc" id="cvc" maxlength="4" required placeholder="576">
</div>
</div>
</div> <!-- end right col -->
</div> <!-- End content block -->
<!-- check for errors in the form submission -->
{{ if errors }}
<div class="max-w-sm mx-auto text-center p-3 my-4 rounded bg-red-dark text-white">
<h4 class="mt-0 mb-2 pb uppercase tracking text-sml">Errors:</h4>
<!-- loop over those errors -->
{{ errors }}
<!-- outputting the value of each, comes from Statamic/Charge/Stripe internals -->
<div class="text-xs mb-1">- {{ value }}</div>
{{ /errors }}
</div>
{{ /if }}
<!-- submit button, again with relevant data attribute -->
<button
class="max-w-sm block w-full mx-auto border-none mt-4 text-lg p-3 bg-blue rounded text-white cursor-pointer"
id="register"
data-charge-button
>Register</button>
<!-- end user registration form -->
{{ /user:register_form }}
<a class="block w-full text-blue-darker font-medium my-4 text-center" href="/login">Already have an account? Login</a>
</div>
</div>
<!-- render the contents of these tags into the yield in the layout file -->
{{ section:extra_js }}
<!-- Stripe JS library included with Charge -->
{{ charge:js }}
{{ /section:extra_js }}
You can’t perform that action at this time.