{% extends 'layout.html' %}

{% block content %}
<h1 class="page-title text-center">Sample</h1>
<div class="mt-4 text-center">
  <div id="paypal-btn"></div>
  <div id="result" class="mt-4"></div>
</div>
<script>
  paypal.Buttons({
    createBillingAgreement: function () {
      return fetch('token', {
        method: 'get'
      }).then(function (res) {
        return res.json();
      }).then(function (data) {
        console.log(data);
        return data.token_id;
      });
    },

    onApprove: function (data) {
      console.log(data);
      return fetch('execute', {
        method: 'post',
        headers: {
          'content-type': 'application/json'
        },
        body: JSON.stringify({
          billingToken: data.billingToken
        })
      }).then(function (res) {
        return res.json();
      }).then(function (data) {
        document.querySelector('#result').innerHTML = JSON.stringify(data);
      });
    }
  }).render('#paypal-btn');
</script>
{% endblock %}