Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@stripe/react-stripe-js

Package Overview
Dependencies
Maintainers
26
Versions
63
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@stripe/react-stripe-js

React components for Stripe.js and Stripe Elements

  • 1.6.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.2M
decreased by-15.77%
Maintainers
26
Weekly downloads
 
Created

What is @stripe/react-stripe-js?

The @stripe/react-stripe-js package is a React wrapper for Stripe.js. It provides a set of React components and hooks that make it easier to integrate Stripe's payment processing capabilities into a React application. With this package, developers can add Stripe Elements to their app, which are pre-built UI components that help you collect sensitive payment information securely.

What are @stripe/react-stripe-js's main functionalities?

Loading Stripe.js

This code demonstrates how to load Stripe.js using the loadStripe function and then use the Elements component to wrap your payment form. The Elements component provides a Stripe context to all other Stripe components.

import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';

const stripePromise = loadStripe('your_stripe_public_key');

function App() {
  return (
    <Elements stripe={stripePromise}>
      {/* Your checkout form */}
    </Elements>
  );
}

Creating a Card Element

This code shows how to use the CardElement component to create a form field for entering credit card information. It handles sensitive data without you having to deal with PCI compliance.

import { CardElement } from '@stripe/react-stripe-js';

function CardForm() {
  return (
    <CardElement />
  );
}

Using the useStripe and useElements hooks

This code sample illustrates how to use the useStripe and useElements hooks to create a payment form. The useStripe hook provides access to the Stripe object, and the useElements hook provides access to the Elements instance, which is used to safely collect payment information.

import { useStripe, useElements, CardElement } from '@stripe/react-stripe-js';

function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    event.preventDefault();
    const card = elements.getElement(CardElement);
    const result = await stripe.createToken(card);
    if (result.error) {
      console.log(result.error.message);
    } else {
      console.log(result.token);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button type='submit' disabled={!stripe}>Pay</button>
    </form>
  );
}

Other packages similar to @stripe/react-stripe-js

Keywords

FAQs

Package last updated on 05 Oct 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc