Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 4 days ago
JSON representation

Host: GitHub
URL: https://github.com/weareseeed/react-square-web-payments-sdk
Owner: weareseeed
License: mit
Created: 2021-06-14T19:13:29.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-07-12T21:32:10.000Z (6 months ago)
Last Synced: 2024-12-18T08:07:37.018Z (11 days 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.86 MB
Stars: 38
Watchers: 4
Forks: 41
Open Issues: 20
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!