노코드 토스 결제 위젯 연동

<aside> 😀 토스페이먼츠 공식 기본 가이드

</aside>

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/77cb9ad3-5ead-4d3a-9d7e-f57311e62b53/webflow.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/77cb9ad3-5ead-4d3a-9d7e-f57311e62b53/webflow.png" width="40px" /> Webflow에서 사용하는 방법

</aside>

1. 결제 위젯 설치

Site setting - Custom Code - Head Code 부분에 설치 코드 삽입

Untitled

</head>

<meta charset="utf-8" />
<!-- 결제위젯 SDK 추가 -->
<script src="<https://js.tosspayments.com/v1/payment-widget>"></script>

2. 결제 위젯 그리기

결제 위젯 영역, 이용약관 영역, 결제하기 버튼 등 결제 위젯에 필요한 구성요소를 화면에 표현
선행 과제
- 결제 위젯 : payment-method 라는 id를 특정 div에 부여, 해당 div는 비워둘 것 → id를 기준으로 우리가 향후 작성할 커스텀 코드가 해당 영역에 결제위젯 화면을 구성해줌
- 이용약관 : agreement 라는 id를 특정 div에 부여, 해당 div는 비워들 것 → id를 기준으로 우리가 작성할 향후 작성할 커스텀 코드가 해당 영역에 이용약관 자세히보기 링크 화면을 구성해줌
- 결제하기 버튼 : 결제창을 띄울 버튼 요소에 payment-button이라는 id를 부여 → 해당 id의 버튼을 클릭 시, 결제 창이 띄워지며 본격적인 결제 이벤트로 넘어감

3. 결제 기능 동작을 위한 커스텀 코드 삽입

Site setting - custom code - Before </body> code 부분에 넣어도 되고, 결제 창이 존재할 Page setting - custom code - Before </body> code 넣어도 됨 (결제창이 존재하는 Page setting에 넣는 것을 더 추천함)
비회원 결제 시나리오

//[내 클라이언트 키], [내 상품 가격], [내 상품 식별자], [내 상품명] 등을 내가 원하는 값으로 바꿔서 코드 삽입할 것! (빨간색 표시)

<script>

const clientKey = "[내 클라이언트 키]" // 토스 페이먼츠 내 개발정보에서 확인
const customerKey = "ANONOYMOUS" // 내 상점의 고객을 식별하는 고유한 키, 비회원 결제로 구현시 ANONYMOUS라고 입력
const button = document.getElementById("payment-button")

// ------  결제위젯 초기화 ------ 
// 비회원 결제에는 customerKey 대신 ANONYMOUS를 사용하세요.
// const paymentWidget = PaymentWidget(clientKey, customerKey) // 회원 결제
const paymentWidget = PaymentWidget(clientKey, PaymentWidget.ANONYMOUS) // 비회원 결제

// ------  결제위젯 렌더링 ------ 
// 결제수단 UI를 렌더링할 위치를 지정합니다. `#payment-method`와 같은 CSS 선택자와 결제 금액 객체를 추가하세요.
// DOM이 생성된 이후에 렌더링 메서드를 호출하세요.
// <https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션>
// value: 뒤에 상품 가격을 숫자로 넣으세요.
paymentWidget.renderPaymentMethods("#payment-method", { value: [내 상품 가격] })

// ------  이용약관 렌더링 ------
// 이용약관 UI를 렌더링할 위치를 지정합니다. `#agreement`와 같은 CSS 선택자를 추가하세요.
// <https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자>
paymentWidget.renderAgreement('#agreement')

// ------  orderId를 생성하기 ------
// orderCode, orderName 정의
// orderCode, orderName은 나중에 결제승인 시, 어떤 상품 결제인지 확인하기 위한 식별자임
// orderCode는 영어, 숫자, '-,_'만 사용해야 함 (상품명이 한국어 일때를 대비하기 위한 식별자임)
const orderCode = '[내 상품 식별자]';  // 향후 Make와 연동을 위해 CMS 연동 시 CMS Item ID를 넣을것을 권장
const orderName = '[내 상품명]';

// orderId 생성 함수
function generateOrderId(orderCode) {
  // orderId에 사용될 문자열과 숫자를 정의합니다.
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const randomLength = 10; // 랜덤 문자열 및 숫자열의 길이를 정의합니다.

  let randomString = '';
  for (let i = 0; i < randomLength; i++) {
    // characters에서 랜덤하게 문자를 선택하여 randomString에 추가합니다.
    randomString += characters.charAt(Math.floor(Math.random() * characters.length));
  }

  // orderCode와 randomString을 결합하여 orderId를 생성합니다.
  const orderId = `${orderCode}_${randomString}`;

  return orderId;
}

// orderId 생성
let orderId = generateOrderId(orderCode);
console.log('orderId:', orderId);

// unique한 orderId 확인 및 유지
const uniqueOrderIds = [];

function isOrderIdUnique(orderId) {
  if (uniqueOrderIds.includes(orderId)) {
    return false; // orderId가 이미 존재하는 경우
  } else {
    uniqueOrderIds.push(orderId); // orderId를 uniqueOrderIds 배열에 추가합니다.
    return true; // orderId가 unique한 경우
  }
}

// orderId 유니크성 테스트
while (!isOrderIdUnique(orderId)) {
  orderId = generateOrderId(orderCode); // orderId가 unique하지 않은 경우 다시 생성합니다.
}
console.log('unique한 orderId:', orderId);

