Skip to content
Create account
or
Sign in
The Stripe Docs logo
/
Ask AI
Create account
Sign in
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Developer tools
Get started
Payments
Finance automation
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Overview
Start an integration
Products
Global Payouts
Capital
Issuing cards
    Overview
    How Issuing works
    Global availability
    Manage fraud
    Cards
    Choose your card type
    Virtual cards
    Issue virtual cards
    Physical cards
    Manage cards
    Digital wallets
    Replacement cards
    Card programs
    Program management
    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
    Issuing with Connect
    Set up an Issuing and Connect integration
    Update terms of service acceptance
    Connect funding
    Connected accounts, cardholders, and cards
    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)
Treasury
Manage money
HomeMoney managementIssuing cards

Embed Issuing card management into your website

Use prebuilt UI components to embed Issuing card management into your website.

Copy page

Give your connected accounts access to Issuing card management functionality on your website by using Connect embedded components. Connect embedded components allow you to create complex integrations with Stripe products that require minimal coding and configuration out of the box.

Stripe offers two different components for Issuing card management:

  • Issuing Card component
  • Issuing Cards List component

Security tip

These components are for admin users of connected accounts, who can access sensitive card and cardholder data of the entire connected account. These components shouldn’t be used to render UI for individual cardholders in any circumstance.

Quickstart

Issuing Connect embedded components requires access to Issuing and Connect.

To learn how embedded components work, see the Connect embedded components guide. The corresponding embedded components quickstart can help you set up your environment.

To embed Issuing card management into your website:

  1. Follow the steps to create a connected account with Issuing capabilities.
  2. Create a cardholder and cards for that connected account.
  3. Create an AccountSession with issuing_card: {enabled: true} or issuing_cards_list: {enabled: true}.
  4. Add the issuing-card or issuing-cards-list component to the DOM.

Issuing Card component

The Issuing Card component allows an admin to view individual card details. From this view, they can set spend controls, as well as activate, deactivate (freeze), or cancel cards. If you implement sensitive data display, they can also view card numbers (PANs) and CVVs or CVCs for virtual cards.

Issuing Card configuration

This embedded component supports the following parameters:

MethodTypeDescription
setShowSpendControlsbooleanSpecifies whether to render the Spend controls tab. Default value is false.
setDefaultCardstringSets the Issuing Card ID to display upon initial load.
setCardSwitchingbooleanSets whether or not to render the card dropdown selector. Sets to true by default.
setFetchEphemeralKeyFunctionSets the callback that fetches the ephemeral key for the card. See sensitive data display.

Issuing Cards List component

The Issuing Cards List component allows an admin to view all the cards on a connected account. They can filter cards by cardholder, creation date, and card type.

When the admin clicks on a row in the table, they see a view of the selected card where they can activate, deactivate (freeze), or cancel the card. If you implement sensitive data display, they can also view card numbers (PANs) and CVC or CVVs for virtual cards.

Issuing Cards List configuration

This embedded component supports the following parameters:

MethodTypeDescription
setShowSpendControlsbooleanSpecifies whether to render the Spend controls tab. Default value is false.
setFetchEphemeralKeyFunctionSets the callback that fetches the ephemeral key for the currently selected card. See sensitive data display.

Set spending controls

You can use Issuing Connect embedded components to view and, optionally, edit spending controls on your cards by turning on the Issuing component’s showSpendControls attribute.

JavaScript
const issuingCard = stripeConnectInstance.create('issuing-card'); issuingCard.setShowSpendControls(true); document.body.appendChild(issuingCard);

To enable editing spend controls in the component, pass spend_control_management: true as a feature when you create an AccountSession.

Command Line
cURL
curl https://api.stripe.com/v1/account_sessions \ -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"
\ -d account=
{{CONNECTED_ACCOUNT_ID}}
\ -d "components[issuing_card][enabled]"=true \ -d "components[issuing_card][features][spend_control_management]"=true

Sensitive data display

Issuing Connect embedded components integrate with Issuing Elements to provide a PCI-compliant way for you to allow your admins to view card numbers (PANs) and CVV or CVCs for virtual cards. The sensitive data renders inside Stripe-hosted iframes and never touches your servers.

The components can use an ephemeral key to securely retrieve card information from the Stripe API without publicly exposing your secret keys.

To enable this functionality you must:

  1. Set up an ephemeral key exchange on your server.
  2. Pass an asynchronous callback to the components.

Stripe generates a nonce from the Card ID in the Issuing Card or Issuing Cards List component when a card is selected or loaded. Stripe then calls your callback function which returns an ephemeral key, and then renders a Show numbers button if the ephemeral key is valid.

Ephemeral key exchange

Your server-side endpoint needs to accept a Card ID and a nonce. It can then create an ephemeral key using Stripe.

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

server.js
Node
// This example sets up an endpoint using the Express framework. // Watch this video to get started: https://youtu.be/rPR2aJ6XnAc 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; const ephemeralKey = await stripe.ephemeralKeys.create({ nonce: nonce, issuing_card: card_id, }, { apiVersion: '2025-04-30.basil', stripeAccount: '{{CONNECTED_ACCOUNT_ID}}', }); response.json({ ephemeralKeySecret: ephemeralKey.secret, nonce: nonce, issuingCard: card_id, }); });

Asynchronous callback

You must define an asynchronous function that accepts a named argument with property issuingCard which is a Card ID and additionally, a nonce property. This function must return an Object with properties issuingCard, nonce, and ephemeralKeySecret which are retrieved from the endpoint you set up in the previous step.

Here’s how you might implement this callback:

JavaScript
const issuingCard = stripeConnectInstance.create('issuing-card'); const fetchEphemeralKey = async (fetchParams) => { const { issuingCard, nonce } = fetchParams; // This may vary greatly based on your implementation const response = await myServer.getEphemeralKey({issuingCard, nonce}) return { issuingCard: response.issuingCard, nonce: response.nonce, ephemeralKeySecret: response.ephemeralKeySecret } } issuingCard.setFetchEphemeralKey(fetchEphemeralKey); document.body.appendChild(issuingCard);

Additional configuration

You can customize and configure your Connect embedded components to match your website’s look and feel. You can set this configuration when you initialize the StripeConnectInstance. See customize the look of Connect embedded components for more details.

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