Search
K

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

PG사가 제공하는 일반 결제창에 고객이 카드정보를 입력하여 빌링키를 발급 받을수 있습니다.
Deprecated
이 문서는 더 이상 관리되지 않습니다.
PortOne 개발자센터를 이용해주세요.

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

PortOne.requestIssueBillingKey() 함수를 호출하면 빌링키를 발급하기 위한 결제창을 열 수 있습니다.
NPM으로 추가한 경우
<script> 태그로 추가한 경우
import * as PortOne from "@portone/browser-sdk/v2";
function requestIssueBillingKey() {
PortOne.requestIssueBillingKey({
storeId: "store-9bf6076d-beef-4729-9521-ae66c14e0569",
pgProvider: "PG_PROVIDER_TOSSPAYMENTS",
});
}
<script>
function requestIssueBillingKey() {
PortOne.requestIssueBillingKey({
storeId: "store-9bf6076d-beef-4729-9521-ae66c14e0569",
pgProvider: "PG_PROVIDER_TOSSPAYMENTS",
});
}
</script>

빌링키 발급 응답 처리하기

빌링키가 성공적으로 발급되면 앞서 구현한 API로 빌링키를 전달합니다. API를 통해 빌링키로 즉시 결제를 진행하거나, 빌링키를 저장하여 정기결제를 예약할 수 있습니다.
ES6 (async-await)
ES5 (then)
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) {
// 빌링키 발급 실패
}
}
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) {
// 빌링키 발급 실패
});
}