# Store iframe Guide
EBP API에서 응답값으로 paymentSession 제공
Store CheckoutWebComponents 초기화(Public Key, environment, paymentSession
# Checkout.js template
```html
Checkout Web Components: Flow Component
The payment was successful
The payment failed, try again
```
# app.js
```javascript
/* global CheckoutWebComponents */
(async () => {
// Insert your public key here
const PUBLIC_KEY = "{your_public_key}";
const response = await fetch("/create-payment-sessions", {method: "POST"}); // Order
const paymentSession = await response.json();
if (!response.ok) {
console.error("Error creating payment session", paymentSession);
return;
}
const checkout = await CheckoutWebComponents({
publicKey: PUBLIC_KEY,
environment: "sandbox",
locale: "en-GB",
paymentSession,
onReady: () => {
console.log("onReady");
},
onPaymentCompleted: (_component, paymentResponse) => {
console.log("Create Payment with PaymentId: ", paymentResponse.id);
},
onChange: (component) => {
console.log(
`onChange() -> isValid: "${component.isValid()}" for "${
component.type
}"`,
);
},
onError: (component, error) => {
console.log("onError", error, "Component", component.type);
},
});
const flowComponent = checkout.create("flow");
flowComponent.mount(document.getElementById("flow-container"));
})();
function triggerToast(id) {
var element = document.getElementById(id);
element.classList.add("show");
setTimeout(function () {
element.classList.remove("show");
}, 5000);
}
```