춤추는망고
춤추는망고
PostsComments
TPToss payments 개발자 커뮤니티
Created by 춤추는망고 on 10/31/2024 in #❓┃연동개발-문의
@tosspayments/payment-sdk 결제 위젯 관련 문의입니다.
토스 페이먼츠 상점 페이지에서는 '결제 실패' 로 표기되는데, sdk 에서 처리된 redirect URL 은 successUrl 인 상황이 발생했습니다. 예시 orderId 값은 'client-advice-14448-12193-1729337857302' 입니다. (이외에도 다수 존재) 아래 내용은 프론트엔드 코드 일부입니다. 
useEffect(() => {
  switch (phase) {
    case "init":
      const { origin, pathname, search } = window.location;
      const query = new URLSearchParams(search);
      query.delete("orderId");
      query.delete("amount");
      loadTossPayments(process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY).then(({ requestPayment }) =>
        requestPayment("카드", {
          amount: Number(amount),
          orderId,
          orderName,
          successUrl: origin + pathname.replace("init", "success") + "?" + query,
          failUrl: origin + pathname.replace("init", "failure") + "?" + query,
        }).catch((error) => {
          console.error(error);
          alert("결제를 취소합니다.");
          window.history.go(-2);
        }),
      );
      return;
    case "success":
      router.push({ pathname: onSuccess, query: { ...router.query, paymentId: paymentKey } });
      return;
    case "failure":
      router.push({ pathname: onFailure, query: { ...router.query, errorCode, errorMessage } });
      return;
  }
}, []);
useEffect(() => {
  switch (phase) {
    case "init":
      const { origin, pathname, search } = window.location;
      const query = new URLSearchParams(search);
      query.delete("orderId");
      query.delete("amount");
      loadTossPayments(process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY).then(({ requestPayment }) =>
        requestPayment("카드", {
          amount: Number(amount),
          orderId,
          orderName,
          successUrl: origin + pathname.replace("init", "success") + "?" + query,
          failUrl: origin + pathname.replace("init", "failure") + "?" + query,
        }).catch((error) => {
          console.error(error);
          alert("결제를 취소합니다.");
          window.history.go(-2);
        }),
      );
      return;
    case "success":
      router.push({ pathname: onSuccess, query: { ...router.query, paymentId: paymentKey } });
      return;
    case "failure":
      router.push({ pathname: onFailure, query: { ...router.query, errorCode, errorMessage } });
      return;
  }
}, []);
26 replies
TPToss payments 개발자 커뮤니티
Created by 춤추는망고 on 7/19/2024 in #❓┃연동개발-문의
특정 상황에서 `@tosspayments/payment-sdk` 가 이상하게 동작합니다.
import { useEffect } from "react";

import { loadTossPayments } from "@tosspayments/payment-sdk";

import { PageProps } from "pages/_app";

const PaymentPage = ({ router }: PageProps) => {
  if (!router.isReady) return;

  const {
    phase,
    amount,
    orderId,
    orderName,
    onSuccess,
    onFailure,
    paymentKey,
    errorCode,
    errorMessage,
  } = router.query as PaymentPageQuery;

  useEffect(() => {
    switch (phase) {
      case "init":
        const { origin, pathname, search } = window.location;
        const query = new URLSearchParams(search);
        query.delete("orderId");
        query.delete("amount");
        loadTossPayments(process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY).then(({ requestPayment }) =>
          requestPayment("카드", {
            amount: Number(amount),
            orderId,
            orderName,
            successUrl: origin + pathname.replace("init", "success") + "?" + query,
            failUrl: origin + pathname.replace("init", "failure") + "?" + query,
          }).catch((error) => {
            console.error(error);
            alert("결제를 취소합니다.");
            window.history.go(-2);
          }),
        );
        return;
      case "success":
        router.push({ pathname: onSuccess, query: { ...router.query, paymentId: paymentKey } });
        return;
      case "failure":
        router.push({ pathname: onFailure, query: { ...router.query, errorCode, errorMessage } });
        return;
    }
  }, []);

  return null;
};
import { useEffect } from "react";

import { loadTossPayments } from "@tosspayments/payment-sdk";

import { PageProps } from "pages/_app";

