@stripe/stripe-js#loadStripe JavaScript Examples

fetch('/config')
  .then((response) => response.json())
  .then((data) => {
    const stripePromise = loadStripe(data.publishableKey);

    ReactDOM.render(
      <React.StrictMode>
        <Elements stripe={stripePromise}>
          <App />
        </Elements>
      </React.StrictMode>,
      document.getElementById('root')
    );
  })
  .catch((error) => {
    console.error('Error:', error);
  });

constructor(props) {
    super();
    this.props = props;

    this.stripePromise = loadStripe(publicKey, {
      stripeAccount: this.props.platform.stripe
        ? this.props.platform.stripe.stripeUserId
        : null,
    });
  }

Checkout = ({ location }) => {
    const promise = loadStripe('pk_test_51HZH64Ftxr5x8qZUweU2PctrS7eRgFIRYYMjnZsiRTDLwQqd8yJ2bZxbFnxv3lD2AvwPx6vvpZkXKxTbJhWsKJhv00MpHObXp8');

    return (
        <Layout location={location}>
            <SEO title="Checkout" />
            <Elements stripe={promise}>
                <CheckoutForm />
            </Elements>
        </Layout>
    );
}

promise = loadStripe(process.env.REACT_APP_STRIPE_PK_KEY)

stripePromise = loadStripe(constants.STRIPE_KEY)

stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY)

stripePromise = loadStripe(pk)

stripePromise = loadStripe(STRIPE_PUBLISHABLE_KEY)

stripePromise = loadStripe("pk_test_KLSysmXwiDBAfXUzFYLUxwnw")

stripePromise = loadStripe("pk_test_KLSysmXwiDBAfXUzFYLUxwnw")

stripePromise = loadStripe("pk_test_KLSysmXwiDBAfXUzFYLUxwnw")

stripePromise = loadStripe("pk_test_KLSysmXwiDBAfXUzFYLUxwnw")

stripePromise = loadStripe("pk_test_KLSysmXwiDBAfXUzFYLUxwnw")

stripePromise = loadStripe("pk_test_KLSysmXwiDBAfXUzFYLUxwnw")

function App() {
	window.addEventListener('load', () => {
		function handleNetworkChange(event) {
			// delete this comment
			if (navigator.onLine) {
				document.getElementById('offline-notification').style.display = 'none';
			}
			else {
				document.getElementById('offline-notification').style.display = 'flex';
			}
		}
		window.addEventListener('online', handleNetworkChange);
		window.addEventListener('offline', handleNetworkChange);
	});

	//TODO: Create a useEffect to get the Stripe Account for store owner dynamicly
	const stripePromise = loadStripe('pk_test_VHc4fOD3byWy85jOWOYLijhH00OmL57YuX', {
		stripeAccount: 'acct_1H6LilIrVDEEa5AF'
	});
	return (
		<div>
			<Switch>
				<Elements stripe={stripePromise}>
					<PublicRoute path="/register" component={WrappedRegistrationForm} />
					{/* {Import WelcomeScreen} */}
					<PublicRoute path="/welcome" component={WelcomeScreenForm} />
					<PublicRoute path="/brandview" component={BrandView} />
					<PublicRoute path="/colorpicker" component={ColorPicker} />
					{/* Onboarding reformatted Above */}
					<PublicRoute path="/update" component={Update} />
					<PublicRoute exact path="/" component={LoginForm} />
					<PrivateRoute path="/inventory" component={Inventory} />
					{/* Profile View */}
					<PrivateRoute path="/profileview" component={ProfileView} />
					<PublicRoute path="/resetpassword" component={ResetPasswordForm} />
					<PublicRoute path="/setnewpassword" component={SetNewPasswordForm} />
					<PublicRoute path="/store/:id" component={StoreView} />

					<PublicRoute path="/cart" component={CartView} />
					<PrivateRoute path="/api/auth/stripe/token" component={StripeConfirmAccount} />
					<PublicRoute path="/savecart" component={SaveCartMain} />
					<PrivateRoute path="/createstore" component={CreateStoreForm} />
					<PrivateRoute path="/addlogo" component={AddLogoForm} />
					<PrivateRoute path="/createitem" component={CreateProductView} />
					<PrivateRoute path="/dashboard" component={Home} />
					<PrivateRoute path="/updateitem/:id" component={UpdateItem} />
					<PrivateRoute path="/order/:id" component={OrderDetailsView} />
					<PublicRoute path="/product/:id" component={Single} />

					<PublicRoute path="/success/:id" component={CheckoutSuccessView} />
					<PrivateRoute path="/account" component={Account} />
				</Elements>
			</Switch>
			<div
				id="offline-notification"
				style={{
					position: 'fixed',
					bottom: '0px',
					width: '100vw',
					height: '4vh',
					textAlign: 'center',
					backgroundColor: '#ff6663',
					justifyContent: 'space-around',
					alignItems: 'center',
					color: 'white',
					fontSize: 'medium',
					display: 'none'
				}}
			>
				Offline Mode
			</div>
		</div>
	);
}

