import Stripe from 'stripe'

const stripe = new Stripe(process.env.STRIPE_API_KEY, {
      apiVersion: '2020-08-27',
    })

/**
  * StripeのCustomer IDからカスタマーポータルへのURLを発行する
  **/
export const getCustomerPortalURL = async (customerId: string) => {
    const result = await stripe.billingPortal.sessions.create({ customer: customerId })
    return result.url
}

<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>

<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
  style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
  id="checkout-button-price_1HrFReDOP6RCnWSqZCOEeNr2"
  role="link"
  type="button"
>
  Checkout
</button>

<div id="error-message"></div>

<script>
(function() {
  var stripe = Stripe('pk_test_xxxxxxxxxxx');

  var checkoutButton = document.getElementById('checkout-button-price_1HrFReDOP6RCnWSqZCOEeNr2');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      lineItems: [{price: 'price_xxxxxxxx', quantity: 1}],
      mode: 'subscription',
      // Do not rely on the redirect to the successUrl for fulfilling
      // purchases, customers may not always reach the success_url after
      // a successful payment.
      // Instead use one of the strategies described in
      // https://stripe.com/docs/payments/checkout/fulfill-orders
      successUrl: 'https://www.example.com/success',
      cancelUrl: 'https://www.example.com/canceled',
    })
    .then(function (result) {
      if (result.error) {
        // If `redirectToCheckout` fails due to a browser or network
        // error, display the localized error message to your customer.
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
  });
})();
</script>

    stripe.redirectToCheckout({
      // Do not rely on the redirect to the successUrl for fulfilling
      // purchases, customers may not always reach the success_url after
      // a successful payment.
      // Instead use one of the strategies described in
      // https://stripe.com/docs/payments/checkout/fulfill-orders
      successUrl: 'https://www.example.com/success',
...

    stripe.redirectToCheckout({
      // Do not rely on the redirect to the successUrl for fulfilling
      // purchases, customers may not always reach the success_url after
      // a successful payment.
      // Instead use one of the strategies described in
      // https://stripe.com/docs/payments/checkout/fulfill-orders
      successUrl: 'https://www.example.com/success?session_id={CHECKOUT_SESSION_ID}',
...

const urlParams = new URLSearchParams(window.location.search);
  const sessionId = urlParams.get('session_id');

/**
  * Session IDからStripe Customerのデータを引き出す
  **/
export const getStripeCustomerBySessionId = async (sessionId: string) => {
    const session = await stripe.checkout.sessions.retrieve(sessionId);
    if (!session || !session.customer) throw new Error('No such customer');
    const customerId =
      typeof session.customer === 'string'
        ? session.customer
        : session.customer.id;
    const customer = await this.stripe.customers.retrieve(customerId);
    return customer
}

    stripe.redirectToCheckout({
        clientReferenceId: YourApplicationUsername,
...

/**
  * StripeのWebhookイベントオブジェクトからSession IDを取得する
  **/
const getSessionIdFromRequest = (event) => [
  if ("type" !== "checkout.session.completed") return null;
  return event.data.object.id
}

// リクエストbody
const payload = request.body

// リクエストHeaderから、stripe-signatureを取得する
const sig = request.headers['stripe-signature']

// Dashboardで発行した署名シークレット
const endpointSecret = 'whsec_...'

  try {
    // 正しいリクエストかを検証する
    const event = stripe.webhooks.constructEvent(payload, sig, endpointSecret);
   ...
  } catch (err) {
    throw new Error(`Webhook Error: ${err.message}`);
  }

export const listAllPrices = async () => {
    const { data: products } = await stripe.products.list()
    const productsWithPrices = await Promise.all(products.map(async product => {
        const { data: prices } = await StripeJSProvider.prices.list({
            product: typeof product === 'string' ? product : product.id,
        })
        return {
            name: product.name,
            description: product.description,
            images: product.images,
            prices: prices.map(price => ({
                id: price.id,
                nickname: price.nickname,
                unit_amount: price.unit_amount,
            }))
        }
    }))
    return productsWithPrices
}

import { loadStripe, Stripe } from '@stripe/stripe-js';
const Products: FC<{products: any[]}> = ({products}) => {
    return (
     <>
       {products.map(product => {
           return (
            <Fragment key={product.id}>
              {product.prices.map((price) => (
                <Price key={price.id} price={price} product={product} />
              ))}
            </Fragment>
            )
       })}
     </>
    )
}

const Price: FC<{product: any; price: any}> = ({product, price}) => {
    const handleBuy = useCallback(() => {
        loadStripe('pk_test_xxxx')
            .then(stripe => {
                return stripe.redirectToCheckout({
                    lineItems: [{
                        price: price.id,
                        quantity: 1
                    }],
                    mode: 'subscription',
                    successUrl: 'http://localhost:4200/success/?session_id={CHECKOUT_SESSION_ID}',
                    cancelUrl: 'http://localhost:4200/'
                })
            })
    }, [])
    return (
        <div>
            <p>{price.nickname} - {product.name}</p>
            <button onClick={handleBuy}>Buy</button>
        </div>
    )
}