iframe/popup 방식의 결과처리
windowType 파라미터에서 iframe을 선택한 경우의 결과 처리 방법을 안내합니다.
iframe 이란?
다른 HTML 페이지를 현재 페이지에 포함시킬 수 있는 요소입니다.
자세한 내용은 MDN iframe 문서를 참고해주세요.
PortOne.requestPayment()
함수의 반환 값을 이용해 결제 트랜잭션의 결과를 얻을 수 있습니다.
반환 값의 타입은 Promise
객체이므로 프로젝트 설정에 따라 적절한 방법으로 응답을 처리해주세요.
async function requestPaymentAndLogResult() {
const response = await PortOne.requestPayment({ /* 객체 생략 */ });
console.log(response); // 응답 객체가 개발자 도구 - 콘솔에 출력됩니다.
}
function requestPaymentAndLogResult() {
const response = PortOne.requestPayment({ /* 객체 생략 */ })
.then(function (response) {
console.log(response); // 응답 객체가 개발자 도구 - 콘솔에 출력됩니다.
});
}
결제는 사용자의 페이지에서 이루어지기 때문에 금액이 위변조될 가능성이 있습니다.
따라서 가맹점 서버에 결제검증 API를 구현하고, 이를 호출해야 실제로 올바른 금액이 결제되었는지 확인할 수 있습니다.
결제검증 API를 이용해 결제완료 처리하기
3. 결제검증 API 구현하기에서 구현한 서버 API를 사용해 결제완료 처리하기를 구현할 수 있습니다.
async function requestPayment() {
const response = await PortOne.requestPayment({ /* 객체 생략 */ });
// 결제가 제대로 완료되지 않은 경우 에러 코드가 존재합니다
if (response.code != null) {
return alert(response.message);
}
const validation = await axios({
url: MY_SERVER_URL + "/payments/complete", // 앞서 구현한 API 주소
method: "POST",
body: {
txId: repsonse.txId,
paymentId: response.paymentId,
},
});
// 결제검증 API의 응답을 구성한 대로 결제결과를 처리하세요!
}
function requestPaymentAndLogResult() {
const response = PortOne.requestPayment({ /* 객체 생략 */ })
.then(function (response) {
// 결제가 제대로 완료되지 않은 경우 에러 코드가 존재합니다
if (response.code != null) {
return alert(response.message);
}
axios({
url: MY_SERVER_URL + "/payments/complete", // 앞서 구현한 API 주소
method: "POST",
body: {
txId: repsonse.txId,
paymentId: response.paymentId,
},
}).then(function (validation) {
// 결제검증 API의 응답을 구성한 대로 결제결과를 처리하세요!
})
});
}
결제는 사용자의 페이지에서 이루어지기 때문에 금액이 위변조될 가능성이 있으니 위 단계를 꼭 진행해주세요.
전체적인 결제결과 처리(가상계좌 입금 확인 등)는 웹훅(Webhook)을 연동하여 수신되는 데이터를 기준으로 처리하셔야 결제결과 누락없이 결과처리를 완료하실 수 있습니다.
결제금액의 위변조 검증 이유
결제 요청은 클라이언트 환경에서 이루어지기 때문에 클라이언트 스크립트를 조작해 금액을 위 변조하여 결제를 요청할 수 있습니다. 따라서 결제완료 후 처음 요청했던 금액과 실제로 결제된 금액을 반드시 비교해야 합니다.
예를 들어, 가격이 100,000원인 상품을 결제할 때 amount: 100000
으로 결제요청을 하게 되는데, 공격자가 스크립트를 조작하여 해당 속성을 실제 금액보다 낮은 값으로 변조할 수 있습니다. 클라이언트에서의 스크립트 조작은 원천적으로 막을 수 없기 때문에 결제 후 서버에서 결제금액의 위변조 여부를 반드시 검증해야 합니다.