Implement provide/inject & use vite v6

[softbeehive]

Breaking changes

• added "type": "module"
• removed commonjs export
• new types

Features

Payment Element by default

As Stripe evolves, now Payment is the recommended flow. It used to be Card. To let you upgrade without breaking the code: payment for new starters, card for legacy.

• For starters

// This means Payment

<StripeElements>
  <StripeElement type="payment" />
</StripeElements>

• Upgrade to v2.0.0 seamlessly

// This still means Card

<StripeElements v-slot="{ elements, instance }">
  <StripeElement />
</StripeElements>

Better examples

• Payment
• Card
• Express Checkout
• Legacy Card

Fixes

Added missing event listeners for

• loaderror
• loaderstart

Screenshot

[softbeehive]

Hey folks 👋
this is Vue equivalent of react-stripe-js

I'm preparing a new major version but this typescript overload issue has been a blocker. I'm trying to type a generic function that creates Stripe Element using @stripe/stripe-js

Overloads of elements.create() are so specific I'm having hard time.

• tried StripeElementType (union)
• tried mapping element types and options StripeElementOptionsMap
• tried generics

I'd like to avoid maintaining such map types, because stripe-js as a better source of truth for these types.

How do you recommend typing functions with such specific overloads?
@pololi-stripe
@bdaily-stripe
@alexlande-stripe

[softbeehive]

Example using generics, trying to narrow down elementType and options

export type StripeElementOptionsMap = {
  address: StripeAddressElementOptions
  affirmMessage: StripeAffirmMessageElementOptions
  afterpayClearpayMessage: StripeAfterpayClearpayMessageElementOptions
  auBankAccount: StripeAuBankAccountElementOptions
  card: StripeCardElementOptions
  cardCvc: StripeCardCvcElementOptions
  cardExpiry: StripeCardExpiryElementOptions
  ...
}

export const createElement = <T extends keyof StripeElementOptionsMap>(
  elements: StripeElements,
  elementType: T,
  options?: StripeElementOptionsMap[T],
) => {
  try {
    if (!elements) {
      throw new Error(ERRORS.ELEMENTS_NOT_DEFINED)
    }
    if (!elementType) {
      throw new Error(ERRORS.ELEMENT_TYPE_NOT_DEFINED)
    }
    const element = elements.create(elementType, options)
    return element
  } catch (error) {
    console.error(error)
  }
}