Take a Payment with Cash App Pay
Learn how to add a Cash App Pay payment method to the application you built using the Quickstart project sample in Take a Card Payment with the Web Payments SDK to integrate the Web Payments SDK into your application.
The steps in this topic add code to the application you created from the Quickstart project sample. If you have not created an application using the Quickstart, you need to do so before completing the steps in this topic.
You can find a full example of the Cash App Pay code in GitHub.
Note
Cash App Pay is currently supported only in the US.
Add the Cash App Pay payment method to the page
The Cash App Pay payment method needs information about the buyer and the payment amount before it can open the Cash App payment sheet. Your application creates a PaymentRequest object to provide that information and then gets a new (Cash App tech ref link) object initialized with it.
The following code creates the payment request and attaches the Cash App payment method to the page:
Add an HTML element to the prerequisite walkthrough form with an
id
ofcash-app-pay
. The HTML for the body of index.html should look like the following:Add the following two functions to your script tag:
The 'initializeCashApp' function requires a 'redirectURL' value to indicate where to send buyers after completing a payment on a mobile device. The 'redirectURL' value is only for mobile payments and is not used for desktop QR payments.
You can also include the optional 'referenceId' payment identifier value for internal developer use. For example, you use a 'referenceId' value to associate the payment with an internal resource.
Note how Cash App Pay has its own event listeners on the PaymentRequest
object and how these event listeners have their own specific callbacks. For more information, see addEventListener.
In the
DOMContentLoaded
event listener, add the following code after you initialize the Cash App payment method:
Test the application
Navigate to http://localhost:3000/ in your browser.
Checkpoint 1: You should now see the Cash App Pay button rendered on your page.
Get the payment token from the Cash App Pay payment method and attach it to a DOM element
Add the following code after // Checkpoint 2
in the DOMContentLoaded
event listener function, to listen for the ontokenization:
This event fires when a buyer authorizes a payment in Cash App, is taken back to the merchant website redirectUri (if mobile), and a payment token (nonce) is ready.
Test the application
Test the Cash App payment flow from the browser in the sandbox environment.
Important
When you test the Cash App and Web Payments SDK integration in a production environment, you can use both the Cash App camera and the smartphone camera to scan the QR code. When you test the payment flow in a sandbox environment, the sandbox environment only supports using the smartphone camera to scan the QR code.
Navigate to http://localhost:3000/ in your browser.
Click the Cash App Pay button.
You should see the Cash App Pay dialog box appear with the QR code.
Using your smartphone's camera, scan the QR code in the dialog box.
On your smartphone's web browser at sandbox.api.cash.app, the application displays a dialog requesting permission to approve or decline the request to link the account.
Tap Approve to link the account.
Checkpoint 2. You should now receive a confirmation that the account has been linked.
The following animation shows the Cash App Pay payment flow:
Process a Cash App Pay payment token on your backend
The payment token that your application generated for a Cash App Pay payment is processed on your backend in the same way a payment token from one of the other payment methods is processed, with some exceptions. To learn about the specific processing requirements, see Cash App Payments.
If you need more assistance, contact Developer Support or ask for help in the Developer Forums.