https://github.com/weareseeed/react-square-web-payments-sdk

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.
https://github.com/weareseeed/react-square-web-payments-sdk

nextjs nextjs-payments nextjs-saas payment payments react react-pyaments sdk typescript

Last synced: over 1 year ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/weareseeed/react-square-web-payments-sdk
• Owner: weareseeed
• License: mit
• Created: 2021-06-14T19:13:29.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2025-03-17T21:32:56.000Z (over 1 year ago)
• Last Synced: 2025-03-24T06:08:38.691Z (over 1 year ago)
• Topics: nextjs, nextjs-payments, nextjs-saas, payment, payments, react, react-pyaments, sdk, typescript
• Language: TypeScript
• Homepage: https://react-square-payments.weareseeed.com/
• Size: 3.94 MB
• Stars: 41
• Watchers: 4
• Forks: 44
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE-OF-CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          
# react-square-web-payments-sdk

`react-square-web-payments-sdk` lets 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, and Gift Cards.



A react wrapper for [Square's Web Payments SDK](https://developer.squareup.com/docs/web-payments/overview)

[![NPM Version](https://flat.badgen.net/npm/v/react-square-web-payments-sdk)](https://www.npmjs.com/package/react-square-web-payments-sdk)

[![NPM Downloads](https://flat.badgen.net/npm/dm/react-square-web-payments-sdk)](https://www.npmjs.com/package/react-square-web-payments-sdk)

[![NPM Dependents](https://flat.badgen.net/npm/dependents/react-square-web-payments-sdk)](https://www.npmjs.com/package/react-square-web-payments-sdk)

[![Build](https://img.shields.io/github/workflow/status/weareseeed/react-square-web-payments-sdk/CI?style=flat-square)](https://github.com/weareseeed/react-square-web-payments-sdk/actions)

[![Coverage](https://flat.badgen.net/codecov/c/github/react-hookz/web)](https://app.codecov.io/gh/react-hookz/web)

[![Types](https://flat.badgen.net/npm/types/react-square-web-payments-sdk)](https://www.npmjs.com/package/react-square-web-payments-sdk)

[![Tree Shaking](https://flat.badgen.net/bundlephobia/tree-shaking/react-square-web-payments-sdk)](https://bundlephobia.com/result?p=react-square-web-payments-sdk)

[![All Contributors](https://img.shields.io/badge/all_contributors-3-blue.svg?style=flat-square)](#contributors-)

📄 **[DOCS](https://react-square-payments.weareseeed.com/)**

• ✨ **[CHANGELOG](https://github.com/weareseeed/react-square-web-payments-sdk/releases)**



## Install

This one is pretty simple, everyone knows what to do:

##### NPM

```shell

npm install react-square-web-payments-sdk

```

##### Yarn

```shell

yarn add react-square-web-payments-sdk

```

## Usage

```tsx

// Dependencies

import * as React from 'react';

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

const MyPaymentForm = () => (

   {

      console.info({ token, buyer });

    }}

    /**

     * This function enable the Strong Customer Authentication (SCA) flow

     *

     * We strongly recommend use this function to verify the buyer and reduce

     * the chance of fraudulent transactions.

     */

    createVerificationDetails={() => ({

      amount: '1.00',

      /* collected from the buyer */

      billingContact: {

        addressLines: ['123 Main Street', 'Apartment 1'],

        familyName: 'Doe',

        givenName: 'John',

        countryCode: 'GB',

        city: 'London',

      },

      currencyCode: 'GBP',

      intent: 'CHARGE',

    })}

    /**

     * Identifies the location of the merchant that is taking the payment.

     * Obtained from the Square Application Dashboard - Locations tab.

     */

    locationId="LID"

  >

    

  

);

export default MyPaymentForm;

```

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## Contributors ✨

Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/weareseeed/react-square-web-payments-sdk/issues). You can also take a look at the [contributing guide](https://github.com/weareseeed/react-square-web-payments-sdk/blob/main/CONTRIBUTING.md).

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Daniel Esteves
💻 📖 💡 ⚠️

    
Rowland Saer
📖

    
Hleb Siamionau
💻

    
Gabriel De Andrade
💻 📖 💡

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!