react-stripe-elements adheres to
Semantic Versioning.
- Register package version with Stripe instance (#512)
Added the auBankAccount and fpxBank elements. These elements will not have
automatic Element detection/insertion. To use them you will need to use
elements.getElement and pass them directly to other Stripe.js methods (e.g.
stripe.confirmFpxPayment):
const FpxForm = injectStripe(({stripe, elements}) => {
const handleSubmit = async (event) => {
event.preventDefault();
const {error} = await stripe.confirmFpxPayment('{{CLIENT_SECRET}}', {
payment_method: {
fpx: elements.getElement('fpxBank'),
},
});
};
return (
<form onSubmit={handleSubmit}>
<FpxBankElement accountHolderType="individual" />
<button>Pay</button>
</form>
);
});Version bump that fixes some typos, no changes.
injectStripenow injects a reference to the Elements instance created by<Elements>as the propelements.
The primary reason you would want an Elements instance is to use
elements.getElement().
which provides an easy way to get a reference to an Element. You will need to
get a reference to an Element to use
confirmCardPayment,
confirmCardSetup(),
or
createPaymentMethod().
Note that the old API for createPaymentMethod will continue to work and
provide automatic element injection, but we are updating documentation and
examples to use the new argument shape:
// old shape with automatic element detection - still works
this.props.stripe.createPaymentMethod('card').then(/* ... */);
// new shape without automatic element detection - recommended and will work with new non-card PaymentMethods
this.props.stripe
.createPaymentMethod({
type: 'card',
card: this.props.elements.getElement('card'),
})
.then(/* ... */);- We have removed the
getElementmethod on RSE components that we introduced in v5.1.0 in favor of the above change. Sorry for the churn.
- Add support for accessing the underlying Element using refs via
getElement.
- Fix crash when trying to create element while unmounting. Thanks @CarsonF!
- Fixes a bug where calling
stripe.createPaymentMethodwould error in IE.
- React 16.9 compatibility.
- We replaced the internal use of deprecated
componentWillReceiveProps. This internal movement of logic between lifecycle methods is likely safe for almost all apps and should not require any changes.
- Fixes a bug where calling
stripe.handleCardPaymentwith only a client secret caused an error to be thrown.
-
Renamed
CardCVCElementtoCardCvcElementwhich better mirrors the Elements API. We will keep the old component name around as an alias until 5.0.0. -
Added support for
stripe.handleCardSetupstripe.handleCardSetup( clientSecret: string, data?: Object ): Promise<{error?: Object, setupIntent?: Object}>
For more information, please review the Stripe Docs:
CardCVCElementhas been renamed toCardCvcElement.CardCVCElementwill be removed in version 5.0.0.
-
If you were already using
handleCardSetupwithreact-stripe-elements, you should upgrade your integration. This method will now automatically find and use valid Elements.<CardElement ... onReady={this.handleReady} /> handleReady = (element) => { this.setState({cardElement: element}) ; }; const {setupIntent, error} = await this.props.stripe.handleCardSetup( intent.client_secret, this.state.cardElement, {} );
<CardElement />; const {setupIntent, error} = await this.props.stripe.handleCardSetup( intent.client_secret, {} );
-
added a changelog
-
added support for
stripe.handleCardPaymentandstripe.createPaymentMethod. These methods allow you to easily integrate Stripe's new Payment Intents API. LikecreateTokenandcreateSource, these new methods will automatically find and use a corresponding Element when they are called.stripe.createPaymentMethod( paymentMethodType: string, paymentMethodDetails: Object ): Promise<{error?: Object, paymentIntent?: Object}> stripe.handleCardPayment( clientSecret: string, data?: Object ): Promise<{error?: Object, paymentIntent?: Object}>
For more information, please review the Stripe Docs:
-
If you were already using
handleCardPaymentorcreatePaymentMethodwithreact-stripe-elements, you should upgrade your integration. These methods will now automatically find and use valid Elements.<CardElement ... onReady={this.handleReady} /> handleReady = (element) => { this.setState({cardElement: element}) ; }; let { paymentIntent, error } = await this.props.stripe.handleCardPayment( intent.client_secret, this.state.cardElement, {} );
<CardElement />; let {paymentIntent, error} = await this.props.stripe.handleCardPayment( intent.client_secret, {} );
-
Passing a beta flag to Stripe.js to use one of the PaymentIntents betas is not supported.
const stripe = window.Stripe( publicKey, {betas: ['payment_intent_beta_3']}, ); <StripeProvider stripe={stripe}> <YourCheckoutComponent> </StripeProvider>
<StripeProvider apiKey={publicKey}> <YourCheckoutComponent> </StripeProvider>
-
PostalCodeElementhas been removed. We suggest that you build your own postal code input.
- Fixes a bug where the elements.update event was triggered far too often, incorrectly, when an Element was repeatedly rendered with the same options.
- The Element higher-order component now reports a proper displayName, which is more useful for debugging. (Thanks @emilrose!)
- Support for the
IbanElementandIdealBankElement.
stripe.createSourcenow requires the Source type be passed in.- For example, if you previously called
stripe.createSource({ name: 'Jenny Rosen' }), you now must usestripe.createSource({ type: 'card', name: 'Jenny Rosen' }).
- For example, if you previously called
- elementRef is no longer a valid prop you can pass to an
<Element />. Use onReady instead to get a reference to the underlying Element instance.
createSourceautomatically infers the type of Source to create based on which Elements are in use. This behavior is now deprecated, and the Source type will be required in version 2.0.0.
- The elementRef callback is deprecated and will be removed in version 2.0.0. Use onReady instead, which is the exact same.
- The id prop from v1.5.0 was absent from the
PaymentRequestButtonElement. Now, thePaymentRequestButtonElementbehaves like all the other *Element components.
- (#177 / #178) The *Element classes learned a new id prop. This can be used to set the ID of the underlying DOM Element.
- Fixed a TODO in an error message emitted by Provider.js.
- Modify build pipeline to fix issues with IE9 and IE10.
- Fix split Element token creation for async codepath. (#148)
- Fixes a regression introduced by v1.3.0 (#146).
- Loading Stripe.js and react-stripe-elements asynchronously
- Rendering react-stripe-elements on the server
- Passing a custom stripe instance to
StripeProvider- For an overview of how this works, see the Advanced integrations section.
- Fixed a bug where using pure components under the
<Elements>component would lead to an error.
- The PaymentRequestButtonElement now accepts an onClick prop that maps to the
element.on('click')event.
- The instance of Stripe provided by StripeProvider is now consistent across StripeProvider usages across your application, as long as you're passing in the same API key & configuration.
- We've added a new component! You can now use
<PaymentRequestButtonElement />which wraps upelements.create('paymentRequestButton')in a React component.
- Update dependencies
- Improve test coverage
- Allow React 16 as peer dependency
- You can now pass the
withRefoption toinjectStripeto make the wrapped component instance available viagetWrappedInstance()
- Render *Element components with div instead of span (#61)
- You can now pass
classNameto<*Element>(e.g. and it will be passed down to the element container DOM element.
- Bugfix for collapsed Elements: #45 #48
- Same as v0.0.3 but fixed corrupted npm upload.
- Bug fixes for: #29, #40
Initial release! Support for:
- StripeProvider
- Elements
- injectStripe
- Individual elements:
- CardElement
- CardNumberElement
- CardExpiryElement
- CardCVCElement
- PostalCodeElement