checkout.jsx

import React from 'react';
import { StripeProvider, Elements, injectStripe } from 'react-stripe-elements';

// Replace with your public key (https://dashboard.stripe.com/test/apikeys)
const STRIPE_API_KEY = 'pk_test_xxx';

const Checkout = props => {
  const handleCheckout = () => {
    props.stripe.redirectToCheckout({
      items: [{ sku: props.skuId, quantity: 1 }],
      // Replace with your redirect URLs
      successUrl: 'http://localhost:3000/success',
      cancelUrl: 'http://localhost:3000/cancel'
    });
  };

  return <button onClick={handleCheckout}>Checkout</button>;
};

const StripeCheckout = injectStripe(Checkout);

const App = () => {
  // Fetch dynamically (see "Create a product")
  const skuId = 'sku_xxx';

  return (
    <StripeProvider apiKey={STRIPE_API_KEY}>
      <Elements>
        <StripeCheckout skuId={skuId} />
      </Elements>
    </StripeProvider>
  );
};

export default App;