Getting Started

1
const afterpayButtons = document.querySelectorAll('afterpay-button');
2
afterpayButtons.forEach(afterpayButton => {
3
  /* a.) Managed UI */
4
  if (afterpayButton.hasAttribute("isCashAppPay")) {
5
    bindAttributesToButton(afterpayButton);
6
    afterpayButton.initializeForCashAppPay({
7
      // button style configurations
8
      button: {
9
        size: 'small', // "medium" | "small"
10
        width: 'full', // "full" | "static"
11
        theme: 'dark', // "dark" | "light"
12
        shape: 'round' // "round" | "semiround"
13
      },
14
      // mobile redirect
15
      redirectConfirmUrl: 'https://appsp-sandbox.afterpay-test.repl.co/button',
16
      // error callback handler
17
      onError: function(event) {
18
        console.log(`onError: ${JSON.stringify(event.data, null, 4)}`);
19
      },
20
      // event.data includes the same virtual card object + the customer's cashtag
21
      onComplete: function(event) {
22
          const { status, virtualCard, token, cashtag } = event.data;
23
        },
24
      eventListeners: {
25
        CUSTOMER_INTERACTION: ({ isMobile }) => {
26
          if (isMobile) {
27
            console.log(`Customer is on mobile`);
28
          } else {
29
            console.log(`Customer is not on mobile`);
30
          }
31
        },
32
        CUSTOMER_REQUEST_DECLINED: () => {
33
          console.log(`CUSTOMER_REQUEST_DECLINED`);
34
        },
35
        CUSTOMER_REQUEST_APPROVED: () => {
36
          console.log(`CUSTOMER_REQUEST_APPROVED`);
37
        },
38
        CUSTOMER_REQUEST_FAILED: () => {
39
          console.log(`CUSTOMER_REQUEST_FAILED`);
40
        },
41
        CUSTOMER_DISMISSED: () => {
42
          console.log(`CUSTOMER_REQUEST_FAILED`);
43
        }
44
      }
45
    });
46
  }
47
  /* b.) Advanced Rendering Controls */
48
  // bind the attributes on click for both Afterpay Button and Cash App Pay Button
49
  afterpayButton.addEventListener('click', bindAttributesToButton(afterpayButton), true);
50
  afterpayButton.hasAttribute("isCashAppPay") && renderCashAppPayButton(afterpayButton);
51
})

1
afterpayButton.initializeForCashAppPay({
2
  // All other configurations
3
  eventListeners: {
4
    CUSTOMER_INTERACTION: (CustomerInteractionData) => {
5
      const { isMobile } = CustomerInteractionData;
6
      console.log("CUSTOMER_INTERACTION is on mobile: ", isMobile);
7
    },
8
    CUSTOMER_REQUEST_DECLINED: () => {
9
      console.log(`CUSTOMER_REQUEST_DECLINED`);
10
    },
11
    CUSTOMER_REQUEST_APPROVED: (CustomerRequestData) => {
12
      console.log(`CUSTOMER_REQUEST_APPROVED`);
13
      console.log("Customer Request Approved Data: ", CustomerRequestData);
14
    },
15
    CUSTOMER_REQUEST_FAILED: () => {
16
      console.log(`CUSTOMER_REQUEST_FAILED`);
17
    },
18
    CUSTOMER_DISMISSED: () => {
19
      console.log(`CUSTOMER_REQUEST_FAILED`);
20
    }
21
  }
22
});