stripe-archive / react-stripe-elements Goto Github PK

The provider expects window.Stripe to be set in its constructor. This forces the user to load the script synchronously (which is bad practice) before they load their app JS (which is even worse).

Are there plans to rearchitect this library to support this?

I have a server-side rendered app, which does not include the Stripe SDK (since it's not needed on every page) -- on pages that require the SDK, we inject it & assume (perhaps slightly unsafely) that it has loaded by the time the user has entered their payment details.

Even ignoring the safety aspects, this approach is not possible with this library as it will throw an exception if the Stripe SDK is not present at first instantiation.

Hi,

in the README.md file you provide some sample code which mentions AddressSection but there seems to be no implementation/sample for that code (yet).

Do you plan to support the extraFields also via this package? If so is there a timeline?

Best,
Gerwin

See: facebook/flow#1996 (comment)

The <CardElement> component obviously has some internal method of determining error state, as it will highlight red certain values that are invalid.

How can I access this state, (maybe through the StripeProvider) so that I can disable the form submission if the values are invalid?

See: facebook/flow#1996 (comment)

According to the Stripe.js documentation, it is possible to add a class to the div container for the element to allow styling. Currently this doesn't appear to have any affect on the UI elements.

Can there be a guide for integrating with React Native? Assuming it's possible without major amounts of changes.

I'm willing to assume this is just my ignorance on how context works in React, but I'm confused why I am receiving this error

It looks like you are trying to inject Stripe context outside of an Elements context.
Please be sure the component that calls createSource or createToken is within an 
<Elements> component.

This is what my code looks like (here's a running example).

class _CardForm extends React.Component {
  render () {
    return (
      <div className="Checkout">
        <h1>Available Elements</h1>
        <Elements>
          <form onSubmit={this.props.stripe.createToken()}>
            <label>
              Card details
              <CardElement />
            </label>
            <button>Pay</button>
          </form>
        </Elements>
      </div>
    )
  }
}

const CardForm = injectStripe(_CardForm)

const App = () => 
  <StripeProvider apiKey="pk_RXwtgk4Z5VR82S94vtwmam6P8qMXQ">
    <CardForm />
  </StripeProvider>

ReactDOM.render(<App />, document.querySelector('.App'))

AFAICT, I am definitely trying to "inject Stripe context inside of an Elements context", not outside. I can't see what I'm doing that is breaking the code 😕.

Any help would be greatly appreciated!

https://stripe.com/docs/sources/three-d-secure#client-side-source-creation

stripe.createSource({
  type: 'three_d_secure',
  amount: 1099,
  currency: "eur",
  three_d_secure: {
    card: "src_19YP2AAHEMiOZZp1Di4rt1K6"
  },
  redirect: {
    return_url: "https://shop.example.com/crtA6B28E1"
  }
}).then(function(result) {
  // handle result.error or result.source
});

Gives :

Uncaught (in promise) Error: You did not specify the type of Source or Token to create.
        We could not infer which Element you want to use for this operation.
    at ProxyComponent._this.findElement (inject.js:61)

I've got a funky thing happening where if I have a non-Elements input (for the customer's name), when a user clicks on it the focus is being stolen and set to the CVC element.

I was able to reproduce it at https://jsfiddle.net/69z2wepo/86025/ and it looks like Stripe.js is attaching a click handler to the parent that is wrapping everything and stealing the focus.

I was reading documentation about connect (store-builder recipe) and saw mention that I could use Elements or Checkout for collecting the payment details.

So ended up trying to set this up but run into a small hiccup... if I understood correctly I should be creating the token with connected user’s API key which means I should be changing the apiKey to StripeProvider based on the seller/user. While checking on how to do this I found this:
https://github.com/stripe/react-stripe-elements/blob/master/src/components/Provider.js#L45

Does this mean that this is not supported? or is the some better way of doing this?

Is there a way to clear the element in the handler?

I know in stripe.js the element object has a clear function but I'm not sure how it can be called in using this module,

After I get a token, I'd like to reset the Element fields, making it ready to add another card. in Stripe docs, there is an element.clear method(https://stripe.com/docs/stripe.js#other-methods), can I use it here, if yes, how to use it?

Hi there,

I'm seeing this in console:

Googling this error offers a host of libs that apparently need to update on newer React versions, seems like a standard process. Let me know if you'd like a PR.

Here's the relevant documentation from Facebook: https://github.com/facebook/prop-types/blob/master/README.md#difference-from-reactproptypes-dont-call-validator-functions

Thanks!

If I try to install the latest version using npm 3.10.10, I get the following error

npm ERR! cb() never called!

I installed 0.0.2 and it worked fine.

I got this error message when I run this.props.stripe.createToken on redux form.

inject.js:53 Uncaught Error: You did not specify the type of Source or Token to create.
        We could not infer which Element you want to use for this operation.

I have a component mounted inside in the Element with a nested CardElement. When the component initially renders the CardElement is not in the tree because it instead shows a "Loading" state. After loading is finished the render function of the component includes the CardElement in the tree.

After the loading is finished, when a button is clicked to call this.props.stripe.createToken() the following error shows in the console:

inject.js:53 Uncaught Error: You did not specify the type of Source or Token to create.
        We could not infer which Element you want to use for this operation.

In another example, I have a form that can switch between an editable and non-editable state. The editable state includes a CardElement, the non-editable state doesn't. If I set it to initially render the editable state, then click I button to exit the editable state, and click another button to go back into the editable state, then click another button to call this.props.stripe.createToken() I get this rejected promise:

stack: "IntegrationError: We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted. at new t (https://js.stripe.com/v3/:1:1784) at e.value (https://js.stripe.com/v3/:1:5928) at https://js.stripe.com/v3/:1:5201"
message: "We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted."
name: "IntegrationError"

I am using Redux and React router with my application.
I want to use component to the specific components. Not all components. Currently my implementation is like below,

ReactDOM.render(
  <Provider store={store}>
    <StripeProvider apiKey="pk_test_pub_key">
      <Router history={history}>
        {routes}
      </Router>
    </StripeProvider>
  </Provider>
  , container
);

But all components will be under StripeProvider. Is there a way to separate it and use it for specific components?

Hello,

I don't use 'card' element for design purpose, infortunatly, I can't figure how to check if I must display or not 'postalCode' element based on the 'cardNumber' element.
Is there a way do to that ?

Perhaps something like:

<Elements stripe={this.props.stripeInstance}>
   <MyCheckoutForm />
</Elements>

If you switch browser to a mobile format the base CardElement has a rough time with everything overlapping and looking quite ugly.

I'm seeing this issue when viewing on Google Chrome browser on iOS:

Blocked a frame with origin "https://www.mycoolwebsite.com" from accessing a frame with origin "https://js.stripe.com". Protocols, domains, and ports must match.

Any suggestions. Here's where I'm adding the StripeProvider

ReactDOM.render(
  <Provider store={store}>
    <StripeProvider apiKey={STRIPE_KEY}>
      <div>
        <Router history={history} routes={routes} onUpdate={routerOnUpdate} />
      </div>
    </StripeProvider>
  </Provider>,
  document.getElementById('app')
);

I'm getting this error:

Invalid token creation param: exp_month should be used in Elements instead

after calling createToken, it was working few days ago and suddenly I'm getting this error without any code changes and I don't have any clue what could be the problem

Hello, in my payment form, many cards from visa, mastercard, and amex have processed fine. But intermittently, a customer encounters this error:

"You did not specify the type of source or token to create"

This doesn't quite make sense given that I don't see type as an option inside of the react stripe elements configuration, so I assume this is an error encountered in the script that isn't passed quite up the react chain. My boss fired this earlier when he used 1password autofill in elements.

Does anybody have tips regarding this error during tokenization, and what I can do to catch it and communicate errors to customers better? I am unable to share source due to proprietary nature of code.

Hi, It would be great if you extended this project with a mock Stripe object so that it is possible to write tests using these components without loading the Stripe API.

I received a report from a user that the CardElement never rendered on Safari (up to date, new iPhone). This was using version 0.0.2 of the library. This occurred on this page: https://www.themarshallproject.org/support-us.

From the user: "I could not enter information on the line under “credit card” It simply would not make the keyboard available or allow me to click on/place a cursor/etc. on the space under “credit card” when that was selected. It was totally blank. After a couple of attempts poking around on the screen, Safari just crashed. Twice."

This sounds possibly related to #35. I was not able to reproduce, as with that bug. This is now the third report I've had of something similar though.

Hi, I'm encountering a react.createElement type is invalid error while integrating react-stripe-elements to a project (in this step)

Dependencies used:
[email protected]
[email protected]
[email protected]

fragment of the relevant code:

const store = rehydrate();

const renderApp = Component => {
	render(
		<AppContainer>
			<StripeProvider apiKey="[key_hidden]">
				<Router>
					<Provider store={isProduction ? store : hotRehydrate()}>
						<App />
					</Provider>
				</Router>
			</StripeProvider>
		</AppContainer>,
		document.getElementById("root")
	);
};

renderApp(App);

if (module.hot) {
	module.hot.accept(() => renderApp(App));
}

full error details:

warning.js:36 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
printWarning @ warning.js:36
warning @ warning.js:60
createElement @ ReactElementValidator.js:171
patchedCreateElement @ patch.dev.js:164
renderApp @ index.js:39
(anonymous) @ index.js:55
./src/index.js @ app.e2c0fc4dfb8973baf072.js:7439
__webpack_require__ @ app.e2c0fc4dfb8973baf072.js:687
fn @ app.e2c0fc4dfb8973baf072.js:110
(anonymous) @ client:8
0 @ app.e2c0fc4dfb8973baf072.js:7486
__webpack_require__ @ app.e2c0fc4dfb8973baf072.js:687
(anonymous) @ app.e2c0fc4dfb8973baf072.js:787
(anonymous) @ app.e2c0fc4dfb8973baf072.js:790
ReactCompositeComponent.js:327 Uncaught TypeError: Cannot read property 'unmountComponent' of null
    at ReactCompositeComponentWrapper.performInitialMountWithErrorHandling (ReactCompositeComponent.js:327)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:256)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at mountComponentIntoNode (ReactMount.js:104)
    at ReactReconcileTransaction.perform (Transaction.js:140)
    at batchedMountComponentIntoNode (ReactMount.js:126)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)

