Checkout

Use the PayPal JavaScript SDK to create your checkout experience on your site. With the SDK, buyers can pay with PayPal using Smart Payment Buttons.

Smart Payment Buttons

Smart Payment Buttons automatically present the most relevant payment types to your buyers using methods like PayPal Credit, credit card payments, iDEAL, Bancontact, Sofort, and other payment types.

To render the Smart Payment Buttons, pass your client ID as a query parameter to the PayPal Javascript SDK. To run test transactions, pass your sandbox client ID.

<script src="https://www.paypal.com/sdk/js?client-id=Client-ID&merchant-id=Merchant-ID&currency=USD&intent=capture" data-partner-attribution-id="BN-Code"></script>

<div id="paypal-button-container"></div>

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

• Pass the merchant ID of the seller you're facilitating a payment for in the merchant-id query parameter.
• To receive revenue attribution, set data-partner-attribution-id to your partner attribution ID.
• Set intent to capture to immediately capture funds.

For the buttons to work, you must implement the createOrder and onApprove functions when rendering the buttons.

<script src="https://www.paypal.com/sdk/js?client-id=Client-ID&merchant-id=Merchant-ID&currency=USD&intent=capture" data-partner-attribution-id="BN-Code"></script>

<div id="paypal-button-container"></div>

<script>
  paypal.Buttons({
    createOrder: function(data, actions) {
      return fetch('/my-server/create-order', {
        method: 'POST'
      }).then(function(res) {
        return res.json();
      }).then(function(data) {
        return data.id;
      });
    },
    onApprove: function(data, actions) {
      return fetch('/my-server/handle-approve/' + data.orderID, {
        method: 'POST'
      }).then(function(res){
        if (!res.ok) {
          alert('Something went wrong');
        }
      });
    }
  }).render('#paypal-button-container');
</script>

• createOrder is called when the buyer clicks on one of the Smart Payment Buttons. This function must return an order ID to render the checkout flow. In this example, createOrder calls your server to get the order ID.
• onApprove is called when the buyer approves the order. This happens when the buyer successfully completes the checkout flow. In this example, onApprove calls your server to immediately capture the order.

Additional features

See the following links to add features and functionality to your Smart Payment Buttons integration:

• Customize the SDK
• Customize the Buttons
• Update an Order
• Standard Card Fields
• Alternative Payment Methods

Next

Immediate Capture.