const params = new URLSearchParams({
accessToken: 'your-access-token',
language: 'en',
formatCardNumber: 'true'
});
const displayUrl = `https://service.pcibooking.net/api/payments/paycard/555fd7b49f134b42a5dbe4d576b2e527/display?${params}`;
// Use it as the iframe source
document.getElementById('card-display').src = displayUrl;
<iframe id="card-display"
src="https://service.pcibooking.net/api/payments/paycard/555fd7b49f134b42a5dbe4d576b2e527/display?accessToken=your-access-token&language=en&formatCardNumber=true">
</iframe>
<!-- The hosted Card Display Form, rendered by the browser -->
Card Display
Request a Card Display Form
Create a Card Display form for displaying stored credit card data within an e-commerce site.
GET
/
api
/
payments
/
paycard
/
{cardtoken}
/
display
const params = new URLSearchParams({
accessToken: 'your-access-token',
language: 'en',
formatCardNumber: 'true'
});
const displayUrl = `https://service.pcibooking.net/api/payments/paycard/555fd7b49f134b42a5dbe4d576b2e527/display?${params}`;
// Use it as the iframe source
document.getElementById('card-display').src = displayUrl;
<iframe id="card-display"
src="https://service.pcibooking.net/api/payments/paycard/555fd7b49f134b42a5dbe4d576b2e527/display?accessToken=your-access-token&language=en&formatCardNumber=true">
</iframe>
<!-- The hosted Card Display Form, rendered by the browser -->
Card Display Guide
Display stored card details to authorized users
src of an iframe element on your page, or redirect the customer’s browser to it. The browser then loads the hosted Card Display Form directly from PCI Booking. For the element classes you can target with custom CSS, see the form structure reference.
Error Responses
This URL is loaded by a browser, so an error is shown inside the iframe, not returned to your server. When a browser loads the URL, the error body is XML (Content-Type: text/xml). See Response Format.
| Code | HTTP Status | Condition |
|---|---|---|
| none | 401 | Authentication failed. The response body is empty. Causes: no accessToken (or sessionToken) in the query string; the access token is not valid, has expired, or has an expiration time further ahead than the maximum allowed; or the access token was already used. An access token works once only, so reloading the iframe fails. Generate a new access token for each load. |
| -1003 | 403 | Your user does not have the Retrieve cards or the Perform Card display operations permission. message is User permissions <permissions> not allowed for this action. |
| -1003 | 403 | Your account has exceeded its usage quota. message is empty. |
| -1003 | 401 | The token does not exist, was deleted, is malformed, or you are not the owner and not associated with it. See Token Not Found or Not Accessible. |
| -150 | 500 | Internal system error. |
language does not cause an error: the form is shown in English. An unknown css name does not cause an error: your default stylesheet is used. If the CVV is no longer available under your CVV retention policy, the form is shown without the CVV.
Parameters
Authentication
Access token or session token. This endpoint does not accept the API key. Generate a token with your API key and pass it as a query parameter. Send one of the two.string
Generated on your side. Single use, and valid for up to 72 hours. How to generate.
string
Returned by an API call. Valid for 5 minutes, and can be used more than once within that time. How to generate.
Path Parameters
string
required
The token ID as returned by one of the tokenization methods.
Display Options
string
The form’s language in ISO 639-1 (2-letter) format. See here. If you leave it out, PCI Booking uses the language of the viewer’s browser. If the language is not supported, English is displayed. To add languages, contact our support team.
string
The CSS resource name. See our guide on managing stylesheets. If omitted, PCI Booking uses the default CSS.
boolean
Whether to display the card number in blocks of digits or as a single string of numbers.
boolean
default:"false"
Set to
true to leave out PCI Booking’s base stylesheet, so that the form is styled only by your own stylesheet (css).const params = new URLSearchParams({
accessToken: 'your-access-token',
language: 'en',
formatCardNumber: 'true'
});
const displayUrl = `https://service.pcibooking.net/api/payments/paycard/555fd7b49f134b42a5dbe4d576b2e527/display?${params}`;
// Use it as the iframe source
document.getElementById('card-display').src = displayUrl;
<iframe id="card-display"
src="https://service.pcibooking.net/api/payments/paycard/555fd7b49f134b42a5dbe4d576b2e527/display?accessToken=your-access-token&language=en&formatCardNumber=true">
</iframe>
Response
200 - The browser renders the hosted Card Display Form.<!-- The hosted Card Display Form, rendered by the browser -->