Customize payment buttons
Overview
For most integrations, the default PayPalButton
is sufficient, because the PaymentButton
utilizes material theming, which enables the buttons to adapt to match the other buttons in your app. However, if you want greater control over your buttons customization, we offer several buttons with customization options.
Payment button
The PaymentButton
is the parent for all other buttons in the Native Checkout SDK for Android. The following attributes are available for use on every child button:
Attribute | Property | Description |
---|---|---|
payment_button_size |
size |
Adjusts the minimum height of the button. The default value is medium , but can also be set to: large or small . |
payment_button_shape |
shape |
Overrides the shape of the button. The default shape derives from the theme of your app, but you can set it to: pill , rectangle , or rounded . |
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. The button offers functional and non-functional properties to observe on the status. For example:
val paymentButton: PaymentButton //... // Functional paymentButton.onEligibilityStatusChanged = { buttonEligibilityStatus: PaymentButtonEligibilityStatus -> Log.i("PaymentButtonEligibility", "eligibility: $buttonEligibilityStatus") } // Non-functional paymentButton.paymentButtonEligibilityStatusChanged = object : PaymentButtonEligibilityStatusChanged { override fun onPaymentButtonEligibilityStatusChanged(paymentButtonEligibilityStatus: PaymentButtonEligibilityStatus) { Log.i("PaymentButtonEligibility", "$paymentButton : $paymentButtonEligibilityStatus") } }
paymentButton.setPaymentButtonEligibilityStatusChanged(new PaymentButtonEligibilityStatusChanged() { @Override public void onPaymentButtonEligibilityStatusChanged(@NotNull PaymentButtonEligibilityStatus paymentButtonEligibilityStatus) { Log.i("PaymentButtonEligibility", String.format("paymentButton : %s", paymentButtonEligibilityStatus)); } });
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 set hidden. This status only returns if there's an error retrieving the eligibility status. |
Ineligible |
The button is disabled and the visibility is set to hidden. |
Loading |
The button is visible, but disabled and displaying a loading indicator. |
PayPal button
Attribute | Property | Description |
---|---|---|
paypal_color |
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 . |
paypal_label |
label |
Adds a label on the button itself. The default value is no label, which is set with paypal , but you can also set it to: checkout , buy_now , or pay . |
Pay Later button
The PayLaterButton
overrides the PayPalButton
and always displays the Pay Later branding on the button as a label. You can't modify the label
, but you can change the color
to any color available for the PayPalButton
.
PayPal Credit button
Attribute | Property | Description |
---|---|---|
paypal_credit_color |
color |
Changes the background color of the button and adjusts the wordmark to be visible. You can set it to dark_blue or black . |