Introducing React Components for Recurly
Recurly now supports a React interface for Recurly.js. React has enabled teams to build dynamic UIs quickly and effectively, and has proven itself time and time again in demanding systems. We are excited to provide official support for React, enabling you to fit it into your customer experiences seamlessly. With Recurly.js and react-recurly, you’ll now be able to create secure payment fields with declarative expressions and apply configurations, styles, and event handlers to them using common React patterns. If you aren’t using React in your application, you can use Recurly Elements instead. Take a look at our recent blog post to learn more.
While it may have been possible for you to use Recurly.js with React applications previously, the development experience would have been less than optimal, potentially requiring various workarounds and the need to manipulate the DOM directly, thus bypassing the benefits of the virtual DOM.
But today, all that changes for the better.
For most React users, the benefits of the library are incontrovertible:
- fast browser-rendering via reconciliation
- the ability to leverage reusable and composable components,
- access to virtual DOM abstractions
- the ability to describe interfaces and their associated state in a declarative fashion
- the ability to leverage reactive updates to component state changes
From a more personal and anecdotal perspective, at Recurly we’ve heard consistent feedback from customers, prospects, and partners that they use React and that having official support for it would greatly improve their development experience. It’s also worth mentioning that we also use React to build Recurly! Our Admin UI uses it as one of the key components of the technology stack.
A quick tour
Let’s take a closer look. Usage of our React interface starts by importing several core components from the react-recurly library:
The Recurly.js instance itself is instantiated by declaring a new `RecurlyProvider’ and passing in your Recurly.js public API key as a prop. Various Elements can then be declared as children within an Elements component. Elements nested under the `RecurlyProvider’ have access to anything within its scope.
As for the Elements themselves, you have the ability to create a combined card field with the `CardElement’ component:
or individual fields using `CardNumberElement’, `CardCvvElement’, etc.
Recurly’s element components can be styled by passing a style prop to them. Changing that prop during the lifecycle of the component will trigger the element to update itself with the new style.
Event handlers are also configured via the props on the component itself.