How to send custom amount Square payment API from web

Question

I'm looking into taking payments through the Square connect API on a website, but I can't figure out how to allow the user to key in any payment amount they wish (like a PayPal pay me button). Is this possible to do, or can you only take payments in pre-set fixed amounts via Square?

It looks like in Square's examples the amount is being set in the backend code and there's no way to send the amount for the transaction through from the frontend.

I am following Square's walkthrough using Node here: https://developer.squareup.com/docs/payment-form/payment-form-walkthrough

Apologies if this has been asked before, but I couldn't find anything recent that addressed the issue.

Answer 1

If you want to send the amount from the frontend, you would need to submit it via a field in a form (like the nonce in the example you provided). Ie if you wanted the customer to fill out the amount you would have something like:

<form>
...
<input type="text" id="amount" name="amount">
...
</form>

as a field in your form, and then in your backend retrieve it from the amount name (which depends on what backend language you're using, but as an example PHP would be something like $_POST['amount'].

Answer 2

I ended up solving this by coding the fetch to /process-payment explicitly in the frontend .js code instead of having it in the form submit so it looks like this:

function submitPaymentRequest(event) {
  let nonce = document.getElementById("card-nonce").value;

  fetch("process-payment", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      nonce: nonce,
      amount: document.querySelector('input[name="amount"]').value
    })
  })
    .then(response => {
      console.log(response);
      response.json().then(data => {
        console.log(data);
        alert(JSON.stringify(data));
      });
    })
    .catch(function(error) {
      console.log("the error was", error);
    });
}

I posted a full working example of this here.

Answer 3

Yes i face the same issue but i made the solution. Firstly You make a hidden type field and give them some value e.g 100

**>  <input type="hidden" id="amount" name="amount" value="1000"  />**

add this line in below your form.Then go to payment-processing page,

**

> string am = Request.Form["amount"];

** get that input value i am doing in c# so its a c# code. then pass this am string type variable to Amountmoney section. like below.

var amountMoney = new Money.Builder()
                  **.Amount(Convert.ToInt64(am))**
                  .Currency("USD")
                  .Build();

Answer 4

Here is the full code:

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.UI;
 using System.Web.UI.WebControls;
 using Square;
 using Square.Models;
 using Square.Exceptions;
 using Square.Apis;
 
 public partial class process_payment : System.Web.UI.Page
 {
     private SquareClient client;
     public string ResultMessage
     {
         get;
         set;
     }
     protected  void Page_Load(object sender, EventArgs e)
     {
         client = new SquareClient.Builder()
                        .Environment(Square.Environment.Sandbox)
                        .AccessToken("YOUR ACCESS TOKEN")
                        .Build();
 
 
 
         string nonce = Request.Form["nonce"];
         string am = Request.Form["amount"];
         IPaymentsApi PaymentsApi = client.PaymentsApi;
 
         var amountMoney = new Money.Builder()
                   .Amount(Convert.ToInt64(am))
                   .Currency("USD")
                   .Build();
         string idempotencyKey = NewIdempotencyKey();
         var body = new CreatePaymentRequest.Builder(
             sourceId: nonce,
             idempotencyKey: idempotencyKey,
             amountMoney: amountMoney)
           .Build();
 
         CreatePaymentRequest createPaymentRequest = new CreatePaymentRequest.Builder(nonce, idempotencyKey, amountMoney)
            .Note("From Square Sample Csharp App")
            .Build();
 
         try
         {
             CreatePaymentResponse response = PaymentsApi.CreatePayment(createPaymentRequest);
 
             this.ResultMessage = "Payment complete! " + response.Payment.Note;
         }
         catch (ApiException es)
         {
             this.ResultMessage = es.Message;
         }
 
     }

     private static string NewIdempotencyKey()
     {
         return Guid.NewGuid().ToString();
     }
 }