// ------ '결제하기' 버튼 누르면 결제창 띄우기 ------
// 더 많은 결제 정보 파라미터는 결제위젯 SDK에서 확인하세요.
// <https://docs.tosspayments.com/reference/widget-sdk#requestpayment결제-정보>
button.addEventListener("click", function () {
paymentWidget.requestPayment({
    orderId: orderId,            // 주문 ID(위 코드로 생성한 Unique한 orderId)
    orderName: orderName,        // 주문명(위 코드에서 지정한 상품명)
    successUrl: "[Make Webhook URL]",  // 결제에 성공하면 이동하는 페이지(직접 만들어주세요)
    failUrl: "[실패 시 이동하는 페이지 URL]",        // 결제에 실패하면 이동하는 페이지(직접 만들어주세요)
    //customerEmail: "[email protected]",  // 비회원 결제라 제외
    //customerName: "김토스"                    // 비회원 결제라 제외
      })
    })

</script>

회원 결제 시나리오 (Memberstack 활용)

//[내 클라이언트 키], [내 상품 가격], [내 상품 식별자], [내 상품명] 등을 내가 원하는 값으로 바꿔서 코드 삽입할 것! (빨간색 표시)

<script>

const clientKey = "[내 클라이언트 키]" // 토스 페이먼츠 내 개발정보에서 확인
const button = document.getElementById("payment-button")

//Memberstack에서 현재 로그인 된 회원 정보 가져오기
MemberStack.onReady.then(function(member) {
  if (member.loggedIn) {
  
		const customerKey = member["id"];
		const userEmail = member["email"];
		const userName = member["name"];  //name이라는 field가 Memberstack에 정의되어 있어야 함

// ------  결제위젯 초기화 ------ 
// 비회원 결제에는 customerKey 대신 ANONYMOUS를 사용하세요.
const paymentWidget = PaymentWidget(clientKey, customerKey) // 회원 결제
// const paymentWidget = PaymentWidget(clientKey, PaymentWidget.ANONYMOUS) // 비회원 결제

// ------  결제위젯 렌더링 ------ 
// 결제수단 UI를 렌더링할 위치를 지정합니다. `#payment-method`와 같은 CSS 선택자와 결제 금액 객체를 추가하세요.
// DOM이 생성된 이후에 렌더링 메서드를 호출하세요.
// <https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션>
// value: 뒤에 상품 가격을 숫자로 넣으세요.
paymentWidget.renderPaymentMethods("#payment-method", { value: [내 상품 가격] })

// ------  이용약관 렌더링 ------
// 이용약관 UI를 렌더링할 위치를 지정합니다. `#agreement`와 같은 CSS 선택자를 추가하세요.
// <https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자>
paymentWidget.renderAgreement('#agreement')

// ------  orderId를 생성하기 ------
// orderCode, orderName 정의
// orderCode, orderName은 나중에 결제승인 시, 어떤 상품 결제인지 확인하기 위한 식별자임
// orderCode는 영어, 숫자, '-,_'만 사용해야 함 (상품명이 한국어 일때를 대비하기 위한 식별자임)
const orderCode = '[내 상품 식별자]'; // 향후 Make와 연동을 위해 CMS Item ID를 넣을것을 권장
const orderName = '[내 상품명]';

// orderId 생성 함수
function generateOrderId(orderCode) {
  // orderId에 사용될 문자열과 숫자를 정의합니다.
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const randomLength = 10; // 랜덤 문자열 및 숫자열의 길이를 정의합니다.

  let randomString = '';
  for (let i = 0; i < randomLength; i++) {
    // characters에서 랜덤하게 문자를 선택하여 randomString에 추가합니다.
    randomString += characters.charAt(Math.floor(Math.random() * characters.length));
  }

  // orderCode, randomString, customerKey를 결합하여 orderId를 생성합니다.
	// customerKey는 추후 결제 승인 시 누가 결제했는지를 Make에서 확인하기 위해서 결합시킵니다.
  const orderId = `${orderCode}_${randomString}_${customerKey}`;

  return orderId;
}

// orderId 생성
let orderId = generateOrderId(orderCode);
console.log('orderId:', orderId);

// unique한 orderId 확인 및 유지
const uniqueOrderIds = [];

function isOrderIdUnique(orderId) {
  if (uniqueOrderIds.includes(orderId)) {
    return false; // orderId가 이미 존재하는 경우
  } else {
    uniqueOrderIds.push(orderId); // orderId를 uniqueOrderIds 배열에 추가합니다.
    return true; // orderId가 unique한 경우
  }
}

// orderId 유니크성 테스트
while (!isOrderIdUnique(orderId)) {
  orderId = generateOrderId(orderCode); // orderId가 unique하지 않은 경우 다시 생성합니다.
}

console.log('unique한 orderId:', orderId);

// ------ '결제하기' 버튼 누르면 결제창 띄우기 ------
// 더 많은 결제 정보 파라미터는 결제위젯 SDK에서 확인하세요.
// <https://docs.tosspayments.com/reference/widget-sdk#requestpayment결제-정보>
button.addEventListener("click", function () {
paymentWidget.requestPayment({
    orderId: orderId,            // 주문 ID(위 코드로 생성한 Unique한 orderId)
    orderName: orderName,        // 주문명(위 코드에서 지정한 상품명)
    successUrl: "[Make Webhook URL]",  // 결제에 성공하면 이동하는 페이지(직접 만들어주세요)
    failUrl: "[실패 시 이동하는 페이지 URL]",        // 결제에 실패하면 이동하는 페이지(직접 만들어주세요)
    customerEmail: userEmail,
    customerName: userName
      })
    })
	}
});

</script>