<html>
<head>
<link rel="stylesheet" href="order-action.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
<script src="https://sdk-checkout.delivered.co.kr/index.js"></script>
</head>
<body>
<div class="order-action">
<!-- 글로벌 오더 버튼 -->
<div id="globalOrderButton" class="order-action-button">
<div class="button-content">
<img src="img/logo.png" alt="Global Order Logo" class="logo" />
<div class="order-text">Global Order</div>
</div>
</div>
<!-- 글로벌 오더 아이프레임 -->
<iframe id="orderIframe"></iframe>
</div>
<script>
// 주문 정보 객체
const products = [ // products 데이터 구조는 'SDK 연동하기' 문서 참고
{
productRequest: {
sellerClientKey: 'your_seller_client_key',
title: "프리미엄 티셔츠",
prices: { krw: 29900 },
discountRate: 0, // discountRate 사용하는 경우, originalPrices 필요
originUrl: "https://example.com/products/premium-tshirt",
images: ["https://example.com/images/tshirt-front.jpg"],
options: [
{
groupName: "색상",
type: "select",
required: true,
options: [
{ label: "흰색", extraPrice: { krw: 0 } },
{ label: "검정", extraPrice: { krw: 1000 } }
]
}
],
quantityControl: {
allowQuantityChange: true,
minQuantity: 1,
maxQuantity: 10
}
},
selectedOptions: [
{ groupName: "색상", value: "흰색" }
],
quantity: 1
}
];
// 버튼 클릭 이벤트 리스너
document.getElementById('globalOrderButton').addEventListener('click', async () => {
try {
const response = await dkLibrary.orderInIframe({
products,
parentUrl: `https://example.com/iframe-page?url=`,
});
const iframe = document.getElementById('orderIframe');
iframe.src = response;
} catch (err) {
console.error('주문 실패:', err);
}
});
// 메시지 이벤트 리스너
window.addEventListener('message', (event) => {
const { type, payload } = event.data;
if (type === 'dk-global-order-go-to') {
window.location.replace(payload);
} else if (type === 'dk-resize-iframe') {
const iframe = document.getElementById('orderIframe');
iframe.style.height = `${payload.height}px`;
}
});
</script>
</body>
</html>