<div class="unzerUI form">
    <div class="field">
        <div id="giropay-{{ paymentId }}" class="unzerInput">
        </div>
    </div>
    <div class="divider"></div>
</div>

<div class="modal fade" id="unzerWaitingDialog-{{ paymentId }}" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center">{{ translate({ ident: "D3UNZER_PAYMENT_PLEASE_WAIT" }) }}</div>
        </div>
    </div>
</div>

{% set doNotShow %}
    <script type="text/javascript">
        {% set javaScript %}
            var unzerInstance;
            if( "undefined" === typeof unzerInstance  ) {
                unzerInstance = new unzer('{{ d3UnzerPublicKey }}', {locale: '{{ d3UnzerLanguageLocale }}'});
            }
            var Giropay_{{ paymentId|escape('url') }} = unzerInstance.Giropay();

            var form = document.getElementById('payment');
            form.addEventListener('submit',
                function (event) {
                    if ($('#{{ selectorId }}').is(':checked')) {
                        event.preventDefault();
                        $('#error-{{ paymentId }}').remove();
                        Giropay_{{ paymentId|escape('url') }}.createResource()
                            .then(function (result) {
                                // Success
                                var hiddenField = document.createElement("input");
                                hiddenField.value = JSON.stringify(result);
                                hiddenField.type = 'hidden';
                                hiddenField.name = "unzer-result";
                                form.appendChild(hiddenField);
                                form.submit();
                            })
                    }
                });
        {% endset %}
    </script>
{% endset %}
{{ script({ add: javaScript.__toString(), dynamic: __oxid_include_dynamic }) }}

