const params = new URLSearchParams({
accessToken: 'your-access-token',
language: 'en',
formatCardNumber: 'true',
postMessageHost: 'https://www.yoursite.com'
});
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&postMessageHost=https%3A%2F%2Fwww.yoursite.com">
</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',
postMessageHost: 'https://www.yoursite.com'
});
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&postMessageHost=https%3A%2F%2Fwww.yoursite.com">
</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.
Parameters
Authentication
This is a browser-facing endpoint. Use one of the authentication methods below instead of the API key shown above.
string
Recommended. A long-lived token for browser-side calls. How to generate.
string
Alternative. Valid for 5 minutes. How to generate.
Path Parameters
string
required
The token ID as returned by one of the tokenization methods.
Query String
string
A second Access Token, required when the card includes a CVV. Used for the “Clear CVV” method.
Display Options
string
required
The form’s language in ISO 639-1 (2-letter) format. See here. If an unsupported language is received, English will be 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.
string
The domain name of the host site where the iframe is displayed. Read more on setting up the postMessage mechanism.
boolean
Whether to display the card number in blocks of digits or as a single string of numbers.
const params = new URLSearchParams({
accessToken: 'your-access-token',
language: 'en',
formatCardNumber: 'true',
postMessageHost: 'https://www.yoursite.com'
});
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&postMessageHost=https%3A%2F%2Fwww.yoursite.com">
</iframe>
Response
200 - The browser renders the hosted Card Display Form.<!-- The hosted Card Display Form, rendered by the browser -->