How to implement Cash App Pay on static HTML

Questions
1

I’ve been able to make the button show on my website but it only creates payment token and shows it to the customer… Is there a way to initiate this payment without using node js? All the tutorials i see is using npm and react but i’m working on static HTML single page, please help me fix this code.

I should be sending the token to my backend but i don’t have a backend. The web page is a donation page, just a single static html where donator will input amount and click donate.

I Believe i am supposed to use my access token to initiate payment somewhere but i don’t know how to handle the payment without a backend.

<script src="https://web.squarecdn.com/v1/square.js"></script>

    <form id="payment-form">
      <input type="number" name="amount" placeHolder="amount" id="charge-amount" value>
      <div id="cash-app-pay"></div>
    </form>
      <button id="paynow">Donate</button>


<script>

 document.getElementById('paynow').addEventListener('click', async function () {
    const payment = window.Square.payments(
    "APP_ID",
    "LOCATION_ID"
  );
   var chargeAmount = document.getElementById("charge-amount").value;
  const cashReq = payment.paymentRequest({  
   countryCode: 'US',  
   currencyCode: 'USD',  
   total: { amount: chargeAmount,
           label: 'Total'
          },  
  });

  const cashAppPay = await payment.cashAppPay(cashReq, {
    redirectURL: window.location.href,
    referenceId: `optional-reference-id`,
  });

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

  await cashAppPay.attach('#cash-app-pay', {
    shape: 'semiround',
    theme: 'dark',
    size: 'small',
  });
});

</script>

Just help me add whatever is missing and let me know what next i should do.

2

I figured i could host my backend on heroku and send my token to the backend with a post method or something but i don’t know how to do it. Am not an expert, If someone already has this setup, please share the code so i can just put my credentials and host it.

I found this on github but no source code for the backend…


    async function createPayment(token) {
      console.log("sending payment")
      const body = JSON.stringify({
        locationId,
        sourceId: token,
        "amount": {
          "value": "1.00",
          "currency" : "USD"
        },
        "cashAppPayToken": token,
        "cashAppUniqueKey" : "123456"
      });

      const paymentResponse = await fetch('https://ching-partnership.herokuapp.com/v1/cashApp', {
        // mode: 'no-cors',
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body,
      });

      if (paymentResponse.ok) {
        return paymentResponse.json();
      }

      const errorBody = await paymentResponse.text();
      throw new Error(errorBody);
    }
3

You can definitely use any of our sample applications with Heroku. Also we do have an example Heroku server that’s used for our In-App Payments SDK that you can use as a guide. :slightly_smiling_face: