Cash App Pay Component

On this page, you can find additional configuration for adding Cash App Pay to your Components integration.

Before you begin

This page assumes you have already:

• Built a Components integration.
• Added Cash App Pay in your Customer Area.

API reference

You don't need to send additional fields for Cash App Pay. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:

• /sessions: This is the default with Components v5.0.0 or later.
• /payments: If you implemented an additional use case.

Component configuration

Step 1: Create a DOM element

Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:

 <div id="cashapp-container"></div>

Step 2: Create an instance of the Component

Use the create method of your AdyenCheckout instance, in this case checkout, to create the Component:

const cashappComponent = checkout.create('cashapp').mount('#cashapp-container');

You must include the amount when creating an instance of AdyenCheckout for Cash App Pay.

Optional configuration

You can add the following optional configuration:

Parameter name	Description	Default
enableStoreDetails	Set to true to show a toggle that lets the shopper choose whether to save their payment details.	false
storePaymentMethod	Set to true to save the shopper's payment details without asking if they want to.	false
button	Use the available style options to configure the layout of the Pay button for Cash App Pay.
showPayButton	Show or hide the Adyen-provided Pay button. This Pay button triggers the onSubmit event when payment details are valid. When using your own Pay button, you have to call the .submit() method from your own button implementation.	false

The following event handler is supported for Cash App Pay:

Event	Description
onClick(actions)	Called when the shopper clicks the Cash App Pay Pay button. Call actions.resolve() or actions.reject() to continue or stop the payment flow.

Recurring payments

Adyen's tokenization service allows you to securely store the shopper's payment details. You can configure the Component to:

• Store Cash App Pay details
• Show stored Cash App Pay details
• Make a payment with stored Cash App Pay details

Store Cash App Pay details

Choose the endpoint you integrated:

Show stored Cash App Pay details

To add available stored payment details in your payment form:

1. In your /paymentMethods request, include:

   • shopperReference: The unique shopper identifier that you specified when creating the token.

2. In the /paymentMethods response, note the storedPaymentMethods array. This contains the stored payment methods for this shopper.

3. Add stored payment details to your payment form:
   a. Create a DOM element for stored payment methods, placing it where you want the form to be rendered:

   <div id="stored-cashapp"></div>

   b. Get the stored payment methods that you want to show from the checkout.paymentMethodsResponse object, and pass this when creating an instance of the Cash App Pay Component:

   const storedPaymentMethod = checkout.paymentMethodsResponse.storedPaymentMethods[0];
   const cashAppPayElement = checkout.create("cashapp", storedPaymentMethod).mount("#stored-cashapp");

4. If state.isValid is true, collect the state.data and pass this to your server. You need this data to make a payment.

Make a payment with stored Cash App Pay details

Chargebacks

Shoppers can initiate chargebacks directly with Cash App Pay up to 120 days after the payment, cancellation, or expected receipt of goods or services. For guidelines when a dispute is raised, see Cash App Pay chargebacks.

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.

Add Cash App Pay in your live Customer Area when you are ready to accept live payments.