iframe 방식의 결과처리

windowType 파라미터에서 iframe을 선택한 경우의 결과 처리 방법을 안내합니다.

Deprecated

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

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) {
      console.log(response); // 응답 객체가 개발자 도구 - 콘솔에 출력됩니다.
    });
}

결제는 사용자의 페이지에서 이루어지기 때문에 금액이 위변조될 가능성이 있으니 위 단계를 꼭 진행해주세요.

전체적인 결제결과 처리(가상계좌 입금 확인 등)는 웹훅(Webhook)을 연동하여 수신되는 데이터를 기준으로 처리하셔야 결제결과 누락없이 결과처리를 완료하실 수 있습니다.

결제금액의 위변조 검증 이유

결제 요청은 클라이언트 환경에서 이루어지기 때문에 클라이언트 스크립트를 조작해 금액을 위 변조하여 결제를 요청할 수 있습니다. 따라서 결제완료 후 처음 요청했던 금액과 실제로 결제된 금액을 반드시 비교해야 합니다.

예를 들어, 가격이 100,000원인 상품을 결제할 때 amount: 100000으로 결제요청을 하게 되는데, 공격자가 스크립트를 조작하여 해당 속성을 실제 금액보다 낮은 값으로 변조할 수 있습니다. 클라이언트에서의 스크립트 조작은 원천적으로 막을 수 없기 때문에 결제 후 서버에서 결제금액의 위변조 여부를 반드시 검증해야 합니다.

Previous4. 결제완료 처리하기 (클라이언트)Nextredirect 방식의 결과처리

Last updated 1 year ago

Was this helpful?

async function requestPaymentAndLogResult() { const response = await PortOne.requestPayment({ /* 객체 생략 */ }); console.log(response); // 응답 객체가 개발자 도구 - 콘솔에 출력됩니다. }

function requestPaymentAndLogResult() { const response = PortOne.requestPayment({ /* 객체 생략 */ }) .then(function (response) { console.log(response); // 응답 객체가 개발자 도구 - 콘솔에 출력됩니다. }); }