Android Component

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

Adyen's tokenization service allows you to securely store the shopper's payment details for recurring payments. To make recurring Cash App Pay payments, you first need to create a shopper token, and then use the token to make future payments for the shopper.

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.

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:
   • paymentMethod: The state.data.paymentMethod from the onSubmit event.
   • shopperReference: The unique shopper identifier that you specified when creating the token.
   • shopperInteraction: ContAuth.
   • recurringProcessingModel: CardOnFile.

The /payments response contains:

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

You can also use tokens to make shopper-not-present payments for subscriptions or contracts. For more information, refer to Making a payment for a subscription or contract.

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