{% if payment_pp_express_incontext_disable != 1 %}
  <style>
    @media screen and (max-width: 400px) {
      .pp-checkout-button-container {
        width: 100%;
        margin-left:auto;
        margin-right:auto;
      }
    }

    @media screen and (min-width: 400px) {
      .pp-checkout-button-container {
        width: 400px;
        margin-left:auto;
        margin-right:auto;
      }
    }
  </style>

  <div class="buttons">
    <div class="pp-checkout-button-container">
      <div id="pp-checkout-button" />
    </div>
  </div>

  <script>
    (function () {
      paypal.Button.render({
        env: '{{ paypal_environment }}',
        style: {
          layout: '{{ payment_pp_express_style_layout }}',
          size:   '{{ payment_pp_express_style_size }}',
          shape:  '{{ payment_pp_express_style_shape }}',
          color:  '{{ payment_pp_express_style_color }}'
        },
        commit: true,
        funding: {
          allowed: [{{ allowed_payment_methods }}],
          disallowed: [{{ disallowed_payment_methods }}]
        },
        payment: function (data, actions) {
          return paypal.request.get("{{ continue }}", {
            headers: {
              'Accept': 'application/paypal-json-token',
            }
          }).then(function (response) {
            if (!response || !response.token) {
              throw new Error('There was an error fetching the PayPal token');
            }

            return response.token;
          }).catch(function (err) {
            throw err;
          });
        },
        onAuthorize: function (data, actions) {
          return actions.redirect();
        },
        onCancel: function (data, actions) {
          return actions.redirect();
        },
        onError: function (error) {
          $('.pp-checkout-button-container').empty().html('<div class="alert alert-danger">' + error + '</div>');
          return;
        }
      }, '#pp-checkout-button');
    })();
  </script>
{% else %}
  <div class="buttons">
    <div class="pull-right">
      <a href="{{ continue }}" class="btn btn-primary" id="button-confirm" data-loading-text="{{ text_loading }}">{{ button_continue }}</a>
    </div>
  </div>
  <script type="text/javascript"><!--
    $('#button-confirm').on('click', function() {
      $('#button-confirm').button('loading');
    });
  //--></script>
{% endif %}