Square in-app web payment tutorial

To implement an in-app payment workflow using Square, you need to follow a series of steps to ensure that the payment process is smooth and secure. The error you're encountering, "Uncaught (in promise) NotSupportedError: Failed to read the 'ready' property from 'ServiceWorkerContainer': 'ready' is only supported in pages," suggests that there might be an issue with how the service worker is being used in your application. This error typically occurs when trying to use service workers in contexts that don't support them, such as web workers or non-page contexts.

Here's a step-by-step guide to help you set up a Square payment workflow:

Step 1: Set Up Your Square Account

1. Create a Square Developer Account: Go to the Square Developer Portal and sign up for an account.
2. Create an Application: Once logged in, create a new application to get your application ID and access tokens.

Step 2: Integrate Square Payment Form

1. Include Square's Payment Form Library: Add the Square payment form library to your HTML file.

   <script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
   

2. Create a Payment Form: Set up the HTML for your payment form.

   <div id="form-container">
     <div id="sq-card-number"></div>
     <div id="sq-expiration-date"></div>
     <div id="sq-cvv"></div>
     <div id="sq-postal-code"></div>
     <button id="sq-creditcard" class="button-credit-card" onclick="onGetCardNonce(event)">Pay</button>
   </div>
   

3. Initialize the Payment Form: Use JavaScript to initialize the Square payment form.

   const paymentForm = new SqPaymentForm({
     applicationId: 'YOUR_APPLICATION_ID',
     inputClass: 'sq-input',
     autoBuild: false,
     cardNumber: {
       elementId: 'sq-card-number',
       placeholder: 'Card Number'
     },
     cvv: {
       elementId: 'sq-cvv',
       placeholder: 'CVV'
     },
     expirationDate: {
       elementId: 'sq-expiration-date',
       placeholder: 'MM/YY'
     },
     postalCode: {
       elementId: 'sq-postal-code',
       placeholder: 'Postal'
     },
     callbacks: {
       cardNonceResponseReceived: function(errors, nonce, cardData) {
         if (errors) {
           // Handle errors
           console.error(errors);
           return;
         }
         // Send the nonce to your server
         fetch('/process-payment', {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json'
           },
           body: JSON.stringify({ nonce: nonce })
         })
         .then(response => response.json())
         .then(data => {
           // Handle server response
           console.log(data);
         });
       }
     }
   });
   
   paymentForm.build();
   

Step 3: Handle Payment on the Server

1. Create a Server Endpoint: Set up a server endpoint to handle the payment processing.

   // Example using Node.js and Express
   const express = require('express');
   const bodyParser = require('body-parser');
   const { Client, Environment } = require('square');
   
   const app = express();
   app.use(bodyParser.json());
   
   const client = new Client({
     environment: Environment.Sandbox, // Use Environment.Production for live
     accessToken: 'YOUR_ACCESS_TOKEN'
   });
   
   app.post('/process-payment', async (req, res) => {
     const { nonce } = req.body;
   
     try {
       const response = await client.paymentsApi.createPayment({
         sourceId: nonce,
         idempotencyKey: new Date().getTime().toString(),
         amountMoney: {
           amount: 100, // Amount in cents
           currency: 'USD'
         }
       });
       res.json(response.result);
     } catch (error) {
       res.status(500).json(error);
     }
   });
   
   app.listen(3000, () => {
     console.log('Server is running on port 3000');
   });
   

Step 4: Test Your Integration

• Test in Sandbox Mode: Use Square's sandbox environment to test your payment workflow without processing real transactions.
• Debug and Fix Errors: Ensure that your service worker is correctly set up and only used in supported contexts.

By following these steps, you should be able to set up a basic Square payment workflow in your application. Make sure to replace placeholders like YOUR_APPLICATION_ID and YOUR_ACCESS_TOKEN with your actual Square credentials.