This page explains how to add Cash App Pay to your existing Web Components integration.
Requirements
Select which endpoint you are using:
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:
- /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
v6.0.0 or later
Create an instance of the Component, passing:
- Your instance of
AdyenCheckout
.
const cashapp = new CashAppPay(checkout).mount('#cashapp-container');
v5.x.x or earlier
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 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
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:
-
In your /paymentMethods request, include:
- shopperReference: The unique shopper identifier that you specified when creating the token.
-
In the /paymentMethods response, note the
storedPaymentMethods
array. This contains the stored payment methods for this shopper. -
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");
-
If
state.isValid
is true, collect thestate.data
and pass this to your server. You need this data to make a payment.