React Square Payment Form

Introduction

The React Square Payment Form provides a secure, PCI-compliant, customizable payment experience for accepting debit cards, credit, or digital wallet payments in your React app.

Note: this SDK is in beta. We'll be improving it as we work towards GA - please leave feedback for our team!

Square Payment Form Example

Taking a Payment with Square

Taking online payments with Square is a 2-step process:

  1. Generate a nonce: Securely collect credit card & digital wallet information using the Square Payment Form and generate a nonce.
  2. Charge the nonce: Call Square's CreatePayment endpoint with the amount, location ID, and nonce on your backend server.

A nonce is an encrypted token that lets you take payments with Square without handling real credit card numbers. It is generated by the payment form and holds information to identify the payment tender for an online payment. The generated nonce is used with Square's Payments API to create charges.

Build the Payment Form →