I have a basic setup like it is documented, when I call the createToken method, I get this error:

Uncaught Error: You did not specify the type of Source or Token to create. We could not infer which Element you want to use for this operation.

Would appreciate any ideas on how I could tackle this issue.

This library adds quite a bit of overhead to a react app - but I do still want to use Stripe directly in React app. Documentation on stripe.com is not clear and refers a lot to various css styling issues to create a 'card' before creating a token.

In other words, I'd like something like the following:

1. npm install stripe --save
2. import stripe;
3. stripe(mykey).createToken({cc:ccVal,exp:expVal,cvc:cvcVal}).then(...)

how do I do this? (without reverting to stripe v2)

We're preventing form submission with ev.preventDefault(); to not refresh the page before we get the token from Stripe.

I'm stumbling a bit on how to subsequently (programmatically?) submit the form to our server with all values (including the token) after the Stripe response?

The icon is only displayed with the CardElement, but it would be nice to have it on the CardNumberElement (maybe by passing some prop to it)

Hi there;

I'm using this component to create source for cards.

Could I use the injectStripe to get configured Stripe and create source for SEPA Debits ?

Right now; I'm getting the following error :

You did not specify the type of Source or Token to create.
We could not infer which Element you want to use for this operation.

Server side rendering throw error

I tried to extract data from the form by accessing the change object inside a handleChange function but only value that is available is the zip code.

