Skip to main content

Introduction

⚡️ A wrapper that will help you take payments using Square in no time.

⏱ Building custom components every time you need to take a payment is a pain.

✍️ This wrapper will help you easily create PCI-compliant inputs to accept payments online with the Square Payments API. It supports the following payment methods: credit and debit cards, ACH bank transfers, Apple Pay, Google Pay, Gift Cards and Afterpay/Clearpay.

Credit card example

Fast Track ⏱️​

Play to learn react-square-web-payments-sdk in 5 minutes!

Install Node.js and create a new React project:

tip

Use react.new to create a new React project and test the package on your browser!

Install the package on your project:

npm install --save react-square-web-payments-sdk

Wrap your app in our provider to have access to the SDK from wherever within it.

import { PaymentForm } from 'react-square-web-payments-sdk';

export default function App() {
  return (
    <PaymentForm {...props}>
      <MyApp />
    </PaymentForm>
  );
}

You can now use any of the SDK's supported payment methods.

import { CreditCard } from "react-square-web-payments-sdk";

export default HomePage() {
  return (
    <>
      <CreditCard />
    </>
  )
}

Staying informed​

Something missing?​

Please file an issue for us or send a tweet referencing the @seeedsocial Twitter account if you notice flaws with the documentation or have recommendations on how to enhance the documentation or the project in general.