npmpackage.info

@recurly/react-recurly

React components for Recurly.js

2.0.1

MIT

JavaScript

Installations

npm install @recurly/react-recurly

Pull Requests

Open

0

Total

186

Closed

32

Merged

154

Issues

Open

10

Total

51

Closed

41

Releases

2.0.1

v2.0.1

Published on 12 Oct 2023

2.0.0

v2.0.0

Published on 23 Aug 2023

1.2.7

v1.2.7

Published on 30 Nov 2022

1.2.6

v1.2.6

Published on 27 Oct 2022

1.2.4

v1.2.4

Published on 05 Feb 2021

1.2.3

v1.2.3

Published on 20 Nov 2020

View all 15 releases

Developer

recurly

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

20.5.0

NPM Version

9.8.0 Statistics

38 Stars

340 Commits

16 Forks

32 Watching

3 Branches

129 Contributors

Updated on 29 Oct 2024

Languages

JavaScript (84.8%)

TypeScript (10.71%)

Makefile (2.07%)

Shell (1.99%)

Dockerfile (0.42%)

Total Downloads

Cumulative downloads

Total Downloads

2,713,684

Last day

-15.4%

6,027

Compared to previous day

Last week

3.2%

33,959

Compared to previous week

Last month

18%

140,330

Compared to previous month

Last year

45%

1,064,453

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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.

8

Code-Review

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

8

SAST

Determines if the project uses static code analysis.

3

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:7e43a2d633d91e8655a6c0f45d2ed987aa4930f0792f6d9dd3bffc7496e44882
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.

Score

4.4

/10

Last Scanned on 2024-11-18

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

@recurly/react-recurly

Installations

Pull Requests

0

186

32

154

Issues

10

51

41

Releases

Developer

recurly

Developer Guide

CommonJS

Yes

20.5.0

9.8.0

Statistics

Languages

Total Downloads

2,713,684

Daily Downloads

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

8

8

3

0

0

0

0

0

0

4.4

/10