{% raw %}
<form id="coupon" data-controller="cart-coupon" data-action="cart-coupon#apply"></form>

<form
  data-action="cart-payment-methods#pay"
  data-target="cart-payment-methods.form">
  {% for payment_method in payment_methods %}
    <div class="custom-control custom-radio mt-3">
      <input
        class="custom-control-input"
        type="radio"
        data-target="cart-payment-methods.method"
        name="payment_method_id"
        id="payment_method_id_{{ payment_method.id }}"
        value="{{ payment_method.id }}"
        />

      <label
        class="font-weight-bold custom-control-label"
        for="payment_method_id_{{ payment_method.id }}">
        <h3>{{ payment_method.attributes.name }}</h3>

        <p class="lead">{{ payment_method.attributes.description }}</p>
      </label>
    </div>
  {% endfor %}

  <div class="border-top pt-3 d-flex justify-content-between flex-wrap">
    <div class="order-last order-md-first mt-3 mt-sm-0">
      <a href="{{ back.url }}"
          class="btn btn-transparent border border-black black text-uppercase">
        {{ site.payment.back }}
      </a>
    </div>

    <div class="order-first order-md-last">
      <details class="w-100 mb-3">
        <summary class="blue"><small>{{ site.i18n.cart.layouts.payment.promo_code }}</small></summary>

        <div class="d-flex">
          {% comment %}
            Estos elementos pertenecen al formulario de cupones
          {% endcomment %}
          <div class="flex-grow-1 mr-2">
            <label for="coupon_code" class="sr-only">{{ site.payment.promo_code }}</label>
            <input form="coupon" type="text" id="coupon_code" name="coupon_code" required class="form-control" />
            <div id="coupon-code-invalid" class="invalid-feedback"></div>
          </div>

          <div>
            <input form="coupon" type="submit" value="Aplicar" class="btn btn-secondary" />
          </div>
        </div>
      </details>

      <input type="submit"
        class="btn btn-primary btn-lg text-uppercase"
        data-target="cart-payment-methods.submit"
        disabled
        value="{{ site.payment.next_step }} {{ cart.data.attributes.total | floor }} {{ cart.data.attributes.currency }}"/>
    </div>
  </div>
</form>
{% endraw %}