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 endpointServer-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:
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 integrationClient-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(
); // 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;'pk_test_TYooMQauvdEDq54NiTphI7jx'
Display an ElementClient-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
Element | Name | Availability |
---|---|---|
Number (PAN) | issuingCardNumberDisplay | Virtual cards only |
CVC | issuingCardCvcDisplay | Virtual cards only |
Expiry date | issuingCardExpiryDisplay | Virtual cards only |
PIN | issuingCardPinDisplay | Physical cards only |
Copy button | issuingCardCopyButton | Any card |
Each element type has different options and functions. Select which element type you want to learn more about:
Additional details
The returned card object has PCI fields (such as the number) fully removed from the result.
payload.
In addition to .
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