Skip to navigation
SDKAndroid SDK

Android UI components

The Afterpay Android SDK includes prebuilt views that follow the brand guidelines for each region. In the US, they render Cash App Afterpay branding.

Cash App Afterpay payment button with the text Pay with Afterpay
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.US,
  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 Cash App Afterpay branding for a US merchant, and Afterpay or Clearpay branding for merchants in other regions.

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.

For a US merchant, the styles map to the Cash App Afterpay color schemes:

StyleXML valueColor schemePayment buttonLogo lockup
AfterpayWidgetStyle.Defaultdefault_styleAfterpayCashAppDefaultBlack button with a green Cash App iconGreen Cash App icon with a white Afterpay wordmark
AfterpayWidgetStyle.AltaltAfterpayCashAppAltCash App green button with black textGreen Cash App icon with a black Afterpay wordmark
AfterpayWidgetStyle.MonochromeDarkmonochromeDarkAfterpayCashAppMonochromeDarkBlack button with white text and iconWhite Cash App Afterpay lockup
AfterpayWidgetStyle.MonochromeLightmonochromeLightAfterpayCashAppMonochromeLightWhite outlined button with black text and iconBlack Cash App Afterpay lockup

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 and the logo in the price breakdown have no background. With the Default style, the Afterpay wordmark is white, so use Default on dark backgrounds. On light backgrounds, use Alt or MonochromeLight.

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.

Other regions

For merchants outside the US, the same styles map to the Afterpay and Clearpay color schemes:

StyleColor scheme
DefaultBlack on mint
AltMint on black
MonochromeDarkWhite on black
MonochromeLightBlack on white

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.