{% extends "templates/web.html" %}

{% block title %} Payment {% endblock %}

{%- block header -%}
{% endblock %}

{% block script %}
<script src="https://js.stripe.com/v3/"></script>
<script>{% include "templates/includes/integrations/stripe_checkout.js" %}</script>
{% endblock %}

{%- block page_content -%}

<div class="row stripe" style="min-height: 400px; padding-bottom: 50px; margin-top:100px;">
	<div class="col-sm-8 col-sm-offset-2">
		<img src={{image}}>
		<h2 class="text-center">{{description}}</h2>
		<form id="payment-form">
			<div class="form-row">
				<div class="group">
					<div>
						<label>
							<span>{{ _("Name") }}</span>
						<input id="cardholder-name" name="cardholder-name" class="field" placeholder="{{ _('John Doe') }}" value="{{payer_name}}"/>
					</label>
					</div>
				</div>
				<div class="group">
					<div>
						<label>
							<span>{{ _("Email") }}</span>
						<input id="cardholder-email" name="cardholder-email" class="field" placeholder="{{ _('john@doe.com') }}" value="{{payer_email}}"/>
					</label>
					</div>
				</div>
				<div class="group">
					<label>
					<span>{{ _("Card Details") }}</span>
				<div id="card-element" name="card-element" class="field"></div>
				<div id="card-errors" role="alert"></div>
			</label>
			</div>

			</div>
			<button type="submit" class="submit" id="submit">{{_('Pay')}} {{amount}}</button>
			<div class="outcome text-center">
				<div class="error" hidden>{{ _("An error occured during the payment process. Please contact us.") }}</div>
				<div class="success" hidden>{{ _("Your payment has been successfully registered.") }}</div>
			</div>
		</form>
	</div>
</div>


{% endblock %}