Am I doing something wrong? how should I extract Card number and other inputs from CardElement?

Maybe it's just a documentation issue, but there doesn't seem to be a generalized way of adding and error messages on the page when using multiple *Element components. Errors are definitely coming back to onChange, but there doesn't seem to be a good way of determining which field on the page generated the error.

Generally I like to display the error message with the associated field, instead of just having a block of error messages at the top of the form. I would like a relatively straightforward to determine which field to attach an error to.

Hi team;

I'm using React with Redux; I'm used to separate component and container.
I think this component is too complicated to use.

What I was expected was very simple :

<StripeSourceElement onSourceCreated={::this.handleSourceCreated} publicKey="pk_test" type="card" />
<StripeTokenElement onTokenCreated={::this.handleTokenCreated} publicKey="pk_test" type="card"/>

Regards.

I'm a bit confused about how to work with the arguments in stripe.createToken.

I can see in the source code that createToken is a bit strange for legacy reasons, and I'd love it if we could perhaps shed a bit more light on that.

For context, here is the signature

createToken: (
  type: string | ElementShape,
  options: mixed
) => Promise<{token?: MixedObject, error?: MixedObject}>

What string values are applicable to type? The README example shows 'card', I assume this is because the example is using the CardElement component. So if I were to be using individual *Element components, what type would I specify? cardNumber perhaps? Is this what is being set implicitly if I pass in no arguments?

I think most of my confusion is surrounding the disparities between this function's API and the official documentation. Seems like the point of my confusion has been mentioned before, but didn't seem to result in a discussion.

Just curious about the best way to make use of createToken without it feeling like a blackbox (i.e. no arguments).

Hello!

