Skip to navigation
SDKAndroid SDK

Android UI components

The Afterpay Android SDK includes prebuilt views that follow the brand guidelines for each region. This guide shows the Afterpay branding that merchants in Australia, New Zealand, and Canada display.

Mint payment button with the text Pay now with and a black Afterpay wordmark
ComponentClassUse it to
Payment buttonAfterpayPaymentButtonStart checkout.
LogoAfterpayLockup, AfterpayBadgeShow the brand logo, for example in a list of payment methods.
Price breakdownAfterpayPriceBreakdownShow the installment amount for a price, with a link to more information.
Checkout widgetAfterpayWidgetViewShow the payment schedule for an order, and update it when the total changes.

All components are in the com.afterpay.android.view package. You can add any of them in an XML layout or create them in Kotlin. You must initialize the checkout widget in code.

Configure the SDK first

The components read your merchant configuration to choose the brand, language, currency format, and order limits. Call Afterpay.setConfiguration before you inflate or create any component. For details, see Configure the SDK.

Afterpay.setConfiguration(
  minimumAmount = configuration.minimumAmount?.amount,
  maximumAmount = configuration.maximumAmount.amount,
  currencyCode = configuration.maximumAmount.currency,
  locale = Locale("en", "AU"),
  environment = AfterpayEnvironment.SANDBOX,
)
Set the configuration before you create views

Each component resolves its color scheme for the configured locale when you create it or set its style. When the configuration changes, the payment button rechecks its visibility and the price breakdown refreshes its text, but neither changes its color scheme. The logo views and the checkout widget don’t update. To avoid views that show the wrong brand or stay hidden, set the configuration first.

How the SDK chooses the brand

The SDK picks the brand from the locale you pass to Afterpay.setConfiguration. This is your merchant region, not the device locale.

Configured localeBrand
en-USCash App Afterpay
en-AU, en-NZ, en-CA, fr-CAAfterpay
en-GBClearpay

You don’t select the brand directly. The same layout renders Afterpay branding for merchants in Australia, New Zealand, and Canada, Clearpay branding for UK merchants, and Cash App Afterpay branding for US merchants.

Styles and color schemes

The payment button, logo views, and price breakdown each have a style property of type AfterpayWidgetStyle, and an equivalent app:afterpayStyle XML attribute. The checkout widget doesn’t have a style. The style is semantic: the SDK maps it to the color scheme for the configured locale.

Outside the US, the styles map to the Afterpay and Clearpay color schemes:

StyleXML valueColor schemePayment buttonLogo lockup
AfterpayWidgetStyle.Defaultdefault_styleAfterpayBlackOnMintMint button with black text and a black Afterpay wordmarkBlack Afterpay wordmark on white
AfterpayWidgetStyle.AltaltAfterpayMintOnBlackBlack button with mint text and a mint Afterpay wordmarkMint Afterpay wordmark on black
AfterpayWidgetStyle.MonochromeDarkmonochromeDarkAfterpayWhiteOnBlackBlack button with white text and a white Afterpay wordmarkWhite Afterpay wordmark on black
AfterpayWidgetStyle.MonochromeLightmonochromeLightAfterpayBlackOnWhiteWhite button with no outline, black text, and a black Afterpay wordmarkBlack Afterpay wordmark on white

The default style is Default. The color schemes are internal to the SDK, so you select them only through style or app:afterpayStyle.

The logo lockup has no background. With the Default style, the Afterpay wordmark is black, so use Default or MonochromeLight, which looks the same, on light backgrounds. On dark backgrounds, use Alt or MonochromeDark.

Set the style in XML:

<com.afterpay.android.view.AfterpayPaymentButton
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:afterpayStyle="alt" />

Or in Kotlin:

paymentButton.style = AfterpayWidgetStyle.Alt

Declare the app namespace, xmlns:app="http://schemas.android.com/apk/res-auto", on the root element of your layout.

US merchants

For US merchants, the same styles map to the Cash App Afterpay color schemes:

StyleColor schemePayment buttonLogo lockup
DefaultAfterpayCashAppDefaultBlack, with a green Cash App iconGreen Cash App icon and a white wordmark, for dark backgrounds
AltAfterpayCashAppAltCash App green, with black textGreen Cash App icon and a black wordmark, for light backgrounds
MonochromeDarkAfterpayCashAppMonochromeDarkBlack, with white textWhite, for dark backgrounds
MonochromeLightAfterpayCashAppMonochromeLightWhite with a black outline, with black textBlack, for light backgrounds

The lockup guidance is reversed in the US: Default suits dark backgrounds and Alt suits light backgrounds. If your app serves US and other regions, choose the lockup style for the configured region.

When components are hidden

A component hides itself, by setting its visibility to View.GONE, when the SDK isn’t enabled for the current configuration. The SDK tracks this internally as Afterpay.enabled, which isn’t part of the public API. The SDK is enabled only when both of these are true:

  • You set a configuration with Afterpay.setConfiguration or Afterpay.setConfigurationV3.
  • The customer’s language is supported in your merchant region.

The SDK takes the customer’s language from the consumerLocale you pass to setConfiguration. If you don’t pass one, it uses the device’s default locale.

Merchant regionSupported customer languages
USEnglish
CanadaEnglish, French
Australia, New Zealand, UKEnglish

For example, a US merchant’s components hide themselves on a device set to Spanish, unless you pass consumerLocale = Locale.ENGLISH.

Some components also have rules of their own:

  • AfterpayBadge is always hidden for US merchants, because Cash App Afterpay branding uses the lockup instead. See Logo.
  • AfterpayPriceBreakdown supports only the lockup logo for US merchants. See Price breakdown.