npmpackage.info

Gathering detailed insights and metrics for @recurly/react-recurly

Other packages similar to @recurly/react-recurly

react-recurly-modal

1.0.2

[![forthebadge](https://forthebadge.com/images/badges/its-not-a-lie-if-you-believe-it.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)

Gathering detailed insights and metrics for @recurly/react-recurly

@recurly/react-recurly - 2.0.1 | npmpackage.info

@recurly/react-recurly

React components for Recurly.js

2.0.1

MIT

JavaScript

80.10 kB

Installations

npm install @recurly/react-recurly

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

20.5.0

NPM Version

9.8.0 Pull Requests

Open

0

Total

186

Closed

32

Merged

154

Issues

Open

12

Total

53

Closed

41

Releases

v2.0.2

Updated on Jan 30, 2025

2.0.1

v2.0.1

Updated on Oct 12, 2023

2.0.0

v2.0.0

Updated on Aug 23, 2023

1.2.7

v1.2.7

Updated on Nov 30, 2022

1.2.6

v1.2.6

Updated on Oct 27, 2022

1.2.4

v1.2.4

Updated on Feb 05, 2021

View All 16 releases

Languages

JavaScript

TypeScript

Makefile

Shell

Dockerfile

JavaScript (84.8%)

TypeScript (10.71%)

Makefile (2.07%)

Shell (1.99%)

Dockerfile (0.42%)

Developer

recurly

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

38 Stars

341 Commits

18 Forks

31 Watchers

3 Branches

149 Contributors

Updated on Jan 30, 2025

Maintainers

View All 149 Contributors

Package Meta Information

Latest Version

2.0.1

Package Id

@recurly/react-recurly@2.0.1

Unpacked Size

80.10 kB

Size

16.89 kB

File Count

NPM Version

9.8.0

Node Version

20.5.0

Published on

Oct 12, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

react-recurly ·

React components for Recurly.js

Documentation

Documentation & Reference

Recurly.js Documentation

Examples

Interactive Demo

A great way to get started is to try the interactive demo in our documentation, and look through the demo source on GitHub.

Installation

Install this package with npm

1npm install @recurly/react-recurly

Then, include recurly.js in your application via our CDN.

1<script src="https://js.recurly.com/v4/recurly.js"></script>
2<!-- optional: include recurly.css -->
3<link rel="stylesheet" href="https://js.recurly.com/v4/recurly.css">

Implementation Guide

In this guide, we will cover the steps necessary to create a payment form that will submit your user's payment information to Recurly.

ℹ️ If you haven't yet, please review the Recurly.js documentation. This will give you a solid understanding of the total capabilities of the library before we begin implementing some of its features in React.

To start, we will use the <RecurlyProvider /> component to set our public key.

1// app.js
2import React from 'react';
3import { RecurlyProvider } from '@recurly/react-recurly';
4
5function App () {
6  return (
7    <RecurlyProvider publicKey="MY_PUBLIC_KEY" />
8  );
9}

Now we can set up our payment form. For this, we will use Recurly.js Elements. First, we will use the <Elements /> component to group our Elements together. We'll also create a <MyPaymentForm /> component to contain our payment form.

1// app.js
2import React from 'react';
3import { RecurlyProvider, Elements } from '@recurly/react-recurly';
4import { MyPaymentForm } from './my-payment-form';
5
6function App () {
7  return (
8    <RecurlyProvider publicKey="MY_PUBLIC_KEY">
9      <Elements>
10        <MyPaymentForm />
11      </Elements>
12    </RecurlyProvider>
13  );
14}

Within our new <MyPaymentForm /> component, we'll add a <CardElement /> which will render a secure card element. We'll also add inputs for our users' name. To let react-recurly know that we want to use these fields, we'll use a data-recurly attribute. To include additional properties, see this billing fields table.

1// my-payment-form.js
2import React from 'react';
3import { CardElement } from '@recurly/react-recurly';
4
5export function MyPaymentForm (props) {
6  return (
7    <form>
8      <input type="text" data-recurly="first_name" placeholder="First name" />
9      <input type="text" data-recurly="last_name" placeholder="Last name" />
10      <CardElement />
11    </form>
12  );
13}

We are now ready to add the final step: getting a token. When our users submit our form, we want to send their payment information to Recurly, which will return a token. We'll then keep this token to use in the Recurly API.

To accomplish this, we will use the useRecurly hook. This hook returns a Recurly.js instance, on which we will call recurly.token. Since this function expects a <form>, we will create a React ref to pass to it.

1// my-payment-form.js
2import React from 'react';
3import { CardElement, useRecurly } from '@recurly/react-recurly';
4
5export function MyPaymentForm (props) {
6  const formRef = React.useRef();
7  const recurly = useRecurly();
8
9  function handleSubmit (event) {
10    event.preventDefault();
11    recurly.token(formRef.current, (err, token) => {
12      if (err) {
13        // handle error
14      } else {
15        // save the token.id, and submit it to the Recurly API from your server
16      }
17    });
18  }
19
20  return (
21    <form onSubmit={handleSubmit} ref={formRef}>
22      <input type="text" data-recurly="first_name" placeholder="First name" />
23      <input type="text" data-recurly="last_name" placeholder="Last name" />
24      <CardElement />
25    </form>
26  );
27}

With that, we have implemented the essential components of a payment form using react-recurly. The tokens generated above may be used on any billing_info object in the Recurly API.

Additional Usage

React-recurly also includes a useCheckoutPricing hook for generating a pricing preview before checking out.

1import { useCheckoutPricing, RecurlyProvider } from '@recurly/react-recurly';
2
3function PricingPreview () {
4  const initialPricingInput = {
5    subscriptions: [
6      {
7        plan: 'my-plan'
8      }
9    ]
10  };
11
12  const [{ price, loading }, setCheckoutPricing] = useCheckoutPricing(initialPricingInput);
13
14  if (!loading) {
15    return <div>{price.now.subtotal}</div>
16  };
17};
18
19export default function MyApp () {
20  <RecurlyProvider>
21    <PricingPreview />
22  </RecurlyProvider>
23};

For more details, see the useCheckoutPricing Documentation.

Additional resources

Documentation & Reference
Recurly.js Documentation
Interactive Demo
Code on GitHub
Package on npm
Recurly API Documentation
Questions? GitHub issues and Recurly support are here for you.

Licence

MIT

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

7

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

7

SAST

Determines if the project uses static code analysis.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/recurly/react-recurly/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/recurly/react-recurly/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/recurly/react-recurly/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/recurly/react-recurly/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/recurly/react-recurly/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/recurly/react-recurly/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/recurly/react-recurly/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/recurly/react-recurly/docs.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/recurly/react-recurly/docs.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/docs.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/recurly/react-recurly/docs.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/eslint.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/recurly/react-recurly/eslint.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/eslint.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/recurly/react-recurly/eslint.yml/main?enable=pin
Warn: containerImage not pinned by hash: Dockerfile:1: pin your Docker image by updating node:18-alpine to node:18-alpine@sha256:8d6421d663b4c28fd3ebc498332f249011d118945588d0a35cb9bc4b8ca09d9e
Warn: npmCommand not pinned by hash: Dockerfile:8
Warn: npmCommand not pinned by hash: scripts/release:10
Info: 0 out of 9 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 3 third-party GitHubAction dependencies pinned
Info: 0 out of 1 containerImage dependencies pinned
Info: 0 out of 2 npmCommand dependencies pinned

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

55 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986 / GHSA-64vr-g452-qvp3
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-qxrj-hx23-xp82
Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m
Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7

Score

4

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @recurly/react-recurly

Other packages similar to @recurly/react-recurly

@recurly/react-recurly

Installations

Developer Guide

Yes

CommonJS

20.5.0

9.8.0

Pull Requests

0

186

32

154

Issues

12

53

41

Releases

Languages

Developer

recurly

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-recurly ·

Documentation

Examples

Installation

Implementation Guide

Additional Usage

Additional resources

Licence

10

10

10

7

7

0

0

0

0

0

0

0

4

/10