Customize payment buttons


Overview

For most integrations, the default PayPalButton is sufficient. However, if you want greater control over your buttons customization, we offer several buttons with customization options.

PayPal button

You can customize the appearance of the PayPalButton in the following ways:

Property Description
color Changes the background color of the button and adjusts the wordmark color to be visible. The default value is gold, but you can also set it to: black, blue, silver, or white.
edges Overrides the shape of the button. The default value is softEdges, but you can also set it to hardEdges or rounded.
label Adds a label next to the button logo. The default value is no label, but you can also set it to: checkout, buyNow, or payWith.
size Adjusts the size of the button. The default value is collapsed, but you can also set it to: expanded, full, or mini.

Pay Later button

You can customize the appearance of the PayPalPayLaterButton in the following ways:

Property Description
color Changes the background color of the button and adjusts the wordmark color to be visible. The default value is gold, but you can also set it to: black, blue, silver, or white.
edges Overrides the shape of the button. The default value is softEdges, but you can also set it to hardEdges or rounded.
size Adjusts the size of the button. The default value is collapsed, but you can also set it to: expanded, full, or mini.

PayPal Credit button

Property Description
color Changes the background color of the button and adjust the wordmark color to be visible. The default value is darkBlue, but you can also set it to black or white.
edges Overrides the shape of the button. The default value is softEdges, but you can also set it to hardEdges or rounded.
size Adjusts the size of the button. The default value is collapsed, but you can also set it to: expanded, full, or mini.

Payment button eligibility

To ensure buyers have an optimal experience, every PaymentButton adheres to strict eligibility requirements. Generally, the PayPalButton is always Eligible so it's safe to fallback for other buttons.

Eligibility updates are communicated through a delegate property of the PaymentButton. To receive these events, conform to PaymentButtonDelegate:

class CheckoutView: UIView, PaymentButtonDelegate {

    var payPalButton = PayPalButton()

    func configurePayPalButton() {
        payPalButton.delegate = self
    }

    func onButtonStart(_ button: PaymentButton) {
        // Invoked when the button is tapped, before the checkout process begins.
    }

    func onButtonFinish(_ button: PaymentButton) {
        // Invoked when the checkout process has finished
    }

    func button(_ button: PaymentButton, changedEligibilityStatus status: PaymentButtonEligibilityStatus) {
        // Invoked when the eligibility status of the button has changed
    }
}

Both properties emit one value at a minimum, as the current value is emitted when either property is set. This is useful because the SDK retrieves funding eligibility requirements as soon as PayPalCheckout.setConfig is invoked. Usually, the funding eligibility retrieves by the time the PaymentButton renders. If funding eligibility isn't retrieved, the buttons are disabled and display a loading state.

You can also retrieve the current status through the eligibilityStatus property. The following are possible values:

Status Description
eligible The button is visible and enabled, so buyers can interact with it.
error The button is disabled and the visibility is hidden. This status only returns if there's an error retrieving the eligibility status.
ineligible The button is disabled and the visibility is hidden.
loading The button is disabled and the visibility is hidden.