Payment button

AfterpayPaymentButton is a branded button that customers tap to pay with Afterpay. It shows Afterpay branding, or Clearpay branding for UK merchants. For US merchants, it shows Cash App Afterpay branding.

Before you add the button, set the merchant configuration. See UI components.

Add the button

<com.afterpay.android.view.AfterpayPaymentButton
  android:id="@+id/afterpay_button"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:afterpayButtonText="checkout"
  app:afterpayStyle="default_style" />

The button scales its artwork to fit the width you give it and keeps the aspect ratio. Set the width and use wrap_content for the height.

The button sets a content description for screen readers, so you don’t need to add one. The description always reads “Pay now with Afterpay”, whatever the button text. If you use BUY, CHECKOUT, or CONTINUE, set contentDescription to match.

Start checkout when the customer taps the button

AfterpayPaymentButton extends AppCompatImageButton. It doesn’t start checkout by itself, so set a click listener that starts your checkout:

findViewById<AfterpayPaymentButton>(R.id.afterpay_button)
  .setOnClickListener {
    // Start checkout, for example with Built-in UI (Checkout V2).
    checkoutLauncher.launch(Afterpay.createCheckoutV2Intent(this))
  }

For the checkout options, see Present checkout.

Button text

Choose the text that suits the purchase. The default is payNow in XML, or ButtonText.PAY in Kotlin.

In Kotlin, the full enum name is AfterpayPaymentButton.ButtonText.

Styles

Set app:afterpayStyle in XML or style in Kotlin. The default is Default.

Style	XML value	Appearance
AfterpayWidgetStyle.Default	default_style
AfterpayWidgetStyle.Alt	alt
AfterpayWidgetStyle.MonochromeDark	monochromeDark
AfterpayWidgetStyle.MonochromeLight	monochromeLight

UK merchants see Clearpay buttons in the same color schemes. US merchants see Cash App Afterpay buttons in different color schemes. See Styles and color schemes.

Visibility

The button hides itself when the SDK isn’t enabled for the current configuration, for example when the customer’s language isn’t supported. It rechecks its visibility when the configuration changes. See When components are hidden.

Attributes and properties