<div class="container-reset">
  <div class="form-horizontal well">
    <div class="column-12">
      <div class="buttons column-12">

        <div class="pull-right paypal-button-style paypal-button-container"></div>

      </div>
    </div>
  </div>
</div>

<script>
window.waitEvent('scripts_document', function () {
  paypal.Buttons({
    style: {
      layout:  'vertical',
      color:   'white',
      shape:   'rect',
      label:   'paypal'
      
    },
    createOrder: function() {
      return fetch('index.php?route=payment/paypal/createOrderPaypal', {
        method: 'post',
        headers: {
          'content-type': 'application/json'
        }
      }).then(function(res) {
        return res.json();
      }).then(function(data) {
        return data.result.id;
      });
    },
    onApprove: function(data, actions) {
      actions.order.capture().then(function(details) {
        $.ajax({
          type: 'POST',
          url: 'index.php?route=payment/paypal/returnPaypalCheckout',
          dataType : 'json',
          data : details,
          success: function(json) {
            if (!json['error']){
              location = json['redirect'];
            }
          },
          error: function(){
            console.log('Erro no pagamento paypal');
          }
        });
      });
    },
    onError: function (err) {
      console.log(err);
    }

  }).render('.paypal-button-container');
});
</script>
