` tag with `id="rapyd-toolkit":`
```html
```
Initialize the Page object with the following fields:
- - JavaScript
- ```javascript
let toolkit = new RapydToolkit({
button_color: "blue",
/* Color of the Show Details button. String.
Standard CSS color name or hexadecimal code such as #323fff.
Default is the color that is returned in the 'merchant_color'
field of the Hosted Page for Virtual Cards response. Optional.*/
id: "hp_issued_bd334669c8a80bc68c124b144c350b7f",
/* ID of the Hosted Page for Virtual Cards response. String. Required.*/
close_on_complete: true,
/* Causes the embedded Rapyd Toolkit window to close
when we fail to retrieve the card details. Boolean. Default is 'true'. Optional.*/
page_type: "card_issuing"
/* Mandatory for the Hosted Page for Virtual Cards
Default is "collection". */
});
```
Call display `Toolkit()` to display the Hosted Page for Virtual Cards:
```javascript
checkout.displayToolkit();
```
Optional Step to Close Window on Completion. If `close_on_complete` is set to false, call `toolkit.closeToolkit()` to close the Rapyd Toolkit window.
```javascript
toolkit.closeToolkit();
```
Insert your code that runs when the following events occur. Use your code to read the event field in the 'window' object.
- - JavaScript
- ```javascript
window.addEventListener(issuingOnSuccess, (event) => {
console.log(event.detail)
// Sent after clicking the Show Details button and the details are successfully displayed
// Client code.
})
window.addEventListener(issuingOnFail, (event) => {
console.error(event.detail.error)
// Returns an error object when we fail to retrieve the card details
// Client code.
```
### Customize Your Page
Hosted pages can be customized using the Client Portal as described in [Customizing Your Hosted Page](https://docs.rapyd.net/en/customizing-your-hosted-page.md "Customizing Your Hosted Page") to edit the look and feel of the page.