use-checkout

A React hook to be able to easily use Stripe's new (currently in beta) checkout

A tiny React hook that makes it easy to setup Stripe's new Checkout in your React app. If you use this hook multiple times it will only ever create one Stripe instance

If your building an ecommerce site this hook pairs very nicely with the use-cart

Installation

Note: please ensure you install versions >= 16.8.0 for both react and react-dom, as this library depends on the new hooks feature

NPM

npm i use-checkout --save

Yarn

yarn add use-checkout

Quick Start

import useCheckout from "use-checkout"

// Items for checkout
const items = [{ sku: "SKU_1", quantity: 1 }, { sku: "SKU_2", quantity: 3 }]
const succesUrl = "https://my-website.com/success-url"
const cancelUrl = "https://my-website.com/cancel-url"

const App = () => (
  <div>
    <button onClick={() => useCheckout({ items, successUrl, cancelUrl })}>
      Go to checkout
    </button>
  </div>
)

Examples

• Basic
• with use-cart

API

useCheckout(publicKey)

The hook that sets up the Stripe instance, you must provide

Arguments

publicKey (String): Your Stripe Public Key, which can be found in the API keys page under the Developers menu item in the Dashboard

Returns

Object containing:

• redirectToCheckout(options): Function - redirects to the Stripe Checkout with all the options passed through

Detailed API from useCheckout object

redirectToCheckout(options)

This method calls the stripe.redirectToCheckout function and passes along all the options to the function - see here for available options for Stripe Checkout

Arguments

options (Object): an object containing the options used in the stripe.redirectToCheckout() function

MIT License.