### Install react-square-web-payments-sdk

Source: https://github.com/weareseeed/react-square-web-payments-sdk/blob/main/README.md

Instructions for installing the `react-square-web-payments-sdk` library using popular package managers like NPM and Yarn.

```shell
npm install react-square-web-payments-sdk
```

```shell
yarn add react-square-web-payments-sdk
```

--------------------------------

### Integrate Square Payment Form in React

Source: https://github.com/weareseeed/react-square-web-payments-sdk/blob/main/README.md

Demonstrates how to integrate the `PaymentForm` and `CreditCard` components from `react-square-web-payments-sdk` into a React application. It shows how to configure the application ID, location ID, handle tokenization responses, and implement Strong Customer Authentication (SCA) details.

```tsx
// Dependencies
import * as React from 'react';
import { CreditCard, PaymentForm } from 'react-square-web-payments-sdk';

const MyPaymentForm = () => (
  <PaymentForm
    /**
     * Identifies the calling form with a verified application ID generated from
     * the Square Application Dashboard.
     */
    applicationId="sq0idp-Y0QZQ-Xx-Xx-Xx-Xx"
    /**
     * Invoked when payment form receives the result of a tokenize generation
     * request. The result will be a valid credit card or wallet token, or an error.
     */
    cardTokenizeResponseReceived={(token, buyer) => {
      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"
  >
    <CreditCard />
  </PaymentForm>
);

export default MyPaymentForm;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.