` tag with id="rapyd-toolkit":
```html
```
3. Initialize the Checkout page with the following fields:
- - JavaScript
- ```
Instantiating ‘checkout’ with parametersInstantiating 'checkout' & setting variables
let checkout = new RapydCheckoutToolkit({
pay_button_text: "Click to pay",
// Text that appears on the 'Pay' button.
// String. Maximum length is 16 characters.
// Default is "Place Your Order". Optional.
pay_button_color: "blue",
// Color of the 'Pay' 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 Checkout Page'. Optional.
id: "checkout_9ebe58dcb9d75e8f972a35350f96c2fa",
// ID of the 'Create Checkout Page' response. String. Required.
close_on_complete: true,
// Causes the embedded Rapyd Checkout Toolkit window to close
// when the payment is complete. Boolean. Default is 'true'. Optional.
page_type: “collection”
// Default is "collection". Optional.
});
```
4. Call display Toolkit() to display the Hosted Checkout page.
```javascript
checkout.displayCheckout();
```
5. Insert your code that runs when the following events occur. Use your code to read the event field in the window object.
- - JavaScript
- ```
window.addEventListener('onCheckoutPaymentSuccess', (event) => {
console.log(event.detail)
// Returns 'Payment' object.
// Client code.
})
window.addEventListener('onCheckoutFailure', (event) => {
console.error(event.detail.error)
// Returns an error message from the API.
// Checkout page failed to generate
// Client code.
})
window.addEventListener('onCheckoutPaymentFailure', (event) => {
console.error(event.detail.error)
// Returns an error message from the API.
// Client code.
})
window.addEventListener('onLoading', (event) => {
console.log(event.detail.loading)
// returns true or false depending on the loading state
// client code
})
```
> **Note:**
>
> On successful payment, the clients receive a onCheckoutPaymentSuccess event with the payment object with the field: "digital_wallet" and value: "google_pay" to the payment object in the event. With Google Pay the iframe is kept open and will display a final confirmation page.
Sample Embedded Rapyd Checkout Toolkit
Here's an example of a Rapyd Checkout page created using the Toolkit:
- - HTML
- ```
Rapyd Checkout Toolkit
Rapyd Checkout Toolkit Demo
Loading...
```