Issuing Elements render sensitive card details without those details touching your servers or your DOM. Each one needs an ephemeral key and the card ID.
These require a Stripe Issuing account.
| Component | Shows |
|---|---|
IssuingCardNumberDisplayElement | Full card number |
IssuingCardCvcDisplayElement | CVC |
IssuingCardExpiryDisplayElement | Expiry date |
IssuingCardPinDisplayElement | PIN |
IssuingCardCopyButtonElement | Button that copies one of the above |
<script setup>
import { loadStripe } from '@stripe/stripe-js'
import {
Elements,
IssuingCardCopyButtonElement,
IssuingCardCvcDisplayElement,
IssuingCardExpiryDisplayElement,
IssuingCardNumberDisplayElement,
} from 'vue-stripe'
const stripePromise = loadStripe('pk_test_xxx')
const cardOptions = {
issuingCard: 'ic_xxx',
nonce: 'nonce_xxx',
ephemeralKeySecret: 'ek_test_xxx',
}
</script>
<template>
<Elements :stripe="stripePromise">
<IssuingCardNumberDisplayElement :options="cardOptions" />
<IssuingCardCvcDisplayElement :options="cardOptions" />
<IssuingCardExpiryDisplayElement :options="cardOptions" />
<IssuingCardCopyButtonElement :options="{ toCopy: 'number' }" @click="onCopied" />
</Elements>
</template>
Every Issuing element requires its options prop. Each emits ready with the
underlying element instance, and IssuingCardCopyButtonElement also emits
click.
IssuingDisclosure and FinancialAccountDisclosure render Stripe's required
disclosure copy. They take the Stripe instance directly rather than sitting
inside an Elements provider.
<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { IssuingDisclosure } from 'vue-stripe'
const stripePromise = loadStripe('pk_test_xxx')
</script>
<template>
<IssuingDisclosure
:stripe="stripePromise"
:options="{ publicCardProgramName: 'Acme Card' }"
/>
</template>