JS SDK Reference for Payment Fields

paypal.Buttons(options)

• style
• createOrder
• onApprove
• onCancel
• onError

style

Customize your buttons by passing in the style option.

paypal.Buttons({
  style: {
    layout: 'vertical',
    label:  'paypal'
  }
}).render('#paypal-button-container');

Note: Alternative payment methods supports only vertical layout.

See additional, optional parameters.

createOrder

The createOrder parameter sets up the details of the transaction. It's called when the buyer clicks the PayPal button, which launches the PayPal Checkout window where the buyer logs in and approves the transaction on the paypal.com website.

<script>
  paypal.Buttons({
    // Order is created on the server and the order id is returned
    createOrder() {
      return fetch("/my-server/create-paypal-order", {
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        // use the "body" param to optionally pass additional order information
        // like product skus and quantities
        body: JSON.stringify({
          cart: [
            {
              sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
              quantity: "YOUR_PRODUCT_QUANTITY",
            },
          ],
        }),
      })
      .then((response) => response.json())
      .then((order) => order.id);
    },
  }).render('#paypal-button-container');
</script>

onApprove

The onApprove function is called after the buyer approves the transaction.

Make the capture call from your server to capture the funds from the transaction and show a message to the buyer to let them know the transaction is successful.

onCancel

When a buyer cancels a payment, they typically return to the parent page. You can instead use the onCancel function to show a cancellation page or return to the shopping cart.

Data attributes

orderId — ID of the order.

paypal.Buttons({
  onCancel: function (data) {
    // Show a cancel page, or return to cart
  }
}).render('#paypal-button-container');

onError

If an error prevents buyer checkout, alert the user that an error has occurred with the buttons using the onError callback:

paypal.Buttons({
  onError: function (err) {
    // For example, redirect to a specific error page
    window.location.href = "/your-error-page-here";
  }
}).render('#paypal-button-container');

Note: This error handler is a catch-all. Errors at this point are not expected to be handled beyond showing a generic error message or page.

paypal.Buttons().isEligible

Before rendering marks and payment fields, you can use paypal.Buttons().isEligible to check if the funding source is eligible.

// Loop over each funding source / payment method
paypal.getFundingSources().forEach(function(fundingSource) {

  // Initialize the buttons
  var button = paypal.Buttons({
    fundingSource: fundingSource
  });

  // Check if the button is eligible
  if (button.isEligible()) {

    // Render the standalone button for that funding source
    button.render('#paypal-button-container');
  }
});

Funding

This table includes the available alternative payment methods.

* Important: Sofort will be sunset on April 18, 2024. PayPal will not support Sofort payments starting April 19, 2024. Offer your users PayPal wallet and other alternative payment methods. Learn more.