how to add Stripe CardElement and get Token in the project

Mappy Show answered on July 27, 2022 Popularity 6/10 Helpfulness 1/10

answer how to add Stripe CardElement and get Token in the project

how to add Stripe CardElement and get Token in the project

Comment

// open clientside:
> npm install --save @stripe/react-stripe-js @stripe/stripe-js
> npm i @types/react-stripe-elements

// go to Routing details of your project, such as "App.tsx"
import env from "react-dotenv";
const stripeAPI_key = `${env.STRIPE_PUBLISHABLE_KEY}`;
// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe(stripeAPI_key);

    <Elements stripe={stripePromise}>
      <Router>
        <Layout id="app">
          {logInErrorBannerElement}
          <Affix offsetTop={0} className="app__affix-header">
            <AppHeader viewer={viewer} setViewer={setViewer} />
          </Affix>
          <Routes>
            <Route
              path="/listing/:listingId"
              element={<Listing viewer={viewer} />}
            />
        </Layout>
      </Router>
    </Elements>
	
// go to mentioned component that after routing in above:
import {
  CardElement,
  useStripe,
  useElements,
} from '@stripe/react-stripe-js';

  const stripe = useStripe();
  const elements = useElements();

  const handleCreateBooking = async (event: any) => {
// We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js has not yet loaded.
      // Make  sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const card = elements.getElement(CardElement)!;
    const result = await stripe.createToken(card);

    if (result.error) {
      // Show error to your customer.
      console.log(result.error.message);
    } else {
      // Send the token to your server.
      // This function does not exist yet; we will define it in the next step.
      // stripeTokenHandler(result.token);
    }
  };

return (
        <div className="listing-booking-modal__stripe-card-section">
          <CardElement id="card-element" className="listing-booking-modal__stripe-card" options={{hidePostalCode: true}}/>
          <Button
            size="large"
            type="primary"
            className="listing-booking-modal__cta"
            onClick={handleCreateBooking}
          >
            Book
          </Button>
        </div>
)

Popularity 6/10 Helpfulness 1/10 Language typescript

Source: github.com

Tags: add get project token typescript

Link to this answer
Share Copy Link

Contributed on Jul 27 2022

Mappy Show

0 Answers Avg Quality 2/10

how to add Stripe CardElement and get Token in the project

Contents

More Related Answers

how to add Stripe CardElement and get Token in the project

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.