Initialize the Square Payments object

Initialize the Square Payments object with your application ID and the ID of the seller location where the payment is taken.

  
    
    
  const payments = Square.payments(APPLICATION_ID, LOCATION_ID);

Create a PaymentRequest with the total amount

Create a new PaymentRequest using the desired options. At the minimum, you need to provide the total amount, the countryCode, the currencyCode. Note: The amount field is formatted for display, including decimal places. When creating a payment with the Payments API, the amount must be formatted as the payment amount in the the form of a decimal. For example, 5.79 stands for 5 dollars and 79 cents

  
    
    
  const paymentRequest = payments.paymentRequest({
  countryCode: 'US',
  currencyCode: 'USD',
  total: { amount: '5.79', label: 'Total' },
});

The PaymentRequest is created by the SDK with payment request options that your application provides in a paymentRequestOptions object that you declare.

Create an CashAppPay object

Get a new CashAppPay object with your PaymentRequest and CashAppPaymentRequestOptions.

  
    
    
  const cashAppPay = await payments.cashAppPay(paymentRequest, options);

This creates a new CashAppPay instance with all of the behaviors and properties needed to take an Cash App Pay payment.

Get the one-time payment token from the CashAppPay object

Get the payment token from the CashAppPay object by calling the ontokenization event listener which is dispatched when the buyer completes the form by clicking on the Cash App Pay button

  
    
    
  cashAppPay.addEventListener('ontokenization', function (event) {
  const { tokenResult } = event.detail;
  if (tokenResult.status === 'OK') {
    token = tokenResult.token;
  }
});

If the Cash App Pay information is valid, the tokenResult will include an 'OK', status as well as a one-time-use token which can be used to make a call to the Payments API CreatePayment endpoint to charge a customer. If the customer declines the transaction, it will return a status of 'Cancel'. If the Cash App Pay information is not valid, it will return a status of 'Error'.