Store iframe Guide #
EBP API에서 응답값으로 paymentSession 제공 Store CheckoutWebComponents 초기화(Public Key, environment, paymentSession
Checkout.js template #
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Checkout Web Components: Flow Component</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="successToast" class="toast success">
<span>The payment was successful</span>
</div>
<div id="failedToast" class="toast failed">
<span>The payment failed, try again</span>
</div>
<form>
<div class="container">
<div id="flow-container"></div>
</div>
<span id="error-message"></span>
<span id="successful-payment-message"></span>
</form>
<script src="https://checkout-web-components.checkout.com/index.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js #
/* 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);
}