@stripe/stripe-js#loadStripe TypeScript Examples

getStripe = () => {
  const key = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;
  if (!key) {
    return Promise.resolve(null);
  }
  if (!stripePromise) {
    stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
  }
  return stripePromise;
}

SepaPaymentContainer: React.FC = () => {
  const [loading, setLoading] = React.useState(true)
  const [stripeSetup, setStripeSetup] = React.useState<StripeSetup>()
  const [error, setError] = React.useState()

  const initializeStripe = React.useCallback(async () => {
    try {
      const [stripe, intent] = await Promise.all([
        loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY),
        postOwnerStripeIntent(),
      ])
      setStripeSetup({ stripe, intent: intent.id })
    } catch (e) {
      setError(e)
    } finally {
      setLoading(false)
    }
  }, [])

  React.useEffect(() => {
    initializeStripe()
  }, [initializeStripe])

  return (
    <>
      {loading && <Loading show />}
      {error && <div>{error}</div>}
      {stripeSetup && (
        <Elements stripe={stripeSetup.stripe}>
          <SepaPayment intent={stripeSetup.intent} />
        </Elements>
      )}
    </>
  )
}

stripePromise = loadStripe(STRIPE_API_KEY)

stripePromise = loadStripe(STRIPE_API_KEY)

stripePromise = loadStripe(STRIPE_KEY)

stripePromise = loadStripe(stripePk)

stripe = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY || ""
)

stripePromise = loadStripe(STRIPE_PUBLISH_KEY)

getStripe = () => {
  if (!stripePromise) {
    stripePromise = loadStripe(config.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
  }
  return stripePromise;
}

stripePromise = process.env.REACT_APP_STRIPE_PUBLIC_KEY
  ? loadStripe(process.env.REACT_APP_STRIPE_PUBLIC_KEY as string)
  : null

stripePromise = loadStripe(process.env.STRIPE_API_KEY || "")

getStripe = () => {
  if (!stripePromise) {
    stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);
  }
  return stripePromise;
}

ProfilePage: React.FC<WithOwnerProps> = ({ owner }) => {
  const { t } = usePageLocale('business/profile')

  const [redirecting, setRedirecting] = React.useState(false)
  const { data: companies } = useCompanies()
  const { query } = useRouter()
  const status = React.useMemo(() => {
    if (query.success?.toString() === 'true') return 'success'
  }, [query])

  const didOpenSuccessModal = React.useRef(false)
  const { modals, openModal } = useModals({
    checkoutSelection: CheckoutSelectionModal,
    success: SubscribedModal,
    editOwner: OwnerModal,
  })

  React.useEffect(() => {
    if (didOpenSuccessModal.current) return
    if (status === 'success') {
      didOpenSuccessModal.current = true
      openModal('success')
    }
  }, [status, openModal])

  const openStripeCheckout = React.useCallback(async () => {
    try {
      setRedirecting(true)
      const stripe = await loadStripe(
        process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
      )
      const checkout = await postOwnerCheckout()
      stripe.redirectToCheckout({ sessionId: checkout.id })
    } catch (error) {
      setRedirecting(false)
      console.error(error)
    }
  }, [])

  const openCheckout = () => {
    const props: CheckoutSelectionModalProps = {
      locales: {
        title: t('checkoutSelectionModalTitle'),
        stripeButtonText: t('checkoutSelectionModalStripeButtonText'),
        sepaDebitButtonText: t('checkoutSelectionModalSepaButtonText'),
      },
      openStripeCheckout,
    }

    openModal('checkoutSelection', props as any)
  }

  const openEditOwner = () => {
    const props: OwnerFormProps = {
      owner,
      locales: {
        nameLabel: t('nameLabel'),
        nameRequired: t('nameRequired'),
        phoneLabel: t('phoneLabel'),
        phoneInvalid: t('phoneInvalid'),
        phoneRequired: t('phoneRequired'),
        cityLabel: t('cityLabel'),
        cityRequired: t('cityRequired'),
        streetLabel: t('streetLabel'),
        streetRequired: t('streetRequired'),
        zipLabel: t('zipLabel'),
        zipRequired: t('zipRequired'),
        companyNameLabel: t('companyNameLabel'),
        companyNameRequired: t('companyNameRequired'),
        /**/
        editProfile: t('editProfile'),
        submitButton: t('ownerModalSubmitButton'),
      },
    }

    openModal('editOwner', props as any)
  }

  const openSelfService = React.useCallback(async () => {
    try {
      setRedirecting(true)
      const { url } = await postOwnerSubscription()
      window.location.href = url
    } catch (error) {
      setRedirecting(false)
      console.error(error)
    }
  }, [])

  const hasCompanies = React.useMemo(() => companies?.length > 0, [companies])
  const hasSubscription = React.useMemo(() => {
    const states = ['trialing', 'active', 'incomplete']
    const isSubscribed = states.includes(owner.stripeSubscriptionStatus)
    return isSubscribed || owner.canUseForFree
  }, [owner])

  return (
    <OwnerApp title={t('pageTitle')}>
      {modals}
      <Loading show={redirecting} />

      <Button
        onClick={() => openEditOwner()}
        right={<ArrowsRight color="green" />}
      >
        {t('editProfile')}
      </Button>

      <Divider />
      <Text as="h3" variant="h2">
        {t('myMembership')}
      </Text>
      <Box height={4} />
      {hasCompanies ? (
        <SubscriptionMessage owner={owner} />
      ) : (
        <Callout>
          <Text>{t('hasNoCompaniesMessage')}</Text>
        </Callout>
      )}
      <Box height={4} />

      {!hasSubscription && hasCompanies && (
        <>
          <Text>
            <PricingInfoDuringTest />
          </Text>
          <Box height={4} />

          {isHealthEnv || isCareEnv ? (
            <Text>
              <p>{t('writeEmailMessage')}</p>
              <p>
                <RecoverTeamEmailLink>
                  <Button right={<ArrowsRight color="pink" />}>
                    {t('writeEmailButtonText')}
                  </Button>
                </RecoverTeamEmailLink>
              </p>
            </Text>
          ) : (
            <Button
              onClick={() => openCheckout()}
              right={<ArrowsRight color="pink" />}
            >
              {t('upgradeNow')}
            </Button>
          )}
        </>
      )}

      {hasSubscription && !owner.canUseForFree && (
        <>
          <ActionList grid>
            <ActionCard onClick={() => openCheckout()}>
              <ActionCard.Main
                title={t('hasSubscriptionNotForFreeCardTitle1')}
                icon={Right}
              />
            </ActionCard>
          </ActionList>

          <Divider />

          <ActionList grid>
            <ActionCard onClick={openSelfService}>
              <ActionCard.Main
                title={t('hasSubscriptionNotForFreeCardTitle2')}
                icon={Right}
              />
            </ActionCard>
            <div />
          </ActionList>
          <Box height={4} />
          <Text variant="shy">{t('hasSubscriptionNotForFreeMessage')}</Text>
        </>
      )}

      <Box height={10} />
      <Text textAlign={['center', 'center', 'left']}>
        <Link href="/business/logout" passHref>
          <Text variant="h5" as="a" color="bluegrey.400">
            {t('logout')}
          </Text>
        </Link>
      </Text>
    </OwnerApp>
  )
}