Skip to navigation
SDKAndroid SDK

Android UI components

The Android SDK includes prebuilt views that follow Clearpay brand guidelines. With a UK configuration, they show Clearpay branding.

Mint payment button with the text Pay now with and a black Clearpay 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.UK,
  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. With Locale.UK (en-GB), the components show Clearpay branding.

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 UK merchants, the styles look like this:

StyleXML valuePayment buttonLogo lockup
AfterpayWidgetStyle.Defaultdefault_styleMint button with black text and a black Clearpay wordmarkBlack Clearpay wordmark on white
AfterpayWidgetStyle.AltaltBlack button with mint text and a mint Clearpay wordmarkMint Clearpay wordmark on black
AfterpayWidgetStyle.MonochromeDarkmonochromeDarkBlack button with white text and a white Clearpay wordmarkWhite Clearpay wordmark on black
AfterpayWidgetStyle.MonochromeLightmonochromeLightWhite button with no outline, black text, and a black Clearpay wordmarkBlack Clearpay wordmark on white

The default style is Default.

The logo lockup has no background. With the Default style, the 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.

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.
  • 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.

For UK merchants, the supported customer language is English. For example, the components hide themselves on a device set to French, unless you pass consumerLocale = Locale.ENGLISH.