square / react-square-payment-form

DEPRECATED - The React Square Payment Form lets you take payments securely and easily in your React app using a familiar, component-based syntax.

DEPRECATED - react-square-payment-form

⛔️ SqPaymentForm is deprecated and will no longer be supported. Please use the Web Payments SDK to take payments on a web client. To migrate from the Square Payment Form to the Web Payments SDK, see the Migrate to the Web Payments SDK migration guide.

The React Square Payment Form lets you take payments securely and easily in your React app using a familiar, component-based syntax.

Compatability

React 16.3.0 or above

Installation

See the documentation to get started.

Demo

1. Run the demo locally

   cd demo
   npm install
   npm start
   

2. Update the LOCATION_ID and APPLICATION_ID in PaymentPage.jsx with your own application credentials

Note: The demo only supports credit card payments. Digital wallets are not supported locally.

Documentation

Running the doc website locally

cd website
npm install
npm start

Updating the docs

Files under docs/components are automatically generated from the component comments. All other documentation files can be modified directly.

To update the component documentation, run ./generateComponentDocs.sh

Publishing the website

Once the changes are merged, run the following command to publish the website.

cd website
GIT_USER=<GIT_USER> CURRENT_BRANCH=master USE_SSH=true npm run publish-gh-pages

Publishing a new version

The following script will update the package version, release the new version, and publish the documentation.

npm run update [major|minor|patch]

License

Copyright 2019 Square, Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

react-square-payment-form's Issues

Console error on initial rendering of form

Whenever the form is rendered:

FormNotReadyError: Cannot call SqPaymentForm#recalculateSize before SqPaymentForm is ready. See: https://docs.connect.squareup.com/payments/sqpaymentform/sqpaymentform-overview#how-it-works-sqpaymentform-process-flow
    at lt (https://js.squareup.com/v2/paymentform:1:131369)
    at pt (https://js.squareup.com/v2/paymentform:1:131605)
    at ct.recalculateSize (https://js.squareup.com/v2/paymentform:1:123248)
    at SquarePaymentForm._this.renderSqPaymentForm (http://localhost:3001/static/js/1.chunk.js:29905:27)
    at SquarePaymentForm.componentDidUpdate (http://localhost:3001/static/js/1.chunk.js:29953:10)
    at commitLifeCycles (http://localhost:3001/static/js/1.chunk.js:23218:26)
    at commitAllLifeCycles (http://localhost:3001/static/js/1.chunk.js:24762:11)
    at HTMLUnknownElement.callCallback (http://localhost:3001/static/js/1.chunk.js:5241:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3001/static/js/1.chunk.js:5290:20)
    at invokeGuardedCallback (http://localhost:3001/static/js/1.chunk.js:5344:35)
    at commitRoot (http://localhost:3001/static/js/1.chunk.js:24986:11)
    at http://localhost:3001/static/js/1.chunk.js:26534:9
    at Object.unstable_runWithPriority (http://localhost:3001/static/js/1.chunk.js:32860:16)
    at completeRoot (http://localhost:3001/static/js/1.chunk.js:26533:17)
    at performWorkOnRoot (http://localhost:3001/static/js/1.chunk.js:26456:13)
    at performWork (http://localhost:3001/static/js/1.chunk.js:26361:11)
    at performSyncWork (http://localhost:3001/static/js/1.chunk.js:26335:7)
    at requestWork (http://localhost:3001/static/js/1.chunk.js:26190:9)
    at scheduleWork (http://localhost:3001/static/js/1.chunk.js:26003:9)
    at Object.enqueueSetState (http://localhost:3001/static/js/1.chunk.js:16689:9)
    at SquarePaymentForm.push../node_modules/react/cjs/react.development.js.Component.setState (http://localhost:3001/static/js/1.chunk.js:30547:20)
    at http://localhost:3001/static/js/1.chunk.js:29960:20
    at HTMLScriptElement.script.onload (http://localhost:3001/static/js/1.chunk.js:29883:22)

FormNotReadyError thrown when calling requestCardNonce after form has loaded

I was working on a solution for #34 and put together this basic example to prove the concept before integrating into the react-square-payment-form components:

import React, { useEffect, useState } from 'react';

const Checkout = () => {
  const [paymentFormLoaded, updatePaymentFormLoaded] = useState(false);

  const paymentForm = new SqPaymentForm({
    applicationId: APPLICATION_ID,
    inputClass: "sq-input",
    autoBuild: false,
    cardNumber: {
      elementId: "sq-card-number",
      placeholder: "Card Number"
    },
    cvv: {
      elementId: "sq-cvv",
      placeholder: "CVV"
    },
    expirationDate: {
      elementId: "sq-expiration-date",
      placeholder: "MM/YY"
    },
    postalCode: {
      elementId: "sq-postal-code",
      placeholder: "Postal"
    },
    callbacks: {
      paymentFormLoaded: () => {
        updatePaymentFormLoaded(true);
        console.log('Form loaded.');
      },
      cardNonceResponseReceived: (errors, nonce, cardData) => {
        if (errors) {
          console.error(errors);
          return;
        }
        console.log('Nonce received.');
      }
    }
  });

  useEffect(() => {
    if (!paymentFormLoaded) {
      console.log('Form loading...');
      paymentForm.build();
    }
  });

  return (
    <>
      <div id="form-container">
        <div id="sq-card-number" />
        <div className="third" id="sq-expiration-date" />
        <div className="third" id="sq-cvv" />
        <div className="third" id="sq-postal-code" />
      </div>
      {paymentFormLoaded && (
        <button
          className="sq-input"
          onClick={() => {
            console.log('Requesting nonce...');
            paymentForm.requestCardNonce();
          }}
        >
          Place your order
        </button>
      )}
    </>
  );
};

export default Checkout;

So far as I can tell, the logic is sound; however, clicking on the "Place your order" button produces this error in the browser's console:

Uncaught FormNotReadyError: Cannot call SqPaymentForm#requestCardNonce before the paymentFormLoaded() callback. See Step 4: https://developer.squareup.com/docs/payment-form/how-it-works#the-sqpaymentform-process-flow

This doesn't seem to make sense though, because the button wouldn't even be rendered if the form hadn't successfully loaded.

Thoughts?

Handle conditional rendering of the payment form

Use case: want to conditionally render credit card inputs, but always display the "submit" button.

ElementNotVisibleError: SqPaymentForm element with id 'sq-payment-form-sq-card-number' is not visible. Does it or a parent element have 'display:none'?

Originally posted by @siakaramalegos in #41 (comment)

Allow calling `setPostalCode` after the payment form has loaded

Hi Square Team,
I'm using this package in our Square extension for WooCommerce and I need to be able to update the postal code field in the SqPaymentForm after the form has loaded (i.e. when the customer updates their postcode in the billing address section)

Normally I would just use paymentForm.setPostalCode() but this isn't exposed in the context.

Can you please look into adding a function like onSetPostalCode()? Similar to onCreateNonce and onVerifyBuyer?

Here's a screencast showcasing what I'm looking for: https://d.pr/v/8SliDF
Thanks

Expose SquarePaymentForm State as Context

Hello,
I may be overlooking a simple solution, but I would to either create the PR or submit a feature request where the state of the SquarePaymentForm is exposed via context. For example If I render a component like the following:

function CardInput() {
	const context = React.useContext(SquareContext);
	return (
		<React.Fragment>
			<SimpleCard />

			<Button fullWidth color='primary' onClick={() => context.onCreateNonce()}>
				{'SAVE CARD'}
			</Button>
		</React.Fragment>
	);
}

I have the issue that the Button component renders before the SimpleCard is completed. I would like to just track the state of the SquarePaymentForm like so:

function CardInput() {
	const context = React.useContext(SquareContext);
        if(context.formLoaded && context.paymentForm){
	  return (
		  <React.Fragment>
			  <SimpleCard />
 
			  <Button fullWidth color='primary' onClick={() => context.onCreateNonce()}>
				  {'SAVE CARD'}
			  </Button>
		  </React.Fragment>
	  );
      }
      // handle some other states ...
      return null;
}

Alternatively, is there an existing way to know the status of the form and show an appropriate UI?

Cheers

npm install fails to fetch artifact

I get this error when trying to run npm install on the website directory:

1169 verbose stack FetchError: request to https://artifactory.global.square/artifactory/api/npm/square-npm/yargs/-/yargs-2.3.0.tgz failed, reason: getaddrinfo ENOTFOUND artifactory.global.square
1169 verbose stack at ClientRequest. (C:\nodejs\node_modules\npm\node_modules\minipass-fetch\lib\index.js:97:14)

Not sure why I cant access this url, anyone else had this problem?

What is createVerificationDetails

This was added as a required prop recently but there isn't any explanation for what it is.

No way to change styling of the input field inside the iframe.

I wanted to change the look of the input field i.e, the Card Input number field, CVV input field, etc. But, since everything is loaded inside the iframe am not able to do so. Is there a way to do it?. I have applied inputClass - which takes string input but it only allows to put styling in the wrapper component and not the elements inside iframe.

So, is there a way?

Digital wallet methods stay as 'loading' in the context

It seems that even after the methods supported callback is called with all the different methods, informing me that apple pay is not supported etc, the context still says applePayState is loading

Because of this the 'loadingView' that I give to the components like <GooglePayButton> persists, rather than showing the actual button if supported or the unavailableView if not.

Any ideas on why this is happening?

Can this support react-native application?

cardNonceResponseReceived doesn't return: billingContact, shippingContact, shippingOption

current implementation returns only these 4 fields: errors, nonce, cardData, buyerVerificationToken

Please add billing and shipping contact info.

disable prop for CreditCardSubmitButton

I'd love to be able to pass a prop to the CreditCardSubmitButton so I can disable it (not allow the button to be pressed) if there are errors in the form, eg. user hasn't entered an email address.

Some missing pieces in the "Build the Payment Form" instructions

Hello,

I had to add an intent entry to the createVerificationDetails() handler:

      intent: "CHARGE",  // added

I also had to add a locationId entry to the the props passed to SquarePaymentForm (from my Default Test Account). In both cases thanks for the excellent error messages provided in the console, they sent me to the right place in the docs.

Also, the credit card number provided for testing did not work for me, though the data provided here worked fine.

Thanks for the nice React page plug-in - it works well!

sandox=false

sandbox=false still tries to connect to the sandbox.
This is not what you would expect.

This means you have to have a whole new page or component for prod deployment verses test or local testing etc,

useSqPaymentForm Hook

Thanks for working on this library! It's been super helpful for me. Would you have interest in also including a hook? I needed to do some things that the component didn't let me do and also liked the hook approach for this in my use case so I built one.

https://gist.github.com/garand/9403725af3ef3ff3f7047df28581b1ff

I would love to contribute it back to the project if it's something you'd be interested in.

Thanks!

eslint-plugin-square/react

any interest in moving to eslint-plugin-square? there are TypeScript and React configurations. I'm happy to help get it started.

Update docs to show how to customize the form

See #85

The current docs don't show any examples for how to style the input fields. There are a few references to the ability to do so, but nothing showing exactly what you can change.

Ex: https://developer.squareup.com/docs/api/paymentform#datatype-inputstyleobjects

Cannot call SqPaymentForm#requestCardNonce before the paymentFormLoaded() callback

I Suspect the <SquarePaymentForm is rendered multiple times.

This occasionally results in the following error when clicking Pay:

Uncaught FormNotReadyError: Cannot call SqPaymentForm#requestCardNonce before the paymentFormLoaded() callback. See Step 4: https://developer.squareup.com/docs/payment-form/how-it-works#the-sqpaymentform-process-flow
at bt (https://js.squareupsandbox.com/v2/paymentform:1:154363)

Console logs.

paymentFormLoaded()

VM3396 0.chunk.js:55739 [Analytics] A token request is already in place
console. @ VM3396 0.chunk.js:55739
overrideMethod @ VM3411 react_devtools_backend.js:2273
s.getToken @ VM3413 data.js:10
(anonymous) @ VM3398 paymentform:1
_processQueue @ VM3398 paymentform:1
_handleLoad @ VM3398 paymentform:1
i @ VM3398 paymentform:1
load (async)
_injectScript @ VM3398 paymentform:1
t @ VM3398 paymentform:1
load (async)
_install @ VM3398 paymentform:1
calculate @ VM3398 paymentform:1
e @ VM3398 paymentform:1
mt._requestAnalyticsToken @ VM3398 paymentform:1
mt @ VM3398 paymentform:1
St._initialize @ VM3398 paymentform:1
St @ VM3398 paymentform:1
renderSqPaymentForm @ VM3396 0.chunk.js:66133
(anonymous) @ VM3396 0.chunk.js:66152
commitHookEffectListMount @ VM3396 0.chunk.js:49068
commitPassiveHookEffects @ VM3396 0.chunk.js:49105
callCallback @ VM3396 0.chunk.js:29650
invokeGuardedCallbackDev @ VM3396 0.chunk.js:29699
invokeGuardedCallback @ VM3396 0.chunk.js:29752
flushPassiveEffectsImpl @ VM3396 0.chunk.js:52169
unstable_runWithPriority @ VM3396 0.chunk.js:70962
runWithPriority$1 @ VM3396 0.chunk.js:40537
flushPassiveEffects @ VM3396 0.chunk.js:52137
(anonymous) @ VM3396 0.chunk.js:52016
workLoop @ VM3396 0.chunk.js:70906
flushWork @ VM3396 0.chunk.js:70862
performWorkUntilDeadline @ VM3396 0.chunk.js:70466
VM3398 paymentform:1 Uncaught FormNotReadyError: Cannot call SqPaymentForm#requestCardNonce before the paymentFormLoaded() callback. See Step 4: https://developer.squareup.com/docs/payment-form/how-it-works#the-sqpaymentform-process-flow
at bt (https://js.squareupsandbox.com/v2/paymentform:1:154363)
at Pt (https://js.squareupsandbox.com/v2/paymentform:1:163861)

errors in the cardNonceResponseReceived leads the if statement always true.

react-square-payment-form/demo/src/PaymentPage.jsx

Lines 21 to 31 in c11114b

	function cardNonceResponseReceived(errors, nonce, cardData, buyerVerificationToken) {
	if (errors) {
	setErrorMessages(errors.map(error => error.message));
	return;
	}
	setErrorMessages([]);
	alert('nonce created: ' + nonce + ', buyerVerificationToken: ' + buyerVerificationToken);
	// API.post('/payments', data: { nonce: nonce, buyerVerificationToken: buyerVerificationToken }) // implement this
	}

This React square payment form is awesome. Thank you, @square team.

I have a question regarding the function cardNonceResponseReceived. It is about the errors argument.

If the errors argument returned from the square and passed to cardNonceResponseReceived function is an array with null, [null], does it mean there is an error but we don't know what kind of error happened? Or does it mean that there is no error, so it is an array but only have a null object? I believe the second case is right. If it is an array but only have a null object, it should be no error, right?

In the second case, if my assumption is right, should we change the if statement to if (errors && errors [0] != null)? because it is always true when errors are [null].

Please let me know if you have any problems with my question!

Thanks

Does not support usage without postal code input

In this line:

react-square-payment-form/src/components/SquarePaymentForm.tsx

Line 226 in 8d19705

config.postalCode = { elementId: `${props.formId}-sq-postal-code`, placeholder: '12345' }

, there should be an else condition where we set the postalCode element to false. Otherwise, customers in countries outside the US won't be able to disable the postal card input field.

See: https://developer.squareup.com/docs/payment-form/cookbook/remove-postal-code-requirement and square/ember-square-payment-form#31

Upgrade payment form to use React Hooks

New sandbox id doesn't work

The token call when the SqPaymentForm is initialized consistently returns 401 unauthorized when using a new (non-legacy) sandbox application id.

Typescript requires formId and apiWrapper properties to be set

The formId and apiWrapper properties are required properties but set by defaults. Typescript requires that these properties be explicitly set because they are not marked as optional.

Because none of the demos or the quick start use these properties it is confusing for programmers using typescript.

They should either be included in the demos and quick start or marked as optional.

Styling the input fields

I apologize for my ignorance, but I cannot figure out how to style the input fields. Any sort of example would go a million miles in clearing it up.

Create Nonce outside of SquarePaymentForm Context

Hello,

I am attempting to solve a use case that seems relatively simple, but I can't get it to work within this library. Essentially, we have some users and they may have a payment method on file already. If that's the case we wish to give them the ability to change the card they charge. Setting the card, however, is just one piece of information we need.

I would like to await the card nonce on form submission and then complete submission.

The solution I came up with is to start submission by calling onCreateNonce and then complete the form submission process in a useEffect hook, but I'm curious if there's a better approach.

Here's a code sandbox showing my issue:

https://codesandbox.io/s/affectionate-butterfly-ngsyr?file=/src/App.js

• Is it possible to access onCreateNonce without wrapping the unrelated component branches in SquarePaymentForm? From my understanding, I'm pretty sure the the answer here is no.
• Is it possible to await a card nonce request?

Thanks for any suggestions.

When trying to run the demo the card UI doesn't have input fields

I tried running the demo as is, and then I tried following this guide https://square.github.io/react-square-payment-form/docs/paymentform with create react app, but in both cases I got the picture above. There is no way to actually input a credit card number or any of the other fields

Component details and process for CreditCardSubmitButton

Component Details

I was trying to understand how to customize the <CreditCardSubmitButton> component, but it's not on the Component list in your docs. I just found it by manually going to the URL https://square.github.io/react-square-payment-form/docs/components/CreditCardSubmitButton. So perhaps add the link to the left-hand menu?

Process Flow

The process flow using this component library is significantly different to the regular web flow from the payment form library. I'd like to not call the verification until I first do validation on other customer inputs, but clicking the button immediately calls for the nonce. Additionally, the button is required, and I can't instead just call a function similar to form.requestCardNonce() in the web payment form library. I'd prefer not to have a multi-step form, and to just submit all data at once.

This is a separate, question, but any way to add a styled <span> into the labels so I can style it like our other inputs with required fields?

paymentFormLoaded not being invoked properly

Can't seem to figure this one out for some reason

export const SquareForm = () => {
  const [hasLoaded, setHasLoaded] = useState(false)
  const [isProcessing, setIsProcessing] = useState(false)

  const cardNonceResponseReceived = async (errors: any, nonce: string) => {
      // do stuff
  }

  const handleSetHasLoaded = () => setHasLoaded(true)

  return (
    <div className="mt-3">
      <h5>Payment Details</h5>
      {hasLoaded ?
        <SquarePaymentForm
          formId={`depositForm-${id}`}
          apiWrapper={`depositForm-${id}`}
          sandbox={isProduction() ? false : true}
          applicationId={process.env.NEXT_PUBLIC_SQUARE_APPLICATION_ID}
          locationId={process.env.NEXT_PUBLIC_SQUARE_LOCATION_ID}
          cardNonceResponseReceived={cardNonceResponseReceived}
          paymentFormLoaded={handleSetHasLoaded}
        >
          <CreditCardNumberInput />
          <div className="sq-form-third">
            <CreditCardExpirationDateInput />
          </div>

          <div className="sq-form-third">
            <CreditCardPostalCodeInput />
          </div>

          <div className="sq-form-third">
            <CreditCardCVVInput />
          </div>
          <SquareButton />
        </SquarePaymentForm>
        : <Spinner type="oval" size="lg" />
      }
    </div>
  )
}

Basically, I'm trying to get a Spinner to load while the payment form loads up but can't seem to figure it out. I have passed in the handleSetHasLoaded into paymentFormLoaded, however, it doesn't not update setHasLoaded to true.

Anyone knows a workaround?

Support for inputClass

Hey! I see there is support for inputStyles, is there also plans to add support for inputClass?

Thanks!

Missing props from samples

The props formId and locationId for the SquarePaymentForm are required, but the samples here https://square.github.io/react-square-payment-form/docs/paymentform do not include them.

Inputs not rendered when using material UI modal

Payment form placeholders don't populate until you click into the inputs:

Slack thread: https://buildwithsquare.slack.com/archives/C4P3KUNH3/p1580690893233700

CSS:

.sq-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.5;
  text-transform: uppercase;
}
.sq-input {
  font-size: 16px;
  font-family: Helvetica Neue;
  padding: 16px;
  color: #373F4A;
  background-color: transparent;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 1rem;
  width: 100%;
}
.sq-input:focus {
  border: 1px solid #4A90E2;
  outline: 0;
}

Support Gift Card payment form

Gift card payment support needs to be implemented in order for this project to be a complete React TypeScript solution.

Link to vanilla JavaScript implementation per the Square docs

Support calling setPostalCode

I'm trying to call setPostalCode in the paymentFormLoaded callback. Problem is, the SqPaymentForm instance is hidden in a closure and there is no obvious/documented way to access it.

Additionally, there does not appear to be a way to provide the default value for the postal code via props/context. Any pointers or ideas would be appreciated.

See related forum post.

Fix auto doc generation to show SqPaymentForm default props

CVV Not auto completing when using CreditCardCVVInput

In the paymentform.md example.
It shows usage in this form.

GPay attempts to auto complete the card details (asking for your CVV)
But after entering your CVV automcomplete does not fill n the CVV.

I believe/think this may be due to an additional rendered cc-csc input displayed as part of the replacement

<CreditCardNumberInput/>

<form novalidate="true"><input autocomplete="cc-number" autocapitalize="off" autocorrect="off" spellcheck="off" type="tel" pattern="\d*" maxlength="24" placeholder="• • • •  • • • •  • • • •  • • • •" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background-color: transparent; color: #373F4A; font-family: Helvetica Neue; font-size: 16px; line-height: 24px; padding: 16px;">
**<input autocomplete="cc-csc" tabindex="-1">**
<input autocomplete="cc-exp-month" tabindex="-1">
<input autocomplete="cc-exp-year" tabindex="-1">
</form>

<SquarePaymentForm {...props}>

  <fieldset className="sq-fieldset">
    <CreditCardNumberInput />
    <div className="sq-form-third">
      <CreditCardExpirationDateInput />
    </div>

    <div className="sq-form-third">
      <CreditCardPostalCodeInput />
    </div>

    <div className="sq-form-third">
      <CreditCardCVVInput />
    </div>
  </fieldset>

  <CreditCardSubmitButton>
      Pay $1.00
  </CreditCardSubmitButton>

</SquarePaymentForm>

[TS] Wrong types for SqContact (in createVerificationDetails)

Hi !
createVerificationDetails prop required return type is SqVerificationDetails, problem is with SqVerificationDetails->billingContactSqContact (SqContact), it require all of the fields like familyName, email, country, city, postalCode, adressLines[].
I think it has wrong types, cause main square docs (https://developer.squareup.com/docs/payment-form/cookbook/verify-buyer-on-card-charge) says that only givenName is required.

What i want to achive? I want to have classic prepayment form (card number, cvv, postal, exp. date), with additional field "Name on card" which value i will provide to createVerificationDetails.

Publishing TypeScript declarations

The package published in NPM does not have the TypeScript types.

Why is the declaration in tsconfig.json set to false?

Having the typings for a library is useful for projects to more easily find mistakes, and migrate to newer versions.

Payment form script loaded multiple times

At this line, the Square library is loaded inside a useEffect function call:

react-square-payment-form/src/components/SquarePaymentForm.tsx

Line 288 in 708ad70

loadSqPaymentFormLibrary(

Inside the function that useEffect calls, loadSqPaymentFormLibrary, there is no existential check for the presence of this script:

react-square-payment-form/src/components/SquarePaymentForm.tsx

Line 193 in 708ad70

script.src = 'https://js.squareupsandbox.com/v2/paymentform';

This causes unexpected behavior when developers deal with multiple render issues. Should either throw an error indicating the double rendering of the script or form. Or it should only insert the script if it doesn't already exist.

Uncaught AnalyticsParametersRequiredError: The Analytics library must be initialized with analyticsParameters to call verifyBuyer

I get this error when submitting the payment form which prevents the submission to complete. I could not find a reference to the "Analytics library" or "analyticsParameters". Direct link to Squareup documentation: https://developer.squareup.com/docs/api/paymentform#verifybuyer.
Error in JavaScript Console:

data.js:15 Uncaught AnalyticsParametersRequiredError: The Analytics library must be initialized with analyticsParameters to call verifyBuyer.
    at r (https://js.squareupsandbox.com/payments/data.js:15:1054)
    at Object.AnalyticsParametersRequiredError (https://js.squareupsandbox.com/payments/data.js:15:1195)
    at s.verifyBuyer (https://js.squareupsandbox.com/payments/data.js:10:20066)
    at Object.verifyBuyer (https://js.squareupsandbox.com/v2/paymentform:1:83642)
    at St.verifyBuyer (https://js.squareupsandbox.com/v2/paymentform:1:158157)
    at Object.cardNonceResponseReceived [as current] (http://localhost:3000/static/js/1.chunk.js:248450:32)
    at http://localhost:3000/static/js/1.chunk.js:248750:24
    at mt._cardNonceResponseReceived (https://js.squareupsandbox.com/v2/paymentform:1:153528)
    at mt.receiveMessageCallback (https://js.squareupsandbox.com/v2/paymentform:1:149993)
r @ data.js:15
AnalyticsParametersRequiredError @ data.js:15
s.verifyBuyer @ data.js:10
verifyBuyer @ paymentform:1
St.verifyBuyer @ paymentform:1
cardNonceResponseReceived @ SquarePaymentForm.tsx:133
(anonymous) @ useDynamicCallback.ts:8
mt._cardNonceResponseReceived @ paymentform:1
mt.receiveMessageCallback @ paymentform:1

Missing form parameters

Example React PaymentPge does not render
Console error shows:

SqPaymentForm initialized without a payment method. See: https://developer.squareup.com/docs/api/paymentform#paymentform-configurationfields

Update documentation to show single-element form

Right now the documentation flow walks you through setting up the multi-element form and the single-element form is pretty nested. Update the docs so that both options are visible on the home page and the walk through will prompt you to pick between the two.

nonce not found

Using a nonce generated from the 4111111111111111 test credit card in Sandbox, I keep getting this error when I try to create the charge:
{"result":{"errors":[{"code":"NOT_FOUND","detail":"Card nonce not found","category":"INVALID_REQUEST_ERROR"}]}}

The nonce / buyer verification token is
buyerVerificationToken: null
nonce: "cnon:CBASEIUwUf7VOlOT01o73QILjJk"

Unable to add line items

Hello,

I want to associate the items purchased with a given transaction. I have attempted to add the line items to my createPaymentRequest function. However, I do not see this reflected on square when reviewing the transaction. Is this an issue with the way I am using the react-square-payment-form package?

return { requestShippingAddress: true, requestBillingInfo: true, currencyCode: 'USD', countryCode: 'US', shippingContact: { .... }, total: { label: "REMOVED", amount: '2', pending: false, }, lineItems: [ { label: 'Some item here', amount: '1', pending: false, }, { label: 'Another line item here', amount: '1', pending: false, }, ], };

Thanks!

SquarePaymentForm is loading very slowly

I have my payment form inside a modal window. When I open the modal, it takes about 15 seconds to fully load the payment form. It will be great if that can be fixed,

Recognise non-American cards and change to i.e. "zip"

Hi there,

I was wondering if it's possible in the react square payment form to recognise the country when a user types in the card and change the "postal code" placeholder to something like "zip" if it's a Canadian card?

I believe stripe does this in their payment input fields and was wondering if square could expose similar information or handle it as such.

Thanks

Add support for Square's single element payment form

https://developer.squareup.com/docs/payment-form/payment-form-walkthrough#build-a-single-element-payment-form-beta

Update Masterpass component to use Masterpass SRC