​
1. 설치 가이드

​
1-1. 사용 방법

Order Action 기능은 반드시 가맹점 웹사이트의 상품 페이지와 장바구니 페이지에 생성해야합니다.

Order Tracking 기능은 가맹점 웹사이트의 메인 페이지에 생성하는 것을 추천드립니다.

각 컴포넌트는 두 가지 방식 중 하나를 선택하여 설치할 수 있습니다. 프로젝트의 구조나 선호도에 따라 적합한 방식을 선택하세요.

  • 인라인 스타일 버전: 별도의 CSS 파일 없이 HTML 파일 하나로 구성되어 있습니다.
  • HTML/CSS 분리 버전: HTML과 CSS를 분리하여 관리할 수 있습니다.

​
1-2. 맞춤 설정

  • 스타일 수정: 브랜드 아이덴티티에 맞게 CSS를 수정하여 버튼이나 배경색 등을 변경할 수 있습니다.
  • 로고 적용: 컴포넌트 내에 있는 로고를 사용하기 위해 🖼️ : 딜리버드 파트너스 로고 링크를 통해 다운로드 받은 이미지를 적용해주세요.
  • 동적 데이터 연결: 샘플 코드의 정적 데이터 부분을 실제 사이트의 동적 데이터와 연결해야 합니다.
  • 해외 사용 설정: 글로벌 오더를 해외 사용자인 경우에만 로드하는 경우, 해외 사용 설정하기 문서를 참고해주세요.

​
2. Order Action 컴포넌트

해당 컴포넌트는 이해를 돕기 위한 샘플입니다.

링크와 함수가 가이드에 맞게 동일하게 동작한다면, 스타일은 자유롭게 수정하여 사용 가능합니다.

​
2-1. 기능

  • 상품 페이지에서 글로벌 오더 주문서 생성 기능을 제공하는 버튼을 표시합니다.
  • 버튼 클릭 시, 상품 정보를 전달하여 글로벌 체크아웃 창이 나타나도록 합니다.
  • 상품 정보를 전달하는 방법은 통합형 SDK 연동하기를 참고해주세요.

Order Action 기능은 반드시 가맹점 웹사이트의 상품 페이지와 장바구니 페이지에 생성해야합니다.

​
2-2. 새 창 방식 (New Tab) 컴포넌트 코드

  • 버튼 클릭 시, 글로벌 체크아웃이 새로운 브라우저 탭에서 열립니다.
  • dkLibrary.orderInNewTab() 메서드를 사용합니다.
<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>
</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: [
          { title: "색상: 흰색", prices: { krw: 0 } },
          { title: "색상: 검정", prices: { krw: 1000 } } 
        ]
      },
      selectedOptions: [
        { title: "색상: 흰색", quantity: 1 }
      ]
    }
  ];

  document.getElementById('globalOrderButton').addEventListener('click', () => {
    dkLibrary.orderInNewTab(products)
      .then(() => {
        console.log('주문 성공');
      })
      .catch((err) => {
        console.error('주문 실패:', err);
      });
  });
</script>
</body>
</html>

​
2-3. 아이프레임 방식 (Iframe) 컴포넌트 코드

  • 버튼 클릭 시, 글로벌 체크아웃이 현재 페이지 내 iframe에서 열립니다.
  • dkLibrary.orderInIframe() 메서드를 사용합니다.
<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 = [ // productsRequest 데이터 구조는 '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: [
          { title: "색상: 흰색", prices: { krw: 0 } },
          { title: "색상: 검정", prices: { krw: 1000 } }
        ]
      },
      selectedOptions: [
        { title: "색상: 흰색", 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) => {
    if (event.origin !== 'https://checkout.delivered.co.kr') return;

    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>

​
3. Top Bar (Order Tracking) 컴포넌트

해당 컴포넌트는 이해를 돕기 위한 샘플입니다.

링크와 함수가 가이드에 맞게 동일하게 동작한다면, 스타일은 자유롭게 수정하여 사용 가능합니다.

  • 설치 조건: 글로벌 오더 통합형 SDK 설치 완료

​
3-1. 기능

  • 메인 페이지 상단에 “Order Tracking” 링크와 “We now ship to worldwide” 메시지를 표시합니다.
  • 링크 클릭 시, 주문 조회 페이지로 이동하여 사용자가 주문 상태를 확인할 수 있습니다.

​
3-2. 컴포넌트 코드

Order Tracking 기능은 가맹점 웹사이트의 메인 페이지에 생성하는 것을 추천드립니다.

<html>
<head>
  <link rel="stylesheet" href="top-bar-order-tracking.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
<link
    href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
    rel="stylesheet"
/>
</head>
<body>
  <div class="top-bar-order-tracking">
    <div class="tracking-content">
      <i class="ri-earth-line ri-2x" style="color: #FC6E1D;"></i>
      <p class="tracking-text">We now ship to worldwide</p>
    </div>
    <a href="https://checkout.delivered.co.kr/order/tracking/entry" class="order-tracking-link">Order Tracking</a>
  </div>
</body>
</html>