167 lines
9.0 KiB
PHP
167 lines
9.0 KiB
PHP
@extends('spark::layouts.app')
|
|
|
|
@section('scripts')
|
|
<script src="https://js.stripe.com/v2/"></script>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<spark-register-stripe inline-template>
|
|
<div>
|
|
<div class="spark-screen container">
|
|
<!-- Common Register Form Contents -->
|
|
@include('spark::auth.register-common')
|
|
|
|
<!-- Billing Information -->
|
|
<div class="row" v-if="selectedPlan && selectedPlan.price > 0">
|
|
<div class="col-md-8 col-md-offset-2">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">Billing Information</div>
|
|
|
|
<div class="panel-body">
|
|
<!-- Generic 500 Level Error Message / Stripe Threw Exception -->
|
|
<div class="alert alert-danger" v-if="registerForm.errors.has('form')">
|
|
We had trouble validating your card. It's possible your card provider is preventing
|
|
us from charging the card. Please contact your card provider or customer support.
|
|
</div>
|
|
|
|
<form class="form-horizontal" role="form">
|
|
<!-- Billing Address Fields -->
|
|
@if (Spark::collectsBillingAddress())
|
|
<h2><i class="fa fa-btn fa-map-marker"></i>Billing Address</h2>
|
|
|
|
@include('spark::auth.register-address')
|
|
|
|
<h2><i class="fa fa-btn fa-credit-card"></i>Credit Card</h2>
|
|
@endif
|
|
|
|
<!-- Cardholder's Name -->
|
|
<div class="form-group">
|
|
<label for="name" class="col-md-4 control-label">Cardholder's Name</label>
|
|
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control" name="name" v-model="cardForm.name">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Number -->
|
|
<div class="form-group" :class="{'has-error': cardForm.errors.has('number')}">
|
|
<label class="col-md-4 control-label">Card Number</label>
|
|
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control" name="number" data-stripe="number" v-model="cardForm.number">
|
|
|
|
<span class="help-block" v-show="cardForm.errors.has('number')">
|
|
@{{ cardForm.errors.get('number') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Code -->
|
|
<div class="form-group">
|
|
<label class="col-md-4 control-label">Security Code</label>
|
|
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control" name="cvc" data-stripe="cvc" v-model="cardForm.cvc">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Expiration -->
|
|
<div class="form-group">
|
|
<label class="col-md-4 control-label">Expiration</label>
|
|
|
|
<!-- Month -->
|
|
<div class="col-md-3">
|
|
<input type="text" class="form-control" name="month"
|
|
placeholder="MM" maxlength="2" data-stripe="exp-month" v-model="cardForm.month">
|
|
</div>
|
|
|
|
<!-- Year -->
|
|
<div class="col-md-3">
|
|
<input type="text" class="form-control" name="year"
|
|
placeholder="YYYY" maxlength="4" data-stripe="exp-year" v-model="cardForm.year">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ZIP Code -->
|
|
<div class="form-group" :class="{'has-error': registerForm.errors.has('zip')}" v-if=" ! spark.collectsBillingAddress">
|
|
<label class="col-md-4 control-label">ZIP / Postal Code</label>
|
|
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control" name="zip" v-model="registerForm.zip">
|
|
|
|
<span class="help-block" v-show="registerForm.errors.has('zip')">
|
|
@{{ registerForm.errors.get('zip') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Coupon Code -->
|
|
<div class="form-group" :class="{'has-error': registerForm.errors.has('coupon')}" v-if="query.coupon">
|
|
<label class="col-md-4 control-label">Coupon Code</label>
|
|
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control" name="coupon" v-model="registerForm.coupon">
|
|
|
|
<span class="help-block" v-show="registerForm.errors.has('coupon')">
|
|
@{{ registerForm.errors.get('coupon') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Terms And Conditions -->
|
|
<div class="form-group" :class="{'has-error': registerForm.errors.has('terms')}">
|
|
<div class="col-md-6 col-md-offset-4">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" v-model="registerForm.terms">
|
|
I Accept The <a href="/terms" target="_blank">Terms Of Service</a>
|
|
|
|
<span class="help-block" v-show="registerForm.errors.has('terms')">
|
|
<strong>@{{ registerForm.errors.get('terms') }}</strong>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tax / Price Information -->
|
|
<div class="form-group" v-if="spark.collectsEuropeanVat && countryCollectsVat && selectedPlan">
|
|
<label class="col-md-4 control-label"> </label>
|
|
|
|
<div class="col-md-6">
|
|
<div class="alert alert-info" style="margin: 0;">
|
|
<strong>Tax:</strong> @{{ taxAmount(selectedPlan) | currency }}
|
|
<br><br>
|
|
<strong>Total Price Including Tax:</strong>
|
|
@{{ priceWithTax(selectedPlan) | currency }} / @{{ selectedPlan.interval | capitalize }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Register Button -->
|
|
<div class="form-group">
|
|
<div class="col-md-6 col-md-offset-4">
|
|
<button type="submit" class="btn btn-primary" @click.prevent="register" :disabled="registerForm.busy">
|
|
<span v-if="registerForm.busy">
|
|
<i class="fa fa-btn fa-spinner fa-spin"></i>Registering
|
|
</span>
|
|
|
|
<span v-else>
|
|
<i class="fa fa-btn fa-check-circle"></i>Register
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plan Features Modal -->
|
|
@include('spark::modals.plan-details')
|
|
</div>
|
|
</spark-register-stripe>
|
|
@endsection
|