When using CardElement in a form that contains also other input fields unrelated to Stripe, if I insert an invalid card number and then try to click another input field the cursor is always brought back to the CardElement input field.
If the card number is empty or valid this doesn't happen. How is that? Thanks :)

PS: I'm using redux-form

I'm using this library within the UK, so the zip code field's not required

https://github.com/stripe/react-stripe-elements/blob/master/src/components/inject.js#L79

I am trying to pass additional information of the card like name , address as mentioned here, https://stripe.com/docs/stripe.js#stripe-create-token

this.props.stripe.createToken({
	name: 'Name',
	address_line1: 'Address 1',
	address_line2: 'Address 2'
	address_city: 'Address C'
	address_state: 'Address S'
	address_zip: 'Address Z'
	address_country: 'Address C',

}).then(({token}) => {
    console.log('Received Stripe token:', token);
});

When I try to retrieve the card information with the token generated, the extra options weren't set. What could be the issue?

I've seen closed PR #14 and want to express interest in adding styles via className

I'm testing the waters with these elements in an SSR app and have not been successful applying styles the old fashioned way

Essentially, when trying to reference a component that is wrapped by the the injectStripe HOC, I can't access any of it's. I created a codepen to illustrate the problem:

https://codepen.io/sciku1/pen/oemNEg

Is there any way to get around this? Thanks.

I want to use a setup like this:

<StripeProvider>
  <App>
    <Elements>
       <CheckoutForm1 />
    </Elements>
    <Elements>
       <CheckoutForm2 />
    </Elements>
  </App>
</StripeProvide>

I basically want to have two independent forms mounted and used at the same time. The error I get is the following:

You did not specify the type of Source or Token to create. We could not infer which Element you want to use for this operation.

Is this setup technically possible, where could this error come from?

Is the split form elements supposed to send a get request for each character written?
Eg:
https://q.stripe.com/?event=elements.sibling_update&event_count=124&timestamp=1499856761328&frame_width=0&version=f7b9dfd&options-__privateSiblingValues-postalCode=42424&element=cardCvc&features-noop=true&features-12345_postal_placeholder_split_fields=true&key=pk_RXwtgk4Z5VR82S94vtwmam6P8qMXQ&referrer=http%3A%2F%2Flocalhost%3A8080%2F&stripe_js_id=327c3b64-6dfa-4b17-838b-b6e72b1f7cb5

It looks like it sends the current field being entered

Is there a way to update existing card details using this library?

I'm trying to create a simple checkout form with a <CardElement>, like in the Readme example. However, after I make the call to stripe.createToken, I never get a response.

My main component is wrapped with <StripeProvider>:

      <StripeProvider apiKey={process.env.REACT_APP_STRIPE_KEY}>
        <div className="app">
           ....
        </div>
      </StripeProvider>

My form is wrapped with <Elements>:

  render() {
    return (
        <Elements>
          <Form />
        </Elements>
    )
  }

and I inject the HOC and make the stripe call in my handleSubmit:

/Form.js
class Form extends Component {

  handleSubmit = () => {
    console.log("trying to get stripe token");  // This prints
    const { form, stripe, } = this.props

    console.log(stripe);  // This shows the stripe object (so I know it's being injected)
    stripe.createToken({name: form.card_name.value})
    .then(({token}) => {
      console.log('Received Stripe token:', token);  // This never prints
    })
    .catch((e) => {
      console.log('got error', e);  // Nor does this
    });
  }


  render() {
    ...
    return (
      <div>
        ...
        <BillingSection />
        ...
      </div>
    )
}
export default injectStripe(withRouter(connect(mapStateToProps)(Form)))

Lastly, inside <BillingSection>, I render the card element:

  render() {
    ...
    return (
          <label>
            Card details
            <CardElement style={cardStyle} />
          </label>
    )
}

As you can see from this code, the submit gets called properly, and stripe is loaded correctly, but neither the .then or .catch blocks get called. What's going on here? Is the call being made at all, and if so, why are there no error messages that trigger the .catch block?

Edit:
I noticed in the Stripe control panel that no new customer accounts are being created. So this call never even makes it to Stripe?

I've had multiple reports (with screenshots) from users of CardElement not rendering (just never appears) on Safari (one of them Version 10.1.1 (11603.2.5)). There were no errors in the console. The problem did not persist after a refresh, and I was not able to reproduce it.

I know this is not a terribly helpful bug report, but I thought you should know that I have seen this happen.

Trying to implement this into my react app the input from the cardElement is all squished together, is that how it comes out of the box? Do I need to apply extra styling from the get go to get it to appear correctly? Thanks.