Cash App Pay

Cash App Pay is now supported as a tender type for merchants using Afterpay.

🚧

Afterpay Express Checkout does not support Cash App payments.

Using Cash App with Afterpay is currently only supported in the United States.

Integrating Cash App payments using the existing Afterpay API

Accepting Cash App Pay payments uses the standard API for the Afterpay checkout process, with your existing Afterpay credentials. The Afterpay backend handles the transaction with Cash App Pay. The implementation process is as follows:

  1. Call the Create Checkout API with the addition of the following parameter isCashAppPay: true to create an order token.
  2. Use the token in combination with the Standard Checkout flow, but call AfterPay.initializeForCashAppPay instead of `Afterpay. like in the code sample below:
function initAfterPay () {

    var cashAppPayOptions = {
        button: {
          size: 'small', // "medium" | "small"
          width: 'full', // "full" | "static"
          theme: 'dark', // "dark" | "light"
          shape: 'round' // "round" | "semiround"
        }, 
        redirectUrl: window.location.href, // where mobile customers should be redirected to
        onComplete: function(event) {
          const { status, cashtag } = event.data;
        },
        /* Optional event listeners for merchants to track customer behavior and listen for transaction events in the lifecycle */
           eventListeners: {
                "CUSTOMER_INTERACTION": ({ isMobile }) => {
                    console.log(`CUSTOMER_INTERACTION`)
                    if (isMobile) {
                        // captureMobileMetrics()
                    } else {
                        // captureDesktopMetrics()
                    };
                },
                "CUSTOMER_REQUEST_DECLINED": () => {
                    console.log(`CUSTOMER_REQUEST_DECLINED`)
                },
                 "CUSTOMER_REQUEST_APPROVED": () => {
                    console.log(`CUSTOMER_REQUEST_APPROVED`)
                },
                "CUSTOMER_REQUEST_FAILED": () => {
                    console.log(`CUSTOMER_REQUEST_FAILED`)
                }
            }
      }

    AfterPay.initializeForCashAppPay({countryCode: "US", token: "001.k4r216fo4qjug8p7ngmqj595v99g3kpd6jh69qf86bgqe97", cashAppPayOptions});
}
  1. Add a div with id="cash-app-pay" where you want the Cash App Pay button to be rendered.
  2. On clicking the button the customer is shown a QR code (on desktop)
362362
  1. If the customer confirms the order, an orderToken, the customer's cashtag, and a SUCCESS status is returned. If the customer cancels the order, the orderToken and CANCELLED status are returned. The cashtag should be displayed to the customer on the review or confirmation page. Example event object:
event: {
    "data": {
        "status": "SUCCESS",
        "cashtag": "$CASHTAG_C_TOKEN",
        "orderToken": "TOKEN",
    }
}
  1. Depending on your Payment Flows you use for Afterpay you will follow the same process to complete an order. Either call Auth or 2a. Direct Capture. You will receive an APPROVED or DECLINED status from Afterpay once the Auth or Direct Capture API has been completed.

Mobile Redirection

On Mobile, instead of a QR code, the consumer will be redirected to the Cash App. When the consumer approves, the consumer will be taken back to the url specified in the redirectConfirmUrl in the Create Checkout 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.js and define the below onComplete callback on page load:

function onPageLoad () {
    var cashAppPayListenerOptions = { 
        onComplete: function(event) {
          const { status, cashtag, orderToken} = event.data;
        },
        /* Optional event listeners for merchants to track customer behavior and listen for transaction events in the lifecycle */
           eventListeners: {
                "CUSTOMER_INTERACTION": ({ isMobile }) => {
                    console.log(`CUSTOMER_INTERACTION`)
                    if (isMobile) {
                        // captureMobileMetrics()
                    } else {
                        // captureDesktopMetrics()
                    };
                },
                "CUSTOMER_REQUEST_DECLINED": () => {
                    console.log(`CUSTOMER_REQUEST_DECLINED`)
                },
                 "CUSTOMER_REQUEST_APPROVED": () => {
                    console.log(`CUSTOMER_REQUEST_APPROVED`)
                },
                "CUSTOMER_REQUEST_FAILED": () => {
                    console.log(`CUSTOMER_REQUEST_FAILED`)
                }
            }
      }

    AfterPay.initializeCashAppPayListeners({countryCode: "US", cashAppPayListenerOptions});
}

Placing another order in a Single Page App

After a successful checkout, the buyer may visit another page. Then, the buyer may come back to the checkout page to order without refreshing the page. Or in another scenario, you may want to provide an upsell right after the buyer completes the checkout.

When you need to take a new order with Cash App Pay, you can call AfterPay.restartCashAppPay:

AfterPay.restartCashAppPay()

When restarted, AfterPay.js will forget about all previous authorizations and previously charged amounts. It will also remove all Cash App Pay UI (for example, the Cash App Pay button, QR code modal, or approved Cashtag).

After restarting you can start another order as usual:

AfterPay.initializeCashAppPayListeners(...)
AfterPay.initializeForCashAppPay(...);

Unknown macro: {countryCode}
);

We recommend that in a single page app, you should call AfterPay.restartCashAppPay whenever the buyer leaves the checkout page. When restarting at the exit of each page, if a buyer comes back to the checkout page, your initialization flow will work as usual without the buyer ever seeing the QR code for a previous customer request.

Payment reversals with Cash App

Cash App sales support the standard Afterpay payment refund and void processes.

Settlement with Cash App

All payment resolution is handled by Afterpay. Your settlement information will differentiate between Afterpay and Cash App sales.