Accéder directement au contenu
Créez un compte
 ou
connecter-vous
Logo de la documentation Stripe
/
Créez un compte
Connectez-vous
Aperçu
Configurer les dashboards des comptes

Issuing cardVersion bêta privée

Show an individual issued card.

Issuing card renders the details of an individual card issued to your connected accounts.

When creating an Account Session, enable the Issuing card component by specifying issuing_card in the components parameter.

Command Line
curl https://api.stripe.com/v1/account_sessions \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -H "Stripe-Version: 2024-11-20.acacia; embedded_connect_beta=v2;" \
  -d account=
{{CONNECTED_ACCOUNT_ID}}
 \
  -d "components[issuing_card][enabled]"=true \
  -d "components[issuing_card][features][card_management]"=true \
  -d "components[issuing_card][features][cardholder_management]"=true \
  -d "components[issuing_card][features][card_spend_dispute_management]"=true \
  -d "components[issuing_card][features][spend_control_management]"=true

After creating the account session and initializing ConnectJS, you can render the Issuing card component in the front end:

issuing-card.js
// Include this element in your HTML
const issuingCard = stripeConnectInstance.create('issuing-card');
issuingCard.setDefaultCard('{{ISSUING_CARD_ID_ID');
issuingCard.setShowSpendControls(true);
container.appendChild(issuingCard);

This embedded component supports the following attributes:

SetterTypeDescription
setDefaultCard(string) => voidSets the Issuing Card ID to display upon initial load.
setCardSwitching(boolean) => voidSets whether to render the card dropdown selector. Defaults to true.
setFetchEphemeralKey(function) => voidSets the callback that fetches the ephemeral key for the 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.

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 https://api.stripe.com/v1/account_sessions \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -H "Stripe-Version: 2024-11-20.acacia; embedded_connect_beta=v2;" \
  -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
// 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_4eC39HqLyjWDarjtT1zdp7dc'
);

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: '2024-11-20.acacia',
    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:

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);

Request access Private preview

Sign in to request access to this Connect embedded component in preview.

If you don’t have a Stripe account, you can register now.

Cette page vous a-t-elle été utile ?
OuiNon
Besoin d'aide ? Contactez le service d'assistance.
Rejoignez notre programme d'accès anticipé.
Consultez notre journal des modifications des produits.
Des questions ? Contactez l'équipe commerciale.
Propulsé par Markdoc