라꿈•4d ago

카카오페이를 연동중인데 테스트 키로 결제를 테스트할때에는 서비스를 이용할수 없나요?

그리고, 아래와 같은 화면이 떴을때 닫기 버튼을 누르면 저희쪽 페이지로 가지 않고 토스페이먼츠쪽 페이지로 넘어갑니다. SPA방식의 사이트를 운영중이며 Promise 방식으로 처리중이긴 한데 이런 오류나 장애시에 페이지 이동 없이 동일 화면에서 해당 결제창을 닫을수 있는 방법이 있나요?

18 Replies

김차장•4d ago

UI 가 모바일뷰로 보이는데요 PC에서 모바일로 User Agent 를 넘기시나요? 모바일결제시에는 promise 를 사용할수 없습니다(PC만 지원)

라꿈OP•4d ago

김차장•4d ago

카카오페이는 계약한 상점아이디의 테스트키를 사용하셔야하는데요

김차장•4d ago

clientKey 를 어떤값을 사용하셨나요?

라꿈OP•4d ago

api 용 클라이언트키를 이용합니다.

김차장•4d ago

상점아이디도 알려주세요

라꿈OP•4d ago

adpiamall 입니다

김차장•4d ago

test_ck_mnRQoO 이렇게 시작하는 키를 사용하신거죠?

라꿈OP•4d ago

네

김차장•4d ago

테스트키 싱크작업을 지금 해놓았어요 다시 확인해보시겠어요?

라꿈OP•4d ago

네 이제 정상적으로 됩니다. 그런데 추가적인 질문으로 한 오류시 닫기 버튼 누를때 처리 방법이 궁금합니다.

김차장•4d ago

닫기버튼 누르면 failUrl 로 리다이렉트 될거에요

라꿈OP•4d ago

promise 방식에서는 failurl를 사용하지 않아서요

김차장•4d ago

그럼 catch 로 정의해주셔야해요

<head>
  <meta charset="utf-8" />
  <title>결제하기</title>
  <!-- 토스페이먼츠 결제창 SDK 추가 -->
  <script src="https://js.tosspayments.com/v1/payment"></script>
</head>
<body>
  <script>
    // ------ 클라이언트 키로 객체 초기화 ------
    var clientKey = "test_ck_Lex6BJGQOVDBb1pd6ma8W4w2zNbg";
    var tossPayments = TossPayments(clientKey);
    // ------ 결제창 띄우기 ------
    tossPayments
      .requestPayment("카드", {
        // 결제수단 파라미터 (카드, 계좌이체, 가상계좌, 휴대폰 등)
        // 결제 정보 파라미터
        // 더 많은 결제 정보 파라미터는 결제창 Javascript SDK에서 확인하세요.
        // https://docs.tosspayments.com/sdk/payment-js
        amount: 100, // 결제 금액
        orderId: 'ToTzN8HaV_2_Q5Y7BfONC', // 주문번호(주문번호는 상점에서 직접 만들어주세요.)
        orderName: "테스트 결제", // 구매상품
        customerName: "김토스", // 구매자 이름
        successUrl: "https://docs.tosspayments.com/guides/payment/test-success", // 결제 성공 시 이동할 페이지(이 주소는 예시입니다. 상점에서 직접 만들어주세요.)
        failUrl: "https://docs.tosspayments.com/guides/payment/test-fail", // 결제 실패 시 이동할 페이지(이 주소는 예시입니다. 상점에서 직접 만들어주세요.)
      })
      // ------결제창을 띄울 수 없는 에러 처리 ------
      // 메서드 실행에 실패해서 reject 된 에러를 처리하는 블록입니다.
      // 결제창에서 발생할 수 있는 에러를 확인하세요.
      // https://docs.tosspayments.com/reference/error-codes#결제창공통-sdk-에러
      .catch(function (error) {
        if (error.code === "USER_CANCEL") {
          // 구매자가 결제창을 닫았을 때 에러 처리
        } else if (error.code === "INVALID_CARD_COMPANY") {
          // 유효하지 않은 카드 코드에 대한 에러 처리
        }
      });
  </script>
</body>

<head>
  <meta charset="utf-8" />
  <title>결제하기</title>
  <!-- 토스페이먼츠 결제창 SDK 추가 -->
  <script src="https://js.tosspayments.com/v1/payment"></script>
</head>
<body>
  <script>
    // ------ 클라이언트 키로 객체 초기화 ------
    var clientKey = "test_ck_Lex6BJGQOVDBb1pd6ma8W4w2zNbg";
    var tossPayments = TossPayments(clientKey);
    // ------ 결제창 띄우기 ------
    tossPayments
      .requestPayment("카드", {
        // 결제수단 파라미터 (카드, 계좌이체, 가상계좌, 휴대폰 등)
        // 결제 정보 파라미터
        // 더 많은 결제 정보 파라미터는 결제창 Javascript SDK에서 확인하세요.
        // https://docs.tosspayments.com/sdk/payment-js
        amount: 100, // 결제 금액
        orderId: 'ToTzN8HaV_2_Q5Y7BfONC', // 주문번호(주문번호는 상점에서 직접 만들어주세요.)
        orderName: "테스트 결제", // 구매상품
        customerName: "김토스", // 구매자 이름
        successUrl: "https://docs.tosspayments.com/guides/payment/test-success", // 결제 성공 시 이동할 페이지(이 주소는 예시입니다. 상점에서 직접 만들어주세요.)
        failUrl: "https://docs.tosspayments.com/guides/payment/test-fail", // 결제 실패 시 이동할 페이지(이 주소는 예시입니다. 상점에서 직접 만들어주세요.)
      })
      // ------결제창을 띄울 수 없는 에러 처리 ------
      // 메서드 실행에 실패해서 reject 된 에러를 처리하는 블록입니다.
      // 결제창에서 발생할 수 있는 에러를 확인하세요.
      // https://docs.tosspayments.com/reference/error-codes#결제창공통-sdk-에러
      .catch(function (error) {
        if (error.code === "USER_CANCEL") {
          // 구매자가 결제창을 닫았을 때 에러 처리
        } else if (error.code === "INVALID_CARD_COMPANY") {
          // 유효하지 않은 카드 코드에 대한 에러 처리
        }
      });
  </script>
</body>

라꿈OP•4d ago

모바일에서는 promise를 사용할수 없다면 페이지가 PC와 모바일 둘다 작동해야 하는 구조라면 리다이렉트를 사용해야 하나요?

김차장•4d ago

네 맞습니다

라꿈OP•4d ago

무조건 중간에 거쳐가는 페이지가 있어야 하는군요

김차장•4d ago

네

카카오페이를 연동중인데 테스트 키로 결제를 테스트할때에는 서비스를 이용할수 없나요?

Did you find this page helpful?