{% extends 'base.html.twig' %}

{% block title %}Hello StripeController!{% endblock %}

{% block body %}
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>

<div class="container" data-controller="stripe">
    <div class="row">
        <div class="col card">
            <form id="payment-form">
                <div id="payment-element">
                    <!-- Elements will create form elements here -->
                </div>
                <button id="submit">Submit</button>
                <div id="error-message">
                    <!-- Display error message to your customers here -->
                </div>
            </form>
        </div>
    </div>

</div>
{% endblock %}
