Mobile Redirection

On Mobile, instead of a QR code, the customer is redirected to the Cash App. When the customer approves, the customer is taken back to the url specified in the redirectConfirmUrl in the initializeForCashAppPay call. This can be the same page where the Cash App Pay button is rendered e.g. merchant.com/checkout, or a new page e.g. merchant.com/review

Query Params can be added to the redirectConfirmURL

If you want to determine if the page is loading as a result of redirect from the Cash App, you can add a query param to your redirectConfirmURL. e.g. merchant.com/checkout?cashapppay=true

The redirectCancelURL is not used by Cash App Pay

On mobile, the customer will always be redirected to the redirectConfirmUrl for approved and declined flows

The page the redirectConfirmUrl points to should initialize afterpay-button.js and define the below onComplete callback on page load. The data returned by onComplete includes the virtual card object and customer’s cashtag.

1function onPageLoad () {
2 var cashAppPayListenerOptions = {
3 onComplete: function(event) {
4 // event.data includes the virtual card object + customer's cashtag
5 const { status, virtualCard, token, cashtag } = event.data;
6 },
7 eventListeners: {
8 "CUSTOMER_INTERACTION": ({ isMobile }) => {
9 console.log(`CUSTOMER_INTERACTION`)
10 if (isMobile) {
11 // Capture mobile metrics
12 } else {
13 // Capture desktop metrics
14 };
15 },
16 "CUSTOMER_DISMISSED": () => {
17 console.log(`CUSTOMER_REQUEST_FAILED`);
18 },
19 "CUSTOMER_REQUEST_DECLINED": () => {
20 console.log(`CUSTOMER_REQUEST_DECLINED`)
21 },
22 "CUSTOMER_REQUEST_APPROVED": () => {
23 console.log(`CUSTOMER_REQUEST_APPROVED`)
24 },
25 "CUSTOMER_REQUEST_FAILED": () => {
26 console.log(`CUSTOMER_REQUEST_FAILED`)
27 }
28 }
29 }
30
31 AfterPay.initializeCashAppPayListeners({countryCode: "US", cashAppPayListenerOptions});
32}