const PaymentPage = ({ router }: PageProps) => {
  if (!router.isReady) return;

  const {
    phase,
    amount,
    orderId,
    orderName,
    onSuccess,
    onFailure,
    paymentKey,
    errorCode,
    errorMessage,
  } = router.query as PaymentPageQuery;

  useEffect(() => {
    switch (phase) {
      case "init":
        const { origin, pathname, search } = window.location;
        const query = new URLSearchParams(search);
        query.delete("orderId");
        query.delete("amount");
        loadTossPayments(process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY).then(({ requestPayment }) =>
          requestPayment("카드", {
            amount: Number(amount),
            orderId,
            orderName,
            successUrl: origin + pathname.replace("init", "success") + "?" + query,
            failUrl: origin + pathname.replace("init", "failure") + "?" + query,
          }).catch((error) => {
            console.error(error);
            alert("결제를 취소합니다.");
            window.history.go(-2);
          }),
        );
        return;
      case "success":
        router.push({ pathname: onSuccess, query: { ...router.query, paymentId: paymentKey } });
        return;
      case "failure":
        router.push({ pathname: onFailure, query: { ...router.query, errorCode, errorMessage } });
        return;
    }
  }, []);

  return null;
};
고객이 결제 페이지에 진입하자마자 "결제를 취소합니다" 문구가 표시된 dialog 를 보게 된다고 합니다. amount 도 양수이고, order_id 와 order_name의 길이/구성 제한도 지켰고, success_url 과 failure_url 도 정상입니다. 제가 직접 브라우저(Windows, MacOS, iOS, Android), 앱(flutter 웹뷰 iOS/Android) 으로 테스트할 때에도 전혀 문제가 없었습니다. 혹시 브라우저 버젼에 따라, requestPayment() 메서드 실행 자체에 실패하는 경우도 있나요?
22 replies
TPToss payments 개발자 커뮤니티
Created by 춤추는망고 on 12/11/2023 in #❓┃연동개발-문의
정기결제 스케쥴러 동작 중 오류가 발생합니다.
카드 자동결제 승인API 를 호출했는데, TossPaymentsError: 지원되지 않는 카드 종류입니다. 오류가 발생합니다. 결제 수단 등록 이후에 최초 결제에 성공하는 것으로 보아서는 결제 동작 자체에는 문제가 없다고 판단이 되는데요. 관련해서 어떤 문제가 있는지 확인하고 싶습니다.
13 replies
TPToss payments 개발자 커뮤니티
Created by 춤추는망고 on 12/5/2023 in #❓┃연동개발-문의
자동결제(빌링) 서비스를 이용하기 위해, 카드 등록을 하려고 하는데, 제공받은 test key 를 사용하면 문자인증이 오지 않습니다.
url : https://apigw-sandbox.tosspayments.com/payment-gateway-window/open/pg-window/v1/sms-authentication/issue method : POST payload : 
{
    "encryptedDateOfBirth": some_data,
    "encryptedPersonName": some_data,
    "encryptedPhoneNumber": some_data,
    "gender": "1",
    "mobileCarrier": "KT"
}
{
    "encryptedDateOfBirth": some_data,
    "encryptedPersonName": some_data,
    "encryptedPhoneNumber": some_data,
    "gender": "1",
    "mobileCarrier": "KT"
}
response : 
{
    "result": "SUCCESS",
    "data": {
        "isSuccess": true,
        "expiredAt": "2023-12-05T18:12:36+09:00"
    },
    "error": null
}
{
    "result": "SUCCESS",
    "data": {
        "isSuccess": true,
        "expiredAt": "2023-12-05T18:12:36+09:00"
    },
    "error": null
}
문자인증 버튼 클릭시 확인되는 요청에 대한 정보입니다. 원래 test key 로는 카드 등록 요청을 할 수 없나요?
6 replies
TPToss payments 개발자 커뮤니티
Created by 춤추는망고 on 8/22/2023 in #❓┃연동개발-문의
토스 페이먼츠 문서에 있는 내용으로 개발 환경에서 테스트하고 있는데, 오류가 발생합니다.
빌링키 발급 관련해서 테스트를 진행하고 있는데, 403 오류가 발생해서 문의 드립니다. POST /v1/billing/authorizations/issue 1. 문서 상에 있는 테스트 키를 사용하고 있습니다. 2. 로컬 환경에서는 문제 없이 동작하는데, 개발 환경에서 문제가 발생합니다. 3. 403 오류임을 확인했으나, 응답 페이로드가 문서에 존재하지 않습니다. 아래는 403 오류 응답의 페이로드 내용입니다. '<html>\r\n' + '<head><title>403 Forbidden</title></head>\r\n' + '<body>\r\n' + '<center><h1>403 Forbidden</h1></center>\r\n' + '</body>\r\n' + '</html>\r\n' 추가적으로 필요한 정보는 바로 제공해드리겠습니다. 해당 문제에 관해서 안내 부탁드립니다.
75 replies