Cash App Pay

Advanced Rendering Control

By default, we provide a fully managed and branded UI. You may want advanced controls in certain situations such as validating information a customer has provided during checkout before continuing. When afterpayButton.renderCashAppPayButton is called, a begin method is returned through the onBegin callback for you to call when you are ready.

1. Create your custom button

Either with JavaScript

1function createCustomButton() {
2  // Create custom button
3  const cashAppPayCustomButton = document.createElement('button');
4  cashAppPayCustomButton.classList.add('btn', 'cash-app-pay-custom-button');
5  cashAppPayCustomButton.textContent = "Continue with";
6
7  // Attach cash app pay logo to button
8  const cashAppPayLogo = document.createElement('cash-app-pay-logo');
9  cashAppPayCustomButton.appendChild(cashAppPayLogo);
10  document.getElementById('cash-app-pay').after(cashAppPayCustomButton);
11}

or directly in HTML

1<button class="btn cash-app-pay-custom-button">
2  Continue with<cash-app-pay-logo></cash-app-pay-logo>
3</button>

The <cash-app-pay-logo> element renders a Cash App Pay logo which can be used when choosing a payment method or to enhance your checkout button.

2. Initialize the authorization flow when ready

Your checkout experience may want to use its own button for consistency across payment methods. When the manage option is false, you can also set the button option to false to prevent a Cash App Pay button from being rendered. You can now provide your own button and manage the authorization flow.

1function renderCashAppPayButton(afterpayButton) {
2  const cashAppPayButtonOptions = {
3    button: false,
4    manage: false,
5    onBegin: function({ begin }) {
6      addEventListenerToCashAppPayButton(async (event) => {
7        event.preventDefault();        
8        // TODO: validate customer information
9        bindAttributesToButton(afterpayButton); // bind attributes if you haven't already
10        afterpayButton.initializeForCashAppPay({
11          redirectConfirmUrl,
12          onError,
13          onComplete,
14          eventListeners: {
15            CUSTOMER_INTERACTION: ({ isMobile }) => {
16              if (isMobile) {
17                console.log(`Customer is on mobile`);
18              } else {
19                console.log(`Customer is not on mobile`);
20              }
21            },
22            CUSTOMER_REQUEST_DECLINED: () => {
23              console.log(`CUSTOMER_REQUEST_DECLINED`);
24            },
25            CUSTOMER_REQUEST_APPROVED: () => {
26              console.log(`CUSTOMER_REQUEST_APPROVED`);
27            },
28            CUSTOMER_REQUEST_FAILED: () => {
29              console.log(`CUSTOMER_REQUEST_FAILED`);
30            },
31            CUSTOMER_DISMISSED: () => {
32              console.log(`CUSTOMER_REQUEST_FAILED`);
33            }
34          }
35        });
36        begin();
37      });
38    },
39  }
40  afterpayButton.renderCashAppPayButton({
41    countryCode: "US",
42    cashAppPayButtonOptions
43  });
44}