> ## Documentation Index
> Fetch the complete documentation index at: https://developers-partners.delivered.co.kr/llms.txt
> Use this file to discover all available pages before exploring further.
# 글로벌체크아웃 사용하기
> 글로벌체크아웃 기능을 웹사이트에서 제공하기 위해 컴포넌트를 추가하는 샘플 코드를 제공합니다.
## 1. 설치 가이드
### 1-1. 사용 방법
**Order Action 기능**은 반드시 가맹점 웹사이트의 **상품 페이지와 장바구니 페이지**에 생성해야합니다.
**Order Tracking 기능**은 가맹점 웹사이트의 **메인 페이지**에 생성하는 것을 추천드립니다.
각 컴포넌트는 두 가지 방식 중 하나를 선택하여 설치할 수 있습니다. 프로젝트의 구조나 선호도에 따라 적합한 방식을 선택하세요.
* **인라인 스타일 버전**: 별도의 CSS 파일 없이 HTML 파일 하나로 구성되어 있습니다.
* **HTML/CSS 분리 버전**: HTML과 CSS를 분리하여 관리할 수 있습니다.
### 1-2. 맞춤 설정
* **스타일 수정**: 브랜드 아이덴티티에 맞게 CSS를 수정하여 버튼이나 배경색 등을 변경할 수 있습니다.
* **로고 적용**: 컴포넌트 내에 있는 로고를 사용하기 위해 [🖼️ : 딜리버드 파트너스 로고](https://docs.google.com/uc?export=download\&id=1Yf3xxYK2ddDEIP4y4p27i8GNb3PIClzB) 링크를 통해 다운로드 받은 이미지를 적용해주세요.
* **동적 데이터 연결**: 샘플 코드의 정적 데이터 부분을 실제 사이트의 동적 데이터와 연결해야 합니다.
* **해외 사용 설정**: 글로벌체크아웃을 해외 사용자인 경우에만 로드하는 경우, [해외 사용 설정하기](/site-setting) 문서를 참고해주세요.
***
## 2. Order Action 컴포넌트
**해당 컴포넌트는 이해를 돕기 위한 샘플입니다.**
링크와 함수가 가이드에 맞게 동일하게 동작한다면, 스타일은 자유롭게 수정하여 사용 가능합니다.
### 2-1. 기능
* 상품 페이지에서 글로벌체크아웃 주문서 생성 기능을 제공하는 버튼을 표시합니다.
* 버튼 클릭 시, 상품 정보를 전달하여 글로벌체크아웃 창이 나타나도록 합니다.
* 상품 정보를 전달하는 방법은 [통합형 SDK 연동하기](/integration-service/connecting)를 참고해주세요.
**Order Action 기능**은 반드시 가맹점 웹사이트의 **상품 페이지와 장바구니 페이지**에 생성해야합니다.
### 2-2. 새 창 방식 (New Tab) 컴포넌트 코드
* 버튼 클릭 시, 글로벌체크아웃이 새로운 브라우저 탭에서 열립니다.
* `dkLibrary.orderInNewTab()` 메서드를 사용합니다.
```html HTML theme={null}
### 2-1. 기능
* 상품 페이지에서 글로벌체크아웃 주문서 생성 기능을 제공하는 버튼을 표시합니다.
* 버튼 클릭 시, 상품 정보를 전달하여 글로벌체크아웃 창이 나타나도록 합니다.
* 상품 정보를 전달하는 방법은 [통합형 SDK 연동하기](/integration-service/connecting)를 참고해주세요.
* **설치 조건**: 글로벌체크아웃 SDK 설치 완료
### 3-1. 기능
* 메인 페이지 상단에 "Order Tracking" 링크와 "We now ship to worldwide" 메시지를 표시합니다.
* 링크 클릭 시, [주문 조회](https://checkout.delivered.co.kr/order/tracking/entry) 페이지로 이동하여 사용자가 주문 상태를 확인할 수 있습니다.
### 3-2. 컴포넌트 코드