JSFiddle - React, Tailwind, and code Playground

by id0

HTML

<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<div class="container">
  <div id="paypal-button-container"></div>
</div>

CSS

.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

JavaScript

// Render the PayPal button

paypal.Button.render({

  // Set your environment

  env: 'sandbox', // sandbox | production

  // Specify the style of the button

  style: {
    layout: 'vertical',  // horizontal | vertical
    size:   'large',    // medium | large | responsive
    shape:  'rect',      // pill | rect
    color:  'gold'       // gold | blue | silver | black
  },

  // Specify allowed and disallowed funding sources
  //
  // Options:
  // - paypal.FUNDING.CARD
  // - paypal.FUNDING.CREDIT
  // - paypal.FUNDING.ELV

  funding: {
    allowed: [ paypal.FUNDING.CARD ],
    disallowed: [ paypal.FUNDING.ELV, paypal.FUNDING.CREDIT ]
  },

  // PayPal Client IDs - replace with your own
  // Create a PayPal app: https://developer.paypal.com/developer/applications/create

  client: {
    //sandbox:    'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
    sandbox: 'AS9zAWpQg3IgOuKvukqE1-jKU2UR2AA5QInpCI-jv6qzs-UEGYamlv8bBKvoIJPe-clcGINI6nrNyglG',
    production: '<insert production client id>'
  },

  payment: function(data, actions) {
    return actions.payment.create({
      payment: {
        transactions: [
          {
            amount: { total: '150.99', currency: 'EUR' }
          }
        ]
      }
    });
  },

  onAuthorize: function(data, actions) {
    return actions.payment.execute().then(function(PaymentDetails) {
      console.log('PaymentDetails:', PaymentDetails)
      window.alert('Payment complete!')
    })
  }

}, '#paypal-button-container');