Vue Stripe

Appearance

useEphemeralKeyNonce ​

Create the single-use nonce that Stripe Issuing needs before its card elements (issuingCardNumberDisplay, issuingCardCvcDisplay, ...) can show a card's details. Wraps stripe.createEphemeralKeyNonce().

The flow: create a nonce for the card in the browser, send it to your server, create an ephemeral key there with nonce and issuing_card, return its secret, and create the Issuing elements with issuingCard, nonce and ephemeralKeySecret. Requires Stripe Issuing on your account. Must be called within a <VueStripeProvider> or an app that installs createVueStripe().

Usage ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import { useEphemeralKeyNonce } from '@vue-stripe/vue-stripe'

const props = defineProps<{ cardId: string }>() // ic_...
const emit = defineEmits<{
  // The options the Issuing Elements need
  ready: [card: { issuingCard: string; nonce: string; ephemeralKeySecret: string }]
}>()
const { createEphemeralKeyNonce, loading, error } = useEphemeralKeyNonce()
const keyError = ref('')

const reveal = async () => {
  keyError.value = ''
  const { nonce } = await createEphemeralKeyNonce({ issuingCard: props.cardId })
  if (!nonce) return // error is set
  // The route from the Issuing guide, step 1
  const response = await fetch('/api/issuing/ephemeral-keys', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ cardId: props.cardId, nonce })
  })
  if (!response.ok) {
    keyError.value = `Could not load the card (HTTP ${response.status})`
    return
  }
  const { ephemeralKeySecret } = await response.json()
  emit('ready', { issuingCard: props.cardId, nonce, ephemeralKeySecret })
}
</script>

<template>
  <button :disabled="loading" @click="reveal">Show card details</button>
  <p v-if="error">{{ error }}</p>
  <p v-if="keyError">{{ keyError }}</p>
</template>

Return Value ​

ts
const { createEphemeralKeyNonce, loading, error } = useEphemeralKeyNonce()
// UseStripeMethodReturn<'createEphemeralKeyNonce'>
PropertyTypeDescription
createEphemeralKeyNonceStripe['createEphemeralKeyNonce']The Stripe.js method; resolves to { nonce } or { error }.
loadingReadonly<Ref<boolean>>true while a call is in flight.
errorReadonly<Ref<string | null>>Message of the last call's { error } result or thrown error; reset when a call starts.

The method resolves to Stripe's result untouched and rejects when Stripe.js throws, after setting error. This is the same behavior as the method confirmers.

Stripe.js signature ​

ts
createEphemeralKeyNonce(options: { issuingCard: string }): Promise<EphemeralKeyNonceResult>

See Also ​