Vue Stripe

Appearance

VueStripeIssuingDisclosure ​

Shows cardholders the legal disclosure of a Stripe Issuing card program: the text Stripe generates for your program, its public card program name and an optional link of yours. The component calls stripe.createIssuingDisclosure(options) and mounts the HTML element Stripe.js returns, so the wording always comes from Stripe. It is the Vue port of React Stripe.js 7's IssuingDisclosure.

ItemDetails
Stripe productStripe Issuing (cards your platform issues)
Stripe.js methodstripe.createIssuingDisclosure(), not in the Stripe.js 10.0.0 type definitions
Account requirementOnboarded to Issuing. Other accounts get invalid_request_error ("Unrecognized request URL (GET: /v1/disclosures/...)") through @error
Live demoNone: the demo account has not onboarded to Issuing
RelatedIssuing Elements display the card itself; Display issued card details

Not yet verified end to end

Vue Stripe's tests and dogfood runs use a Stripe account without Stripe Issuing. They confirm what happens without access, as described on this page, but not a complete flow with access. See what is not yet verified, and open an issue if something does not work for you.

Usage ​

Place the disclosure where a cardholder applies for or activates a card, next to the card program's terms:

vue
<template>
  <VueStripeProvider :publishable-key="publishableKey">
    <h2>Apply for the Rocket Card</h2>
    <VueStripeIssuingDisclosure :options="disclosure" @error="onError" />
  </VueStripeProvider>
</template>

<script setup lang="ts">
import { VueStripeProvider, VueStripeIssuingDisclosure } from '@vue-stripe/vue-stripe'
import '@vue-stripe/vue-stripe/style.css' // once, e.g. in main.ts

const publishableKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY
const disclosure = {
  issuingProgramID: 'iprg_123',
  publicCardProgramName: 'Rocket Card',
  learnMoreLink: 'https://example.com/rocket-card'
}

const onError = (error: { message?: string }) => console.error(error.message)
</script>

Props ​

PropTypeRequiredDescription
stripeStripe | PromiseLike<Stripe | null> | nullNoStripe instance, for use without VueStripeProvider (for example loadStripe(key)). Defaults to the provider's; with neither, the component throws VueStripeProviderError. Nothing is requested while it is null
optionsIssuingDisclosureOptionsNoWhich card program the disclosure is for (below)

Options ​

OptionTypeDescription
issuingProgramIDstringID of the Issuing program (iprg_...) whose disclosure Stripe returns
publicCardProgramNamestringThe card program's public name, as cardholders know it
learnMoreLinkstringA link of yours where cardholders can read more about the card program

A change to any option requests the disclosure again and replaces the text. An inline :options="{ ... }" with unchanged values does not.

Events ​

EventPayloadDescription
@load-The disclosure is mounted (React onLoad)
@errorStripeError | { message: string }Stripe refused the request, or the call failed (React onError). Also { message } when Stripe.js cannot load: a stripe promise that rejects, or the plugin's load failing without a stripe prop

Slots ​

SlotSlot PropsDescription
#loading-While the disclosure loads (default: "Loading disclosure...")
#error{ error: string }When no disclosure could be created

Exposed Properties ​

MemberTypeDescription
loadingRef<boolean>true until the disclosure is mounted or fails
errorRef<string | null>Current error message

CSS classes ​

The root is vue-stripe-issuing-disclosure; Stripe's element goes into vue-stripe-issuing-disclosure-mount, and the -error and -loader children hold the slots. Each also carries the shared vue-stripe-element* class, styled by @vue-stripe/vue-stripe/style.css.

TypeScript ​

ts
import type { IssuingDisclosureOptions, DisclosureError } from '@vue-stripe/vue-stripe'

If the loaded Stripe.js has no createIssuingDisclosure, @error receives { message: 'stripe.createIssuingDisclosure() is not available in this Stripe.js version' }.

See Also ​