# JavaScript SDK 설정 및 초기화

point3 JavaScript SDK 설치와 초기화 방법을 알아봅니다. 스크립트 태그 또는 npm 패키지로 SDK를 추가하고, point3
`client_id`로 `Point3` 객체를 초기화하면 결제 연동을 시작할 수 있습니다.

## SDK 설치

### HTML

HTML 페이지에 스크립트 태그로 point3 SDK 파일을 추가합니다. 스크립트가 로드되면 전역 객체인
`window.Point3`를 사용할 수 있습니다.

```html
<script src="https://widget.point3.io/v2/standard"></script>
```

HTML 방식에는 npm 패키지 설치와 `import`가 필요하지 않습니다. SDK 주소에 `.js`를 추가하지 마세요.

### 패키지 매니저

point3 SDK는 토스페이먼츠 JavaScript SDK의 npm 로더와 호환됩니다. 현재 호환이 확인된 버전을 버전 고정으로 설치하세요.

```bash title="npm" icon="npm"
npm install --save-exact @tosspayments/tosspayments-sdk@2.7.1
```

```bash title="pnpm" icon="pnpm"
pnpm add --save-exact @tosspayments/tosspayments-sdk@2.7.1
```

```bash title="bun" icon="bun"
bun add --exact @tosspayments/tosspayments-sdk@2.7.1
```

## SDK 초기화

SDK를 초기화하면 반환된 객체로 point3 결제 서비스를 사용할 수 있습니다. HTML에서는 전역 `Point3()` 함수를 호출하고, 패키지로 설치했다면 `loadTossPayments()`의 `src`에 point3 SDK 주소를 지정합니다.

```js title="HTML"
const clientId = 'client-...'
const point3 = Point3(clientId)
```

```js title="패키지 (JavaScript)"
import { loadTossPayments } from '@tosspayments/tosspayments-sdk'

const clientId = 'client-...'
const point3 = await loadTossPayments(clientId, {
  src: 'https://widget.point3.io/v2/standard?loader=toss'
})
```

```ts title="패키지 (TypeScript)"
import { loadTossPayments } from '@tosspayments/tosspayments-sdk'

const clientId: string = 'client-...'
const point3 = await loadTossPayments(clientId, {
  src: 'https://widget.point3.io/v2/standard?loader=toss'
})
```

<Callout type="info" title="point3 client_id를 사용하세요">
  `clientId`에는 point3에서 발급받은 `client-...` 형식의 `client_id`를 입력합니다.
</Callout>

#### 파라미터

| 이름       | 필수 여부 | 타입     | 설명                                                       |
| ---------- | --------- | -------- | ---------------------------------------------------------- |
| `clientId` | 필수      | `string` | point3에서 발급받은 `client-...` 형식의 `client_id`입니다. |

#### 응답

초기화된 `point3` 객체를 반환합니다.

| 이름      | 타입       | 설명                                                                                       |
| --------- | ---------- | ------------------------------------------------------------------------------------------ |
| `widgets` | `function` | 결제를 초기화합니다. 자세한 사용법은 [SDK 결제 연동](/sdk-payment-window)을 참고하세요. |

<Callout type="info" title="테스트도 운영 환경에서 진행합니다">
  point3는 별도 테스트 환경을 제공하지 않습니다. SDK 주소는 항상 `https://widget.point3.io/v2/standard`를 사용하고, 연동을
  확인할 때는 소액 결제로 테스트한 뒤 결제를 취소하세요. 자세한 방법은 [라이브 전환 체크리스트](/go-live-checklist#소액-결제로-테스트하기)를
  참고하세요.
</Callout>