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.

Install

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

NPM

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

Yarn

1yarn add react-square-web-payments-sdk

Usage

1// Dependencies
2import * as React from 'react';
3import { CreditCard, PaymentForm } from 'react-square-web-payments-sdk';
4
5const MyPaymentForm = () => (
6  <PaymentForm
7    /**
8     * Identifies the calling form with a verified application ID generated from
9     * the Square Application Dashboard.
10     */
11    applicationId="sq0idp-Y0QZQ-Xx-Xx-Xx-Xx"
12    /**
13     * Invoked when payment form receives the result of a tokenize generation
14     * request. The result will be a valid credit card or wallet token, or an error.
15     */
16    cardTokenizeResponseReceived={(token, buyer) => {
17      console.info({ token, buyer });
18    }}
19    /**
20     * This function enable the Strong Customer Authentication (SCA) flow
21     *
22     * We strongly recommend use this function to verify the buyer and reduce
23     * the chance of fraudulent transactions.
24     */
25    createVerificationDetails={() => ({
26      amount: '1.00',
27      /* collected from the buyer */
28      billingContact: {
29        addressLines: ['123 Main Street', 'Apartment 1'],
30        familyName: 'Doe',
31        givenName: 'John',
32        countryCode: 'GB',
33        city: 'London',
34      },
35      currencyCode: 'GBP',
36      intent: 'CHARGE',
37    })}
38    /**
39     * Identifies the location of the merchant that is taking the payment.
40     * Obtained from the Square Application Dashboard - Locations tab.
41     */
42    locationId="LID"
43  >
44    <CreditCard />
45  </PaymentForm>
46);
47
48export 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. You can also take a look at the contributing guide.

Thanks goes to these wonderful people (emoji key):

Daniel Esteves 💻 📖 💡 ⚠️

Rowland Saer 📖

Hleb Siamionau 💻

Gabriel De Andrade 💻 📖 💡

This project follows the all-contributors specification. Contributions of any kind welcome!