` tag with id="card_issuing_activate":
```html
```
3. Initialize the Checkout Page object with the following fields:
- - JavaScript
- ```javascript
let toolkit = new RapydToolkit({
button_text: "Submit",
// Text that appears on the 'Submit' button.
// String. Maximum length is 16 characters.
// Default is "Place Your Order". Optional.
pay_button_color: "blue",
// Color of the 'Submit' 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 response to 'Create Card Activation Page'. Optional.
id: "hp_issuing_act_5801a620cc1ace4bad6149ace5c61cd7",
// ID of the 'Card Activation' response. String. Required.
close_on_complete: true,
// Causes the embedded Card Activation Toolkit window to close
// when the payment is complete. Boolean. Default is 'true'. Optional.
page_type: "card_issuing_activate"
/* Mandatory for Card Activation page
Default is "collection". */
});
```
4. Call display Toolkit() to display the checkout page.
```javascript
toolkit.displayToolkit();
```
5. Optional step. If close_on_complete is set to false, call toolkit.closeToolkit() to close the Rapyd Card Activation Toolkit window.
```javascript
toolkit.closeToolkit();
```
6. 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('onIssuedCardActivationSuccess', (event) => {
console.log(event.detail)
// Returns 'Issued Card' object.
// Client code.
})
window.addEventListener('onIssuedCardActivationFailure', (event) => {
console.error(event.detail.error)
// Triggered when the activation action fails with the error object
// Client code.
})
window.addEventListener('onOTPFailure', (event) => {
console.error(event.detail.error)
// Triggered when the OTP confirmation fails with the error object
// Client code.
})
window.addEventListener('onIssuedCardSetPinFailure', (event) => {
console.error(event.detail.error)
// Triggered when the card activation is successful but the PIN code was not set
// Client code.
})
window.addEventListener('onLoading', (event) => {
console.log(event.detail.loading)
// returns true or false depending on the loading state
// Client code
})
```
### Sample Embedded Rapyd Issued Card Activation Toolkit
Here's an example of a Rapyd Issued Card Activation page created using the Toolkit:
- - HTML
- ```html
Rapyd Card Activation
Rapyd Card Activation Demo
```
On successful activation, the clients receive an 'onIssuedCardActivationSuccess' event with the issued card object.
Take note of the following Hosted Card Activation Paged Object fields and the tasks associated with each of them.
Description of Fields
| Field | Description |
| --- | --- |
| ewallet_contact | ID of the Contact object. String starting with **cont_**. |
| card_id | ID of the Issued Card object, a string starting with **ci_**. |
| assigned_at | Time that the card was assigned to a cardholder, in Unix time. Response only. |
| activated_at | Time that the card was activated, in Unix time. Response only. |
| created_at | Time of creation of the issued card object, in Unix time. Response only. |
| card_program | ID of the card program that the card is issued from. String starting with **cardprog_** . |