For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
HomeGuides
HomeGuides
  • About Afterpay
    • What Is Afterpay?
    • How Does Afterpay Work?
  • Afterpay Button
    • Afterpay Messaging
  • Express Checkout
    • Express Checkout Overview
    • Adding the Afterpay Express Checkout Button
    • Process The Credit Card
    • Complete the Express Checkout Process
    • Integrated Shipping
    • Checkout Widget
  • Cash App Pay
    • Using the Cash App Pay Button
    • Getting Started
    • Advanced Rendering Control
    • Mobile Redirection
    • Customer On-File Payments
LogoLogo
On this page
  • 1. Create your custom button
  • 2. Initialize the authorization flow when ready
Cash App Pay

Advanced Rendering Control

Was this page helpful?
Previous

Mobile Redirection

Next
Built with

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}