​
1. SDK 설치

SDK를 사용하기 위해 다음 스크립트를 HTML의 <head> 태그 내에 추가해주세요.

<head>
  <script src="https://sdk-checkout.delivered.co.kr/index.js"></script>
</head>

​
2. 메서드

글로벌 오더 통합형 SDK에서 제공하는 주요 메서드입니다.

​
orderInNewTab(products)

새로운 탭에서 글로벌 체크아웃을 호출하는 메서드입니다. products 파라미터에 주문 정보를 전달합니다.

orderInNewTab(products: CartProduct[]): Promise<void>

  • 파라미터

    • products (타입: CartProduct[]): 주문 정보 배열입니다.

  • 리턴 타입

    • Promise<void>: 주문 프로세스가 성공적으로 완료되면 resolve됩니다. 실패 시 에러가 reject됩니다.

​
Promise 사용

dkLibrary.orderInNewTab(products)
  .then(() => {
    console.log('주문 성공');
  })
  .catch((err) => {
    console.error('주문 실패:', err);
  })
  .finally(() => {
    console.log('주문 프로세스 완료');
  });

​
async/await 사용

try {
  await dkLibrary.orderInNewTab(products);
  console.log('주문 성공');
} catch (err) {
  console.error('주문 실패:', err);
}

​
orderInIframe(request)

iframe을 사용하여 글로벌 체크아웃을 호출하는 메서드입니다. request 파라미터는 주문 정보와 부모 URL을 포함합니다.

orderInIframe(request: IframeCartProductRequest): Promise<string>

  • 파라미터

    • request (타입: IframeCartProductRequest): 주문 정보와 부모 페이지 URL을 포함하는 객체입니다.

  • 리턴 타입

    • Promise<string>: iframe 로드에 사용할 URL을 반환합니다. 실패 시 에러가 reject됩니다.

​
Promise 사용

dkLibrary.orderInIframe({
  products: productsRequest,
  parentUrl: 'https://example.com/iframe-page?url=',
})
  .then((response) => {
    console.log('주문 성공');
    window.location.href = `https://example.com/iframe-page?url=${response}`;
  })
  .catch((err) => {
    console.error('주문 실패:', err);
  })
  .finally(() => {
    console.log('주문 프로세스 완료');
  });
​
parentUrl
string
required

iframe을 로드할 부모 페이지의 URL

​
async/await 사용

try {
  const response = await dkLibrary.orderInIframe({
    products: productsRequest,
    parentUrl: 'https://example.com/iframe-page?url=',
  });
  console.log('주문 성공');
  window.location.href = `https://example.com/iframe-page?url=${response}`;
} catch (err) {
  console.error('주문 실패:', err);
}
​
parentUrl
string
required

iframe을 로드할 부모 페이지의 URL

​
iframe을 노출할 페이지의 코드

const url = window.location.search.replace("?url=", "");
const eventListener = (e: MessageEvent<any>) => {
  if (e.origin !== "https://checkout.delivered.co.kr") return;

  const { type, payload } = e.data;

  if (type === "dk-global-order-go-to") {
    window.location.replace(payload);
  }
};

window.addEventListener("message", eventListener);
<iframe src={url} />

​
3. 주문 상품 정보 연동

​
Parameter 상세 설명

​
productRequest
ProductRequest
required

상품 정보

​
selectedOptions
SelectedOptionRequest[]
required

선택된 옵션 정보

​
Example 1: 옵션이 있는 상품

const productsRequest = [
  {
    productRequest: {
      sellerSecretKey: 'your_seller_secret_key',
      title: '프리미엄 티셔츠',
      price: 29900,
      originUrl: 'https://example.com/products/premium-tshirt',
      images: ['https://example.com/images/tshirt-front.jpg'],
      options: [
        { title: '색상: 흰색', price: 0 },
        { title: '색상: 검정', price: 1000 },
      ],
    },
    selectedOptions: [{ title: '색상: 흰색', quantity: 1 }],
  },
];

​
Example 2: 옵션이 없는 상품

const productsRequest = [
  {
    productRequest: {
      sellerSecretKey: 'your_seller_secret_key',
      title: '기본 티셔츠',
      price: 19900,
      originUrl: 'https://example.com/products/basic-tshirt',
      images: ['https://example.com/images/basic-tshirt.jpg'],
      options: [{ title: '', price: 0 }],
    },
    selectedOptions: [{ title: '', quantity: 2 }],
  },
];

​
Example 3: 조합형 옵션 상품

const productsRequest = [
  {
    productRequest: {
      sellerSecretKey: 'your_seller_secret_key',
      title: '클래식 청바지',
      price: 59000,
      originUrl: 'https://example.com/products/classic-jeans',
      images: ['https://example.com/images/jeans.jpg'],
      options: [
        { title: '색상: 파랑, 사이즈: 30', price: 0 },
        { title: '색상: 파랑, 사이즈: 32', price: 0 },
        { title: '색상: 검정, 사이즈: 30', price: 1000 },
        { title: '색상: 검정, 사이즈: 32', price: 1000 },
      ],
    },
    selectedOptions: [{ title: '색상: 검정, 사이즈: 32', quantity: 1 }],
  },
];

​
4. 주의 사항

  1. sellerSecretKey 의 사용

    • sellerSecretKey는 딜리버드 파트너스에서 제공한 판매자 고유값입니다.

    • 모든 ProductRequest 객체에는 반드시 sellerSecretKey가 포함되어야 합니다.

  2. productRequest.options와 selectedOptions의 사용

    • selectedOptions의 title은 반드시 productRequest의 options 중 동일한 title이 존재해야 합니다.

    • 상품에 옵션이 없는 경우에도 productRequest의 options 배열은 길이가 1 이상이어야 합니다. 빈 옵션을 추가하고, selectedOptions에도 title와 quantity를 포함하여 전달해야 합니다.