Breaking News: Grepper is joining You.com. Read the official announcement!

@stripe/react-stripe-js

Add Answer

Anas Zain answered on June 16, 2021 Popularity 10/10 Helpfulness 2/10

answer @stripe/react-stripe-js

related stripe ract js

related stripe react

@stripe/react-stripe-js

Comment

import React from 'react';
import ReactDOM from 'react-dom';
import {loadStripe} from '@stripe/stripe-js';
import {
  PaymentElement,
  Elements,
  ElementsConsumer,
} from '@stripe/react-stripe-js';

class CheckoutForm extends React.Component {
  handleSubmit = async (event) => {
    event.preventDefault();
    const {stripe, elements} = this.props;

    if (elements == null) {
      return;
    }

    // Trigger form validation and wallet collection
    const {error: submitError} = await elements.submit();
    if (submitError) {
      // Show error to your customer
      return;
    }

    // Create the PaymentIntent and obtain clientSecret
    const res = await fetch('/create-intent', {
      method: 'POST',
    });

    const {client_secret: clientSecret} = await res.json();

    const {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example, payment
      // details incomplete)
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  render() {
    const {stripe} = this.props;
    return (
      <form onSubmit={this.handleSubmit}>
        <PaymentElement />
        <button type="submit" disabled={!stripe}>
          Pay
        </button>
      </form>
    );
  }
}

const InjectedCheckoutForm = () => (
  <ElementsConsumer>
    {({stripe, elements}) => (
      <CheckoutForm stripe={stripe} elements={elements} />
    )}
  </ElementsConsumer>
);

const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  // Fully customizable with appearance API.
  appearance: {
    /*...*/
  },
};

const App = () => (
  <Elements stripe={stripePromise} options={options}>
    <InjectedCheckoutForm />
  </Elements>
);

ReactDOM.render(<App />, document.body);

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: www.npmjs.com

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Nov 21 2023

Anas Zain

0 Answers Avg Quality 2/10

Closely Related Answers

stripe ract js

Comment

npm install --save @stripe/react-stripe-js @stripe/stripe-js

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stripe.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 16 2021

Strange Spider

0 Answers Avg Quality 2/10

stripe react

Comment

// npm
npm install --save @stripe/react-stripe-js @stripe/stripe-js

// yarn
yarn add --save @stripe/react-stripe-js @stripe/stripe-js

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Nov 27 2022

Tough Tortoise

0 Answers Avg Quality 2/10

@stripe/react-stripe-js

Contents

More Related Answers

@stripe/react-stripe-js

Closely Related Answers

stripe ract js

stripe react

Grepper

Documentation

Social

Legal

Contact

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