Derrick•2d ago

빌링결제 연동

단건 결제 연동 성공 이후, 빌링 결제 연동을 하려고 하고 있습니다. 빌링 결제 위젯을 띄우려고 하는데, 기존 단건 결제 클라이언트키를 빌링결제 상점 아이디에 해당하는 클라이언트키로 대체하면 되는걸까요?

15 Replies

토스페이먼츠 BOT•2d ago

⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다

오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.

- 주문번호(orderId) : - 문의 내용 :

(img를 함께 첨부해주시면 도움이됩니다)

* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.

Minsu Kim•2d ago

결제위젯으로 연동하셨나요?

DerrickOP•2d ago

API 개별 연동키로 했습니다

Kimoon Lee•2d ago

네 빌링결제 clientkey 사용하시고 빌링 결제창 연동하시면 됩니다.

DerrickOP•2d ago

빌링결제 test 클라이언트키로 대체했는데, 연동이 되지 않습니다

Kimoon Lee•2d ago

어떤 MID 인지 알수 있을까요?

DerrickOP•2d ago

bill_qblacurkh입니다

Kimoon Lee•2d ago

결제창이 안뜨시나요?

DerrickOP•2d ago

네 빌링결제는 바로 카드번호 입력 UI가 떠야 하는 거 아닌가요? 현재는 빈 UI가 나옵니다

박의원•2d ago

기존 단건 결제 SDK 페이지에 클라이언트키만 빌링용으로 바꾸신건가요?

Kimoon Lee•2d ago

지금 해당 MID 의 테스트 키로 빌링창을 띄워보면 잘뜨는데요. 혹시 어떻게 연동하신건지 확인부탁드립니다.

DerrickOP•2d ago

넵 const clientKey = "test_ck_DnyRpQWGrN9w2D21qRvyVKwv1M9E"; const tossPayments = window.TossPayments(clientKey); const customerKey = ANONYMOUS; const widgets = tossPayments.widgets({ customerKey }); await widgets.setAmount({ currency: 'KRW', value: krwPrice }); // 중복 렌더링 방지 document.getElementById('payment-method').innerHTML = ''; document.getElementById('agreement').innerHTML = ''; await widgets.renderPaymentMethods({ selector: '#payment-method', variantKey: 'DEFAULT', }); await widgets.renderAgreement({ selector: '#agreement', variantKey: 'AGREEMENT', });

김차장•21h ago

빌링결제는 두가지 업무로 나뉘는데요 1. 빌링키 발급 2. 발급받은 빌링키로 승인 2. 는 backend 로 빌링키, 금액으로 API 통신만 하면 되는거라서 PG UI가 없어요 1. 을 하시는것으로 보이는데요 빌링키 발급은 위젯 variantKey 와는 전혀 상관없어요 아래 샘플코드의 기능을 어떤 버튼을 눌렀을때 동작시킬지만 고려하시면 됩니다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <!-- SDK 추가 -->
    <script src="https://js.tosspayments.com/v2/standard"></script>
  </head>
  <body>
    <!-- 카드 등록하기 버튼 -->
    <button class="button" style="margin-top: 30px" onclick="requestBillingAuth()">카드 등록하기</button>
    <script>
      // ------  SDK 초기화 ------
      // @docs https://docs.tosspayments.com/sdk/v2/js#토스페이먼츠-초기화
      const clientKey = "test_ck_Lex6BJGQOVDBb1pd6ma8W4w2zNbg";
      const customerKey = "79nqkhFAMLq1L2extEca7";
      const tossPayments = TossPayments(clientKey);
      // 회원 결제
      // @docs https://docs.tosspayments.com/sdk/v2/js#tosspaymentspayment
      const payment = tossPayments.payment({ customerKey });
      // 비회원 결제
      // const payment = tossPayments.payment({customerKey: TossPayments.ANONYMOUS})
      // ------ '카드 등록하기' 버튼 누르면 결제창 띄우기 ------
      // @docs https://docs.tosspayments.com/sdk/v2/js#paymentrequestpayment
      async function requestBillingAuth() {
        await payment.requestBillingAuth({
          method: "CARD", // 자동결제(빌링)는 카드만 지원합니다
          successUrl: window.location.origin + "/success", // 요청이 성공하면 리다이렉트되는 URL
          failUrl: window.location.origin + "/fail", // 요청이 실패하면 리다이렉트되는 URL
          customerEmail: "customer123@gmail.com",
          customerName: "김토스",
        });
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <!-- SDK 추가 -->
    <script src="https://js.tosspayments.com/v2/standard"></script>
  </head>
  <body>
    <!-- 카드 등록하기 버튼 -->
    <button class="button" style="margin-top: 30px" onclick="requestBillingAuth()">카드 등록하기</button>
    <script>
      // ------  SDK 초기화 ------
      // @docs https://docs.tosspayments.com/sdk/v2/js#토스페이먼츠-초기화
      const clientKey = "test_ck_Lex6BJGQOVDBb1pd6ma8W4w2zNbg";
      const customerKey = "79nqkhFAMLq1L2extEca7";
      const tossPayments = TossPayments(clientKey);
      // 회원 결제
      // @docs https://docs.tosspayments.com/sdk/v2/js#tosspaymentspayment
      const payment = tossPayments.payment({ customerKey });
      // 비회원 결제
      // const payment = tossPayments.payment({customerKey: TossPayments.ANONYMOUS})
      // ------ '카드 등록하기' 버튼 누르면 결제창 띄우기 ------
      // @docs https://docs.tosspayments.com/sdk/v2/js#paymentrequestpayment
      async function requestBillingAuth() {
        await payment.requestBillingAuth({
          method: "CARD", // 자동결제(빌링)는 카드만 지원합니다
          successUrl: window.location.origin + "/success", // 요청이 성공하면 리다이렉트되는 URL
          failUrl: window.location.origin + "/fail", // 요청이 실패하면 리다이렉트되는 URL
          customerEmail: "customer123@gmail.com",
          customerName: "김토스",
        });
      }
    </script>
  </body>
</html>

김차장•21h ago

https://docs.tosspayments.com/guides/v2/billing/integration 에 있는 내용이에요

자동결제(빌링) 결제창 연동하기 | 토스페이먼츠 ...

자동결제는 다른 이름으로 빌링, 또는 정기결제로 불리는 결제 방식입니다. 카드 등록창에서 구매자의 카드를 한 번만 등록하고 나면, 별도의 구매자 인증 없이 간편하게 결제를 요청할 수 있습니다.

Kimoon Lee•20h ago

@Derrick 님 지금 사용하신 코드는 결제위젯 코드입니다. 빌링은 위젯으로 연동할수없고, 지금 위에 있는 빌링 결제창 연동 코드를 사용하셔야 합니다.

빌링결제 연동

Did you find this page helpful?