PayPalButtons Container

The PayPalButtons container renders a set of checkout buttons that enable shoppers to pay using PayPal — including PayPal, Venmo, Pay Later, and debit/credit card, depending on which funding sources are enabled for the merchant.

Version: 4.1.0

Configuration

The PayPalButtons container provides the following configuration options:

Option	Type	Req?	Description
onButtonClick	function	No	Called when the shopper clicks a PayPal button. Receives a showPaymentSheet function, which must be called synchronously to begin the PayPal checkout and show the payment sheet. If not provided, clicking the button automatically triggers the payment sheet.
onSuccess	function	No	Called when the payment completes successfully. Receives { cartId: string }. If the function returns a promise, it is awaited before marking the payment as successful. If the promise rejects, the payment is marked as failed and the error is passed to onError (if provided).
onError	function	No	Called when the payment flow fails or is aborted. Receives { name: string, message: string }, containing localized, user-facing error details. These values can be translated using PaymentServices.PayPalButtons.errors language definitions.
hidden	boolean	No	Whether the buttons are hidden. Set to true to hide the PayPal buttons. Default: false.
disabled	boolean	No	Whether the buttons are disabled. Set to true to disable the PayPal buttons. Default: false.

Slots

This container does not expose any customizable slots.

Usage

Checkout page example

The following example demonstrates how to use the PayPalButtons container on the checkout page.

import PayPalButtons from '@dropins/storefront-payment-services/containers/PayPalButtons.js';
import { render as PaymentServices } from '@dropins/storefront-payment-services/render.js';
import * as orderApi from '@dropins/storefront-order/api.js';

const $content = document.createElement('div');
PaymentServices.render(PayPalButtons, {
  onSuccess: ({ cartId }) => orderApi.placeOrder(cartId),
  onError: (error) => { console.error(error) },
})($content);