Skip to content
Create account
or
Sign in
The Stripe Docs logo
/
Ask AI
Create account
Sign in
Get started
Payments
Revenue
Platforms and marketplaces
Money management
Developer resources
Overview
Start an integration
Funding and treasury
Treasury
Capital
Payment management
Issuing cards
    Overview
    How Issuing works
    Global availability
    Manage fraud
    Cards
    Choose your card type
    Virtual cards
    Physical cards
    Manage cards
    Digital wallets
    Replacement cards
    Card programs
    Program management
    Processor-only Issuing
    Customize your card program
    Add funds to your card program
    Credit Consumer Issuing
    Controls
    Spending controls
    Advanced fraud tools
    3DS
    Fraud challenges
    Real-time authorizations
    PIN management
    Issuing Elements
    Token Management
    Funding
    Balance
    Postfund your integration with Stripe
    Postfund your integration with Dynamic Reserves
    Purchases
    Authorizations
    Transactions
    Disputes
    Testing
    Merchant categories
    ATM Usage
    Enriched merchant data
    Issuing with Connect
    Set up an Issuing and Connect integration
    Update terms of service acceptance
    Connect funding
    Connected accounts, cardholders, and cards
    Inactive connected accounts offboarding
    Embed card management UI
    Credit
    Overview
    Set up connected accounts
    Manage credit terms
    Report other credit decisions and manage AANs
    Report required regulatory data for credit decisions
    Manage account obligations
    Test credit integration
    Additional information
    Choose a cardholder type
    Customer support for Issuing and Treasury
    Issuing watchlist
    Marketing guidance (Europe/UK)
    Product and marketing compliance guidance (US)
Global Payouts
Manage money
HomeMoney managementIssuing cards

Using Issuing Elements

Learn how to display card details in your web application in a PCI-compliant way.

Stripe.js includes a browser-side JavaScript library you can use to display the sensitive data of your Issuing cards on the web in compliance with PCI requirements. The sensitive data renders inside Stripe-hosted iframes and never touches your servers.

Note

Stripe.js collects extra data to protect our users. Learn more about how Stripe collects data for advanced fraud detection.

Ephemeral key authentication

Stripe.js uses ephemeral keys to securely retrieve Card information from the Stripe API without publicly exposing your secret keys. You need to do some of the ephemeral key exchange on the server-side to set this up.

The ephemeral key creation process begins in the browser, by creating a nonce using Stripe.js. A nonce is a single-use token that creates an ephemeral key. This nonce is sent to your server, where you exchange it for an ephemeral key by calling the Stripe API (using your secret key).

Create a server-side ephemeral key, then pass it back to the browser for Stripe.js to use.

Create a secure endpoint
Server-side

The first step to integrating with Issuing Elements is to create a secure, server-side endpoint to generate ephemeral keys for the card you want to show. Your Issuing Elements web integration calls this endpoint.

Here’s how you might implement an ephemeral key creation endpoint in web applications framework across various languages:

server.js
Node
Ruby
PHP
Python
No results
// This example sets up an endpoint using the Express framework. const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.urlencoded({ extended: true })); const stripe = require('stripe')(
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
); app.post('/ephemeral-keys', async (request, response) => { const { card_id, nonce } = request.body; /* Important: Authenticate your user here! */ const ephemeralKey = await stripe.ephemeralKeys.create({ nonce: nonce, issuing_card: card_id, }, { apiVersion: '2025-07-30.basil', }); response.json({ ephemeralKeySecret: ephemeralKey.secret, }); });

Important

Your endpoint is responsible for authenticating that the requesting user has permission to see the requested card’s details. Make sure your endpoint only issues ephemeral keys to users of the requested card.

Note

You must specify the API version when creating ephemeral keys. Currently, the minimum required version is 2020-03-02. You must also pass in an ephemeral key nonce, which you create in your web integration.

Web API integration
Client-side

First, include Stripe.js on your page. For more information on how to set up Stripe.js, refer to including Stripe.js.

Create a Stripe instance and an ephemeral key nonce for the card you want to retrieve using stripe.createEphemeralKeyNonce. Use the nonce to retrieve the ephemeral key by calling the server-side endpoint that you created:

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
); // Initialize Elements which you'll need later const elements = stripe.elements(); // Use Stripe.js to create a nonce const cardId = 'ic_1ITi6XKYfU8ZP6raDAXem8ql'; const nonceResult = await stripe.createEphemeralKeyNonce({ issuingCard: cardId, }); const nonce = nonceResult.nonce; // Call your ephemeral key creation endpoint to fetch the ephemeral key const ephemeralKeyResult = await fetch('/ephemeral-keys', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': /* Important: this endpoint must be authenticated. */ }, body: JSON.stringify({ card_id: cardId, nonce: nonce, }) }); const ephemeralKeyResponse = await ephemeralKeyResult.json(); const ephemeralKeySecret = ephemeralKeyResponse.ephemeralKeySecret;

Display an Element
Client-side

Now that you have an ephemeral key, you can display an Issuing Element.

All Elements are created with the following pattern:

const element = elements.create(elementName, options); element.mount("#my-parent-container");

Available Issuing Elements

ElementNameAvailability
Number (PAN)issuingCardNumberDisplayVirtual cards only
CVCissuingCardCvcDisplayVirtual cards only
Expiry dateissuingCardExpiryDisplayVirtual cards only
PINissuingCardPinDisplayPhysical cards only
Copy buttonissuingCardCopyButtonAny card

Each element type has different options and functions. Select which element type you want to learn more about:

This section applies to creating elements that display a card’s details: issuingCardNumberDisplay, issuingCardCvcDisplay, issuingCardExpiryDisplay, or issuingCardPinDisplay.

Options

NameTypeUsageRequired
issuingCardstringThe ID of your issued card (for example, ic_abc123)Yes
noncestringYour ephemeral key nonceYes
ephemeralKeySecretstringThe secret component of your ephemeral keyYes
styleStyle objectKeep in mind that some variants, pseudo-classes, and properties are for input Elements and won’t apply to these Elements. An example of an input-only pseudo-class is ::placeholder.No

Note

If you decide to use issuingCardPinDisplay, then you must implement appropriate methods to ensure that access is limited to your authorized users. In particular, you must apply two-factor authentication (2FA) before providing access to a page using issuingCardPinDisplay. If Stripe decides that you don’t have sufficient security measures in place, we might suspend your access to this Element.

Example

const number = elements.create('issuingCardNumberDisplay', { issuingCard: cardId, nonce: nonce, ephemeralKeySecret: ephemeralKeySecret, style: { base: { color: '#fff', fontSize: '16px' }, }, }); number.mount('#card-number');

Additional details

The returned card object has PCI fields (such as the number) fully removed from the result.issuingCard payload.

In addition to .mount() in the previous examples, the Elements also support the following methods:

  • .destroy()
  • .unmount()
  • .update(options)

Issuing Elements and native applications

Issuing Elements does not directly support native application platforms such as iOS, Android, or React Native.

To display sensitive card details with Issuing Elements in your native app, use a web view. Build a web integration on your servers following this guide, and then point a web view’s URL to that integration. To learn about implementing web views for native apps, see these external resources:

  • iOS and iPadOS: WKWebView
  • Android: WebView
  • React Native: react-native-webview
  • Flutter: webview-flutter
Was this page helpful?
YesNo
  • Need help? Contact Support.
  • Join our early access program.
  • Check out our changelog.
  • Questions? Contact Sales.
  • LLM? Read llms.txt.
  • Powered by Markdoc