Stripe V3 RedirectToCheckout 定义

Question

I am trying to execute a client side only Stripe checkout in my Angular 8 project. I've installed the @type/stripe-v3 file, but the definition for StripeClientCheckoutOptions is different compared to all of the documentation on Stripe's site ( https://stripe.com/docs/js/checkout/redirect_to_checkout ). Specifically the typed library is missing "lineItems" and "mode" which is causing errors in my Angular project on build when I take the generated checkout snippet. Is this just a case of not up to date type library?

Answer 1

Is this just a case of not up to date type library?

Yes, the DefinitelyTyped type definitions for Stripe.js do look to be out of date, as you can see here:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/stripe-v3/index.d.ts#L124-L132

As a temporary measure you can use @ts-ignore and the code should compile and run fine. But, a better longer-term solution would be to use Stripe's new npm module for loading Stripe.js which includes type definitions of its own:

https://github.com/stripe/stripe-js

The type definitions for redirectToCheckout in @stripe/stripe-js are up to date, and will continue to be since the library is maintained by Stripe:

https://github.com/stripe/stripe-js/blob/master/types/stripe-js/checkout.d.ts

If you use @stripe/stripe-js you don't have to include the Stripe.js <script> tag in your HTML anymore. All you need to do is import the module, and call the loadStripe function:

import {loadStripe} from '@stripe/stripe-js';

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

This will include Stripe.js, and produce a stripe instance with all the latest types. The library also handles server side rendering environments gracefully without any additional configuration.