{% extends 'forms/transaction_form.html' %}

{% block extrahead %}
<!-- Load the client component. -->
<script src="https://js.braintreegateway.com/web/3.6.3/js/client.min.js"></script>
<!-- Load the PayPal component. -->
<script src="https://js.braintreegateway.com/web/3.6.3/js/paypal.min.js"></script>
{% endblock %}

{% block form %}
    <div style="vertical-align: middle; text-align: center; margin: auto; align: center;">
        <div style="margin: auto;">
            <script src="https://www.paypalobjects.com/api/button.js?"
                 data-merchant="braintree"
                 data-id="paypal-button"
                 data-button="checkout"
                 data-color="gold"
                 data-size="medium"
                 data-shape="pill"
                 data-button_type="submit"
                 data-button_disabled="false"
             ></script>
        </div>
    </div>
    <!-- Configuration options:
      data-color: "blue", "gold", "silver"
      data-size: "tiny", "small", "medium"
      data-shape: "pill", "rect"
      data-button_disabled: "false", "true"
      data-button_type: "submit", "button"
    --->
    {% include "forms/braintree/braintree_ui.html" %}
{% endblock %}

{% block transaction %}
    {{ block.super }}
    {{ payment_method.data.details }}
{% endblock %}

{% block document_details %}
  <table cellspacing="0" cellpadding="0">
    <tr>

      <td colspan="5">
        <h4>Amount paid</h4>
      </td>

      <td>
        <h4>{{ transaction.amount }} {{ transaction.currency }}</h4>
      </td>

    </tr>
  </table>
{% endblock %}