On this page, you can find additional configuration for adding Cash App Pay to your Components integration.
Cash App Pay is supported from Web Components version 5.44.0.
Before you begin
This page assumes you have already:
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.
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:
Step 2: Create an instance of the Component
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.
You can add the following optional configuration:
|Set to true to show a toggle that lets the shopper choose whether to save their payment details.
|Set to true to save the shopper's payment details without asking if they want to.
|Use the available style options to configure the layout of the Pay button for Cash App Pay.
The following event handler is supported for Cash App Pay:
|Called when the shopper clicks the Cash App Pay Pay button. Call
actions.reject() to continue or stop the payment flow.
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:
How you store card details with the Cash App Pay Component depends on the Checkout API version you use:
v70 or later
Send additional parameters in the /sessions request to store payment details or to configure the Cash App Pay Component to let the shopper choose if they want to store their payment details.
In the /sessions request, include:
|The type of transactions you can use the stored Cash App Pay details for.
|Your unique reference for the shopper.
|The setting for storing the shopper's Cash App Pay details. Set
storePaymentMethod to true in the component configuration to store the details.
Possible values for
|Your shopper's Cash App Pay details are not stored.
|the Cash App Pay Component enables your shopper to select whether they want their payment details to be stored.
|Your shopper's Cash App Pay details are stored.
To ask the shopper if they want to store their Cash App Pay details, set
enableStoreDetails to true when adding the Cash App Pay Component. This shows a toggle that lets the shopper choose whether to save their payment details.
To store the shopper's payment details without asking if they want to, set 'storePaymentMethodMode: enabled' in your /sessions request and set
storePaymentMethod to true in the Component configuration object.
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.
The /paymentMethods response includes a
storedPaymentMethods array containing 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:
b. Get the stored payment methods that you want to show from the
checkout.paymentMethodsResponseobject, and pass this when creating an instance of the Cash App Pay Component:
const storedPaymentMethod = checkout.paymentMethodsResponse.storedPaymentMethods; const cashAppPayElement = checkout.create("cashapp", storedPaymentMethod).mount("#stored-cashapp");
state.isValid is true, collect the
state.data and pass this to your server. You need this to make a payment.
Make a payment with stored Cash App Pay details
Test and go live
Test your Cash App 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.