Get started with paypaljsbuttons CDN

MIT licensed

PayPaljsButtons is a library for integrating PayPal checkout buttons into websites using JS.

Tags:
  • paypal
  • paypal button
  • credit card
  • payment
  • payments
  • ecommerce
  • javascriptbuttons
  • jsbuttons

Stable version

Copied!

How to start using paypaljsbuttons CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with paypaljsbuttons CDN - cdnhub.io</title>
  <script src="https://cdn.jsdelivr.net/npm/paypal-checkout@latest/paypal-checkout.min.js"></script>
  <script src="https://cdn.cdnhub.io/paypaljsbuttons/2.0.1/paypal-button.min.js"></script>
  <style>
    body { font-family: Arial, sans-serif; }
    #paypal-button-container { width: 100%; }
  </style>
</head>
<body>
  <button id="pay-button" class="paypal-button paypal-button-setup" data-amount="10.00" data-currency="USD">Pay with PayPal</button>
  <div id="paypal-button-container"></div>

  <script>
    paypal.Buttons({
      createOrder: function(data, actions) {
        return actions.service.createOrder({
          intent: 'CAPTURE',
          purchase_units: [{
            amount: {
              currency_code: 'USD',
              value: '10.00'
            }
          }]
        });
      },

      onApprove: function(data, actions) {
        return actions.order.capture().then(function(orderData) {
          // Successful capture! For javascript3.2.x, use 'order.get()' instead
          console.log('Capture result: ' + JSON.stringify(orderData, null, 2));
          const paypalButtonContainer = document.getElementById('paypal-button-container');
          paypalButtonContainer.innerHTML = '<h3>Thank you for your payment!</h3>';
        });
      },

      onError: function(err) {
        console.log('Error: ' + JSON.stringify(err, null, 2));
      },

      style: {
        label: 'paypal-button-wrapper',
        layout: 'vertical'
      }
    }).render('#pay-button');
  </script>
</body>
</html>
Copied!

All versions