Payment-method icon

Cash App Pay Component

Add Cash App Pay to an existing Components integration.

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

Requirements

Select the server-side flow that your integration uses:

Import resources for v6

If you are using Web Components v6, import the Component that you need for Cash App Pay:

import { AdyenCheckout, CashAppPay } from '@adyen/adyen-web'

API reference

You do not 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:

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

v6.0.0 or later

Create an instance of the Component, passing:

  • Your instance of AdyenCheckout.
const cashapp = new CashAppPay(checkout).mount('#cashapp-container');

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

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

For Cash App Pay, you must pass the amount for the transaction value to be authorized.

  • If you use the /sessions endpoint, pass the amount when creating the session.
  • If you use the /payments endpoint, include the amount when creating an instance of AdyenCheckout.

You do not have to pass the amount for zero-value auth transactions.

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 showing a toggle. For example, use this for a page where the shopper enters their details for a subscription service that charges the shopper on a recurring basis. 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

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

We strongly recommend that you ask explicit permission from the shopper if you intend to make future recurring payments. Being transparent about the payment schedule and the amount reduces the risk of chargebacks.

You can:

Store Cash App Pay details

Select the server-side flow that your integration uses: