57 lines
1.6 KiB
HTML
57 lines
1.6 KiB
HTML
|
{% 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 %}
|