Android Component

This page explains how to add Cash App Pay to your existing Android Components integration.

If you have an existing Android Components integration, you can use our Redirect Component to redirect the shopper to complete the payment. As with other redirect payment methods, you need to handle the redirect after the shopper returns to your app.

Requirements

Set up the Cash App Pay Component

1. Import the Cash App Pay Component to your build.gradle file.

   implementation "com.adyen.checkout:cashapppay:<latest-version>"

   For the latest version, refer to our GitHub.

2. Build a client-side configuration of the Cash App Pay Component.

   val cashAppPayConfiguration =
   CashAppPayConfiguration.Builder(shopperLocale, environment, clientKey)
       // mandatory configuration
       .setReturnUrl(CashAppPayComponent.getReturnUrl(context))
       .build

3. Add the Component view to your layout. You will attach the initialized component to this view when collecting payment details.

   <com.adyen.checkout.cashapppay.CashAppPayView
       android:id="@+id/cashAppPayView"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />

4. Add an IntentFilter to the Activity that will handle the returnUrl specified in your configuration and your /payments request.

   <activity
     android:name=".YourActivity">
       <intent-filter>
          <action android:name="android.intent.action.VIEW"/>
          <category android:name="android.intent.category.DEFAULT"/>
          <category android:name="android.intent.category.BROWSABLE"/>
          <data android:host="${applicationId}" android:scheme="adyencheckout"/>
       </intent-filter>
   </activity>

   The ${applicationId} will be replaced with your.package.name at build time.

Optional configuration

You can add the following optional configuration:

Collect payment details

In this step, we use the client-side Component to send the shopper to the Cash App Pay app to authorize the payment.

1. Deserialize the /paymentMethods response with the SERIALIZER object.

   val paymentMethodsApiResponse = PaymentMethodsApiResponse.SERIALIZER.deserialize(paymentMethodsResponse)

2. From the result, get the object containing paymentMethods.type: cashapp.

3. Initialize an instance of the Component. To do this, you need to call PROVIDER.get from the Cash App Pay Component and pass the following:

   • The context (for example, FRAGMENT_OR_ACTIVITY)
   • The PaymentMethod object (for example, paymentMethod)
   • The cashappConfiguration object

   val cashAppPayComponent = CashAppPayComponent.PROVIDER.get(FRAGMENT_OR_ACTIVITY, paymentMethod, cashAppPayConfiguration)

4. Attach the Component to the view to start getting your shopper's payment details. You need to call attach from the payment method's Component view and pass in:

   • the cashappComponent
   • the context (for example, FRAGMENT_OR_ACTIVITY)

   cashAppPayView.attach(cashAppPayComponent, FRAGMENT_OR_ACTIVITY)

5. Add the Cash App Pay button. When the shopper clicks the button, call cashAppPayComponent.submit(). The Cash App Pay app will launch for the shopper to approve the payment.

6. You start receiving updates when the shopper completes an action in their Cash App Pay app. Check if isValid is true, and if the shopper proceeds to pay, pass the paymentComponentState.data.paymentMethod to your server.

   cashappComponent.observe(this@FRAGMENT_OR_ACTIVITY) { state ->
       if (state?.isValid == true) {
           //serialize data
           val paymentComponentData = PaymentComponentData.SERIALIZER.serialize(state.data)
           // When the shopper proceeds to pay, pass the serialized `state.data` to your server to send a /payments request
       }
   }

Make a payment

When the shopper proceeds to pay:

1. From your server, make a POST /payments request, specifying:

   • paymentMethod.type: Set this to cashapp.
   • returnUrl: URL to where the shopper should be redirected back to after they complete the payment. Get this URL from the Component in the CashAppPayComponent.getReturnUrl(context).

2. In the /payments response, note the following:

   • pspReference: Our unique identifier for the transaction.
   • resultCode: Use this to show the payment result to your shopper.
   • merchantReference: The reference from the /payments request.

Show the payment result

Use the  resultCode from the /payments/details response to show the payment result to your shopper. You will also receive the outcome of the payment asynchronously in a webhook.

For Cash App Pay payments, you can receive the following resultCode values:

Recurring payments

Cash App Pay supports tokenization of the shopper's payment details for recurring transactions.

Create a token

To store a shopper's Cash App Pay details, set setShowStorePaymentField to true when adding the Cash App Pay Component. This shows a toggle that lets the shopper choose whether to save their payment details. You can also store the details automatically by setting setstorePaymentMethod to true and setShowStorePaymentField to false in the Component configuration.

If the shopper chooses to save their details when making a payment, the observe method from the Component includes a state.data.storePaymentMethod. Pass this to your server.

To create a token, include in your /payments request:

• storePaymentMethod: The paymentComponentState.data.storePaymentMethod from your client app.
• shopperReference: Your unique identifier for the shopper.

Get the shopper's $cashtag

We recommend making sure that your recurring payments include the shopper's $cashtag. The $cashtag makes it easier for the shopper to recognize the recurring payment as a legitimate one. This helps to avoid chargebacks.

1. Make a POST /payments/details request. For instructions, see Send additional payment details.

2. From the /payments/details response, save the following additionalData details:

   Parameter	Description
   additionalData.cashapp.cashtag	The shopper's $cashtag.
   additionalData.recurring.shopperReference	The shopper reference you specified in the payment request.
   additionalData.recurring.recurringDetailReference	The token that was generated through the payment request.

   Note that the RECURRING_CONTRACT webhook also includes the shopper reference and the recurring detail reference, but not the $cashtag.

Make a payment with a token

When the shopper selects to pay, the Component calls the onSubmit event, which contains a state.data.

1. Pass the state.data to your server.

2. From your server, make a /payments request, specifying:

   • The parameters required for one-off or recurring tokenized payments. For instructions, see Tokenization.
   • paymentMethod: The state.data.paymentMethod from the onSubmit event.

   To make it easier for the shopper to recognize the recurring payment as a legitimate one, optionally include:

   • paymentMethod.cashtag: the shoppers $cashtag.

3. In the /payments response, note the following:

   • resultCode: Use this to show the payment result to your shopper.

Test and go live

Test your Cash App Pay integration using the test environment. You can simulate various payment scenarios using Cash App Pay magic values. You can check the status of Cash App Pay test payments in your Customer Area, under Transactions > Payments.

When you are ready to go live, add Cash App Pay in your live Customer Area.

See also