<!-- Pricing Table -->
<div class="page-section">
  <div class="container">
    <div class="row justify-content-center text-center wow fadeInUp">
      <div class="col-lg-6">
        <h2 class="mb-3">Get awesome features, without extra charges</h2>
        <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores non magnam, quis aliquid dolor magni</p>

        <div class="btn-group btn-group-toggle rounded-pill btn-switch" data-toggle="buttons">
          <label class="btn active">
            <input type="radio" name="options" id="option1" checked> Tryton
          </label>
          <label class="btn">
            <input type="radio" name="options" id="option2"> Custom
          </label>
        </div>
      </div>
    </div>
    <div class="pricing-table mt-5 wow fadeInUp">
      <div class="pricing-item active no-transform">
        <div class="pricing-header">
          <h5>Tryton - Pro</h5>
          <h1 class="fw-normal">$9.99</h1>
        </div>
        <div class="pricing-body">
          <ul class="theme-list">
            <li class="list-item">Advanced Alert system</li>
            <li class="list-item">Advanced Dashboard</li>
            <li class="list-item">Realtime stats</li>
            <li class="list-item">Advanced Moderation</li>
            <li class="list-item">Highly customizable</li>
            <li class="list-item">24/7 Support</li>
            <li class="list-item">All Tryton's functions</li>
          </ul>
        </div>
        <div id="smart-button-container">
          <div style="text-align: center;">
            <div id="paypal-button-container"></div>
          </div>
        </div>
      <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD" data-sdk-integration-source="button-factory"></script>
      <script>
        function initPayPalButton() {
          paypal.Buttons({
            style: {
              shape: 'rect',
              color: 'gold',
              layout: 'vertical',
              label: 'buynow',

            },

            createOrder: function(data, actions) {
              return actions.order.create({
                purchase_units: [{"amount":{"currency_code":"USD","value":1}}]
              });
            },

            onApprove: function(data, actions) {
              return actions.order.capture().then(function(details) {
                alert('Transaction completed by ' + details.payer.name.given_name + '!');
              });
            },

            onError: function(err) {
              console.log(err);
            }
          }).render('#paypal-button-container');
        }
        initPayPalButton();
      </script>
      </div>
      <div class="pricing-item active no-transform">
        <div class="pricing-header">
          <h5>Tryton - Basic</h5>
          <h1 class="fw-normal">$2.49</h1>
        </div>
        <div class="pricing-body">
          <ul class="theme-list">
            <li class="list-item">Push Notification</li>
            <li class="list-item">Unlimited Bandwith</li>
            <li class="list-item">Realtime Database</li>
            <li class="list-item">Monthly Backup</li>
            <li class="list-item">24/7 Support</li>
          </ul>
          <div id="smart-button-container">
            <div style="text-align: center;">
              <div id="paypal-button-container"></div>
            </div>
          </div>
        <script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD" data-sdk-integration-source="button-factory"></script>
        <script>
          function initPayPalButton() {
            paypal.Buttons({
              style: {
                shape: 'rect',
                color: 'gold',
                layout: 'vertical',
                label: 'buynow',

              },

              createOrder: function(data, actions) {
                return actions.order.create({
                  purchase_units: [{"amount":{"currency_code":"USD","value":1}}]
                });
              },

              onApprove: function(data, actions) {
                return actions.order.capture().then(function(details) {
                  alert('Transaction completed by ' + details.payer.name.given_name + '!');
                });
              },

              onError: function(err) {
                console.log(err);
              }
            }).render('#paypal-button-container');
          }
          initPayPalButton();
        </script>
        </div>

      </div>
      <div class="pricing-item">
        <div class="pricing-header">
          <h5>Tryton - Free</h5>
          <h1 class="fw-normal">$0.00, FREE</h1>
        </div>
        <div class="pricing-body">
          <ul class="theme-list">
            <li class="list-item">Tryton's basic functions</li>
            <li class="list-item">low-based support</li>
            <li class="list-item">basic moderation</li>
          </ul>
        </div>
        <a href="#" class="btn btn-outline-primary rounded-pill">Invite to your server!</a>
      </div>
    </div>
  </div>
</div>

<hr>