티스토리 뷰

카테고리 없음

워드프레스(WooCommerce)에서 엠샵 플러그인을 사용하여 토스페이먼츠 결제 모듈 설치 및 설정하는 방법

A1A2 2025. 2. 28. 16:32
반응형

워드프레스(WooCommerce)에서 엠샵 플러그인을 사용하여 토스페이먼츠 결제 모듈 설치 및 설정하는 과정

✅ WooCommerce 기반의 워드프레스 쇼핑몰에서 토스페이먼츠(Toss Payments) 결제 모듈을 연동하는 방법
✅ 엠샵 결제 플러그인을 활용하여 카드 결제, 계좌이체, 가상계좌 등 다양한 결제 수단을 지원 가능

1️⃣ 사전 준비 (필수 확인 사항)

✔ 요구사항 확인

  • 워드프레스(WP) + WooCommerce(우커머스) 쇼핑몰이 설치되어 있어야 함
  • 엠샵 결제 플러그인(MShop Payment for WooCommerce) 설치 필요
  • 토스페이먼츠(Toss Payments) 가맹점 가입 및 API Key 발급 필요
  • PHP 7.4 이상 & SSL(HTTPS) 적용 필수 (보안상의 이유)

2️⃣ 토스페이먼츠 가맹점 가입 및 API 키 발급

✔ 토스페이먼츠 가입 & 결제 API 발급 과정

  1. 토스페이먼츠 가맹점 가입
    • 사업자 계정으로 가입 후 전자결제(PG) 신청
    • 카드사 심사 완료 후 결제 서비스 활성화
  2. API Key 발급
    • 토스페이먼츠 관리자 페이지 로그인
    • "설정 > 시크릿 키 발급" 메뉴에서 API Key 확인
    • 테스트용 & 실사용 API 키 별도로 발급됨
    • 테스트 환경에서는 샌드박스 모드로 진행 가능

📌 API Key는 엠샵 플러그인에서 필요하므로 반드시 저장해 두기!

3️⃣ 워드프레스(WP)에서 엠샵 결제 플러그인 설치

✅ 엠샵(MShop) 결제 플러그인을 설치하여 WooCommerce와 토스페이먼츠를 연결

✔ 플러그인 설치 방법

  1. 워드프레스 관리자 페이지(WP-Admin) 접속
  2. "플러그인 > 새로 추가" 클릭
  3. 검색창에 "엠샵 결제 플러그인" (MShop Payment for WooCommerce) 입력
  4. 설치 후 활성화

📌 엠샵 결제 플러그인은 기본 무료이지만, 일부 고급 기능은 유료 플랜 필요할 수도 있음.

4️⃣ 토스페이먼츠 결제 모듈 설정 (엠샵 플러그인 연동)

✅ 엠샵 결제 플러그인을 설정하여 토스페이먼츠 API 연동

✔ 설정 과정

  1. 워드프레스 관리자(WP-Admin) → WooCommerce → 설정 → 결제(Payments)
  2. "엠샵 PG 설정" 메뉴 클릭
  3. "결제 수단 추가"에서 "토스페이먼츠" 선택
  4. 발급받은 API Key 입력
    • 가맹점 ID (MID) 입력
    • Secret Key 입력
    • 테스트 모드 설정 (Sandbox 환경에서 테스트 가능)

✔ 결제 수단 활성화

✅ 토스페이먼츠에서 제공하는 결제 수단을 선택하여 활성화 가능

  • 카드 결제 (신용카드 / 체크카드)
  • 가상계좌 (무통장입금)
  • 실시간 계좌이체
  • 간편결제 (토스, 네이버페이, 삼성페이 등)

📌 원하는 결제 방식 활성화 후 "저장" 버튼 클릭!

5️⃣ 결제 테스트 및 실사용 전환

✅ 테스트 환경에서 정상 작동하는지 확인 후, 실제 운영 환경으로 전환

✔ 테스트 모드에서 결제 확인

  1. 테스트 모드 활성화
  2. 테스트 카드번호(토스페이먼츠 샌드박스 제공)로 결제 진행
  3. WooCommerce 주문 관리에서 결제 상태 확인

📌 테스트 모드에서 성공적으로 결제 완료되는지 확인 필수!

✔ 실사용 모드 전환

✅ 테스트 완료 후, 실 결제 환경으로 전환하는 방법

  1. 엠샵 결제 플러그인 설정에서 "테스트 모드 비활성화"
  2. 토스페이먼츠 실사용 API Key 입력
  3. 실제 카드로 결제 테스트 진행 후 정상 동작 확인

📌 테스트 환경에서는 실제 결제가 이루어지지 않지만, 실사용 환경에서는 결제 발생 → 반드시 신중하게 설정!

6️⃣ 결제 UI & UX 최적화

✅ 결제 프로세스가 고객에게 편리하도록 WooCommerce 체크아웃 페이지를 최적화

✔ 사용자 경험 개선 방법

  • 결제 페이지에서 간편결제(Toss, 네이버페이 등) 활성화
  • "체크아웃 페이지 간소화" (필요 없는 입력 항목 제거)
  • 모바일 최적화 UI 적용 (반응형 디자인 필수)

📌 결제 과정이 길어지면 이탈률이 높아지므로, 가능한 한 간결하게 구성하는 것이 중요!

7️⃣ 문제 발생 시 해결 방법 (FAQ)

✔ 결제 오류 해결 방법

문제해결 방법

결제 페이지에서 "결제 수단을 사용할 수 없음" 오류 발생 - API Key 입력이 올바른지 확인
- PG사(토스페이먼츠)에서 결제 서비스가 활성화되었는지 확인
테스트 결제는 성공했는데 실결제가 안 됨 - 실사용 API Key가 입력되었는지 확인
- "테스트 모드"가 비활성화되었는지 확인
결제 후 WooCommerce 주문 상태가 업데이트되지 않음 - 엠샵 플러그인 설정에서 "자동 주문 상태 업데이트" 활성화

📌 필요할 경우 엠샵 고객센터 또는 토스페이먼츠 지원팀에 문의!

📌 결론: WooCommerce + 엠샵 플러그인을 활용한 토스페이먼츠 결제 연동 요약

1️⃣ 토스페이먼츠 가맹점 가입 & API Key 발급
2️⃣ 워드프레스에서 엠샵 결제 플러그인 설치 & 활성화
3️⃣ WooCommerce 결제 설정에서 토스페이먼츠 연동
4️⃣ 테스트 모드에서 샌드박스 결제 테스트 진행
5️⃣ 실제 결제 모드로 전환 후 최종 테스트
6️⃣ 체크아웃 UI & UX 최적화하여 고객 결제 경험 개선

📌 이 과정을 완료하면 WooCommerce에서 안전하게 토스페이먼츠 결제 시스템을 사용할 수 있음! 🚀

반응형