# 2. 결제창을 통해 빌링키 발급하기

{% hint style="warning" %}
**Deprecated**

이 문서는 더 이상 관리되지 않습니다.

[PortOne 개발자센터](https://developers.portone.io/)를 이용해주세요.
{% endhint %}

## 포트원 SDK를 통해 빌링키 발급 요청하기

`PortOne.requestIssueBillingKey()` 함수를 호출하면 빌링키를 발급하기 위한 결제창을 열 수 있습니다.

{% tabs %}
{% tab title="NPM으로 추가한 경우" %}

```javascript
import * as PortOne from "@portone/browser-sdk/v2";
function requestIssueBillingKey() {
  PortOne.requestIssueBillingKey({
    storeId: "store-9bf6076d-beef-4729-9521-ae66c14e0569",
    pgProvider: "PG_PROVIDER_TOSSPAYMENTS",
  });
}
```

{% endtab %}

{% tab title="<script> 태그로 추가한 경우" %}

```javascript
<script>
  function requestIssueBillingKey() {
    PortOne.requestIssueBillingKey({
      storeId: "store-9bf6076d-beef-4729-9521-ae66c14e0569",
      pgProvider: "PG_PROVIDER_TOSSPAYMENTS",
    });
  }
</script>
```

{% endtab %}
{% endtabs %}

## 빌링키 발급 응답 처리하기

빌링키가 성공적으로 발급되면 앞서 구현한 API로 빌링키를 전달합니다. API를 통해 빌링키로 즉시 결제를 진행하거나, 빌링키를 저장하여 정기결제를 예약할 수 있습니다.

{% tabs %}
{% tab title="ES6 (async-await)" %}

```javascript
async function issueAndSendBillingKey() {
  try {
    const response = await PortOne.requestIssueBillingKey({
      storeId: "store-9bf6076d-beef-4729-9521-ae66c14e0569",
      pgProvider: "PG_PROVIDER_TOSSPAYMENTS",
    });
    // 결제가 제대로 완료되지 않은 경우 에러 코드가 존재합니다
    if (response.code != null) {
      return alert(response.message);
    }
    await axios({
      url: MY_SEVER_URL + "/billings", // 앞서 구현한 결제 요청 API 혹은 저장 API
      method: "post",
      body: {
        billingKey: response.billingKey,
      }
    });
  } catch (error) {
    // 빌링키 발급 실패
  }
}
```

{% endtab %}

{% tab title="ES5 (then)" %}

```javascript
function issueAndSendBillingKey() {
  PortOne.requestIssueBillingKey({
    storeId: "store-9bf6076d-beef-4729-9521-ae66c14e0569",
    pgProvider: "PG_PROVIDER_TOSSPAYMENTS",
  }).then(function (response) {
    // 결제가 제대로 완료되지 않은 경우 에러 코드가 존재합니다
    if (response.code != null) {  
      return alert(response.message);
    }
    axios({
      url: MY_SEVER_URL + "/billings", // 앞서 구현한 결제 요청 API 혹은 저장 API
      method: "post",
      body: {
        billingKey: response.billingKey,
      },
    }).then(/* 구현한 API 응답을 구성한 대로 처리하세요 */);
  }).catch(function (error) {
    // 빌링키 발급 실패
  });
}
```

{% endtab %}
{% endtabs %}