Comments (6)
The paymentFormLoaded
prop will provide that information as you've sorta figured out in your PR.
function PaymentForm() {
const [formLoaded, setFormLoaded] = React.useState(false)
return (
<SqPaymentForm paymentFormLoaded={() => setFormLoaded(true)} >
<CardInput isReady={formLoaded} />
</SqPaymentForm>
)
}
I think there's a loose assumption that your SqPaymentForm
component won't be too far away from payment method components like SimpleCard
. If that's not the case, I think it's reasonable to expose formLoaded
on the context.
from react-square-payment-form.
SqPaymentForm needs SimpleCard
to exist so it can set up the payment method. (Underneath the hood, a div
is populated with iframes so Square handles sensitive data, like credit card numbers, instead of you.) You're conditionally rendering the SimpleCard
which explains the error- before the payment form is ready, there are no payment methods.
if (isReady) {
return (
<React.Fragment>
<SimpleCard />
<button onClick={() => context.onCreateNonce()}>{"SAVE CARD"}</button>
</React.Fragment>
);
}
return "Loading...";
Since SimpleCard
is just an empty div
to start, you could just conditionally render the button to allow the payment method to exist when initializing.
return (
<React.Fragment>
<SimpleCard />
{isReady ? (
<button onClick={() => context.onCreateNonce()}>{"SAVE CARD"}</button>
) : (
"Loading..."
)}
</React.Fragment>
);
Another path forward is to use CSS classes to control the display of elements based on state. Hope this helps!
from react-square-payment-form.
Ok, got it! Makes sense.. the div needs to exist to load the iframe, but will just be empty until the iframe is loaded. yup yup, and the sandbox works now. So it's actually the non-null components that need to wait, not the <SimpleCard />
.
Thanks a lot for the help.
from react-square-payment-form.
from react-square-payment-form.
Ahh okay thanks. Yea that's reasonable, my eyes missed that prop for sure. Thanks a lot.
from react-square-payment-form.
@maxbeatty I finally got a chance to try this and unfortunately it throws an error for me:
SqPaymentForm initialized without a payment method.
Here's a codesandbox with an implementation. I removed the application id, but once that's replaced the error shows in the console.
https://codesandbox.io/s/nostalgic-firefly-8g4ry?file=/src/App.js
from react-square-payment-form.
Related Issues (20)
- Create Nonce outside of SquarePaymentForm Context
- paymentFormLoaded not being invoked properly HOT 1
- Allow calling `setPostalCode` after the payment form has loaded
- No way to change styling of the input field inside the iframe. HOT 1
- [TS] Wrong types for SqContact (in createVerificationDetails)
- npm install fails to fetch artifact
- sandox=false HOT 1
- Support Gift Card payment form HOT 1
- Payment form script loaded multiple times
- Uncaught AnalyticsParametersRequiredError: The Analytics library must be initialized with analyticsParameters to call verifyBuyer HOT 1
- Support calling setPostalCode HOT 1
- CVV Not auto completing when using CreditCardCVVInput HOT 3
- When trying to run the demo the card UI doesn't have input fields HOT 7
- Styling the input fields HOT 1
- Update docs to show how to customize the form HOT 3
- Typescript requires formId and apiWrapper properties to be set HOT 1
- Digital wallet methods stay as 'loading' in the context HOT 4
- Unable to add line items HOT 2
- disable prop for CreditCardSubmitButton HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-square-payment-form.