stripePromise = loadStripe("pk_test_pdg00O8tdW99El1V9yrNQrRE00GeePoRWx")

function App() {
  const [config, setCOnfig] = useState();
  const [cart, setCart] = useState();
  const [status, setStatus] = useState();
  useEffect(() => {
    (async () => {
      // Fetch config object
      // const config = await fetch('/api/stripe/config').then(res => res.json());
      const config = {};
      config.stripePromise = loadStripe('pk_test_gTcHufxzRAofRn6BmYNsJWJ100KT6rF8fd');
      setCOnfig(config);
      // Fetch the products from the API.
      // const res = await fetch('/api/products').then(res => res.json());
      // const products = res.data;
      // const items = products.map(product => ({
      //   price: product.skus.data[0].price,
      //   quantity: randomQuantity(1, 2),
      //   type: 'sku',
      //   id: product.id,
      //   name: product.name,
      //   parent: product.skus.data[0].id,
      //   attributes: product.skus.data[0].attributes,
      // }));

      const items = [];
      const { paymentIntent } = await fetch('/api/payment_intents', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          currency: config.currency,
          items,
        }),
      }).then(res => res.json());
      setCart({
        currency: config.currency,
        items,
        total: items.reduce((sum, item) => sum + item.quantity * item.price, 0),
        paymentIntent,
        setStatus,
      });
    })();
  }, []);

  return (
    <Elements stripe={config?.stripePromise ?? null}>
      <main
        id="main"
        className={cart ? (status ? `checkout ${status.class}` : 'checkout') : 'loading'}
      >
        <Checkout config={config} cart={cart} />
        <PaymentResult message={status?.message} />
      </main>
      <Aside cart={cart} />
    </Elements>
  );
}

stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY)

stripePromise = loadStripe("pk_test_6pRNASCoBOKtIshFeQd4XMUh")

stripePromise = loadStripe(process.env.GATSBY_STRIPE_PUBLISHABLE_KEY)

stripePromise = loadStripe("pk_test_DvXwcKnVaaZUpWJIbh9cjgZr00IjIAjZAA")

stripePromise = loadStripe(stripeJson.stripeConfig.public_api_key)

stripePromise = loadStripe(process.env.PUB_KEY)

stripePromise = loadStripe(process.env.STRIPE_PUB_KEY)

stripePromise = loadStripe('pk_test_O.....')

stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLIC_KEY)

describe('Render Tests', () => {
	//Needed to repliate stripe
	const stripePromise = loadStripe('pk_test_VHc4fOD3byWy85jOWOYLijhH00OmL57YuX', {
		stripeAccount: 'acct_1H6LilIrVDEEa5AF'
	});

	const cartContents = [
		{
			images: [
				'https://res.cloudinary.com/dnsl4nbz4/image/upload/v1595381636/Products/gml8p0moezrwcwc1az0v.jpg',
				''
			],
			price: 100,
			productId: '5f1797a53e2aad0004e78a9e',
			productName: 'Cool Shirt',
			quantity: 1,
			variantDetails: [ { _id: '5f1797a53e2aad0004e78a9f', option: 'small', price: 100 } ]
		}
	];

	const store = {
		logo: 'https://res.cloudinary.com/dnsl4nbz4/image/upload/v1595295400/zqqf2ualihvj8xuohmgn.png',
		color: '#eb144c'
	};

	const totalPrice = (arr) => {
		return arr.reduce((sum, item) => {
			return sum + item.price * item.quantity;
		}, 0);
	};

	const paymentPayload = {
		price: 100,
		clientID: 'acct_1H7ALoISbGMo70op'
	};

	const orderPayload = {
		orderItem: [
			{
				product: '5f1797a53e2aad0004e78a9e',
				quantity: 1,
				chosenVariant: {
					price: 100
				}
			}
		]
	};

	const getStoreID = '5f1645a717a4730004f569c3';

	test('Render Test for CartView', () => {
		renderWithProviders(
			<Elements stripe={stripePromise}>
				<CartView />
			</Elements>
		);
	});

	test('Render test for CartTable', () => {
		<Elements stripe={stripePromise}>
			<CartTable />
		</Elements>;
	});

	test('Renders Table & Item', () => {
		const { getByTestId } = renderWithProviders(
			<Elements stripe={stripePromise}>
				<CartTable cartContents={cartContents} totalPrice={totalPrice} store={store} />
			</Elements>
		);
		expect(getByTestId('CartTable')).toHaveTextContent('Product');
		expect(getByTestId('productName')).toHaveTextContent('Cool Shirt');
		expect(getByTestId('price')).toHaveTextContent('$100');
	});

	test('Total Cost is Working', () => {
		const { getByTestId } = renderWithProviders(
			<Elements stripe={stripePromise}>
				<CartTable cartContents={cartContents} totalPrice={totalPrice} store={store} />
			</Elements>
		);
		expect(getByTestId('total')).toHaveTextContent('$100');
	});
});