legacy-checkout.jsx

import request from 'superagent';
import React from 'react';
import StripeCheckout from 'react-stripe-checkout';

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

const createOrder = (skuId, customer) => {
  const { email, name, address } = customer;

  return request
    .post('/api/orders')
    .send({ skuId, email, name, address })
    .then(res => res.body.order);
};

const payForOrder = (orderId, token) => {
  return request
    .post(`/api/orders/${orderId}/pay`)
    .send({ token })
    .then(res => res.body.order);
};

const Checkout = props => {
  const handleSubmit = token => {
    const { skuId, email, name, address } = props;
    const { id: tokenId } = token;

    return createOrder(skuId, {
      email,
      name,
      address
    }).then(order => {
      const { id: orderId } = order;

      return payForOrder(orderId, tokenId);
    });
  };

  return (
    <StripeCheckout token={handleSubmit} stripeKey={STRIPE_API_KEY}>
      <button>Legacy Checkout</button>
    </StripeCheckout>
  );
};

const App = () => {
  // Fetch dynamically (see "Create a product")
  const skuId = 'sku_xxx';
  // Get from user input
  const email = '[email protected]';
  const name = 'Test User';
  const address = {
    line1: '123 Main Street',
    city: 'San Francisco',
    state: 'CA',
    postal_code: '94105',
    country: 'US'
  };

  return <Checkout skuId={skuId} email={email} name={name} address={address} />;
};

export default App;