LogoLogo
  • 포트원 서비스 업데이트 안내
    • 관리자콘솔 릴리즈노트
      • 2023-05-08 업데이트
      • 2023-04-24 업데이트
    • API/SDK 릴리즈노트
      • 2023-05-08 업데이트
      • 2023-04-24 업데이트
  • 🧩포트원 결제 연동 Docs
    • 🚗GET STARTED
  • 🛫결제 연동 준비하기
    • 🖥️1. 포트원 회원가입 하기
    • 🧷2. PG정보 설정하기
      • 🏢Payment Gateway
        • ⌨️NHN KCP 설정
        • ⌨️KG 이니시스 설정
        • ⌨️NICE페이먼츠 설정
        • ⌨️토스페이먼츠 설정
        • ⌨️KSNET 설정
        • ⌨️KICC 설정
        • ⌨️페이먼트월 설정
        • ⌨️다우 설정
        • ⌨️다날 설정
        • ⌨️JTNET 설정
        • ⌨️핵토파이낸셜 설정
          • 🚩내통장 결제
        • ⌨️KG모빌리언스 설정
        • ⌨️스마트로 설정
        • ⌨️페이팔 설정
        • ⌨️페이팔 SPB 일반결제 설정
        • ⌨️엑심베이 설정
        • ⌨️블루월넛 설정
      • ⛺간편 결제사
        • ⌨️네이버페이(결제형) 설정
        • ⌨️카카오페이 설정
        • ⌨️페이코 설정
        • ⌨️알리페이 설정
        • ⌨️토스간편결제 설정
    • ✔️3. 연동정보 확인하기
  • 결제창 연동하기
    • 🖥️인증결제 연동하기
      • 📒인증결제 정의
      • 🌠1. 포트원 라이브러리 추가
      • 💡2. 객체 초기화 하기
      • 🪧3. 결제 요청하기
      • 🎁4. 결제결과 처리하기
        • 🪟iframe 결제창 결과처리
        • 🖼️redirect 결제창 결과처리
      • 🔦5. 결제정보 검증하기
        • ⬅️결제정보 사전 검증하기
        • ➡️결제정보 사후 검증하기
      • 🛬6. 결제완료 처리하기
    • ⏰비 인증결제 연동하기
      • 🏍️빌링키 결제 요청하기
        • 🖱️REST API 이용하기
        • 🛡️PG결제창 이용하기
      • 💳카드정보를 이용한 키인결제
      • 🪧빌링키를 이용한 정기결제
    • 💸결제취소(환불) 연동하기
      • 💷가상계좌 환불하기
  • 결제결과 연동하기
    • ⚒️웹훅(Webhook) 연동하기
    • ✔️가상결제 입금통보 설정
  • 기타 서비스 연동하기
    • 📱휴대폰 본인인증 연동하기
      • 📔1. 본인인증 준비하기
      • 🥏2. 본인인증창 호출하기
      • 🚚3. 인증 완료정보 전달하기
      • 🤹4. 인증정보 조회 및 활용하기
    • 🚚통합인증 연동하기
      • 📒통합인증 준비하기
      • 🥏통합인증 요청하기
      • 🚚인증 완료정보 전달하기
      • 🤹인증정보 조회 및 활용하기
    • 💳신용카드 본인인증 연동
      • 📒1. 본인인증 준비하기
      • 🥏2. 본인인증 요청하기
      • 🚚3. 인증 완료정보 전달하기
      • 🤹4. 인증정보 조회 및 활용하기
    • 💻결제 URL 생성하기
    • 🛩️버짓핸들러 연동하기
    • 📟네이티브 모바일 SDK
  • TIP
    • 🌽결제금액 면세 적용방법
    • ✅오픈 전 체크사항
    • 🔏Confirm Process
    • 🎼포트원 결제 FLOW
    • 🎈Agency & Tier 란?
    • 📦PG사별 빌링키 획득 규칙
    • 🏦PG사별 은행코드표
    • 🧾PG사 코드표
    • 🚚택배사 코드표
    • 🪧리디렉션이란?
    • 📰PG사 오류코드
  • 관리자 콘솔 사용하기
    • 🎡관리자 콘솔 가이드
      • 전자결제 신청
      • 내 식별코드, API Keys
      • 관리자 및 하위 상점 계정 관리
      • 결제 연동 하기
      • 결제 내역
    • 💻복수 PG설정 및 사용하기
  • API
    • 📋포트원 API 소개
    • 🖇️REST API Access Token
    • 💳결제관련 API
      • ⌨️결제취소 API
      • ⌨️결제내역 단건조회 API
      • ⌨️결제내역 복수조회 API
      • ⌨️결제상태기준 복수조회 API
      • ⌨️결제 복수조회(주문All) API
      • ⌨️결제 복수조회(주문UQ) API
      • ⌨️빌링키 결제 복수조회 API
      • ⌨️결제금액 사전등록 API
      • ⌨️결제금액 단건 수정 API
      • ⌨️결제금액 단건조회
      • ⌨️결제 상세내역 조회 API
    • 📝빌링키 관리 API
      • ⌨️빌링키 발급 API
      • ⌨️빌링키 삭제 API
      • ⌨️빌링키 정보 단건조회 API
      • ⌨️빌링키 정보 복수조회 API
      • ⌨️빌링키 결제예약 조회 API
    • 🧭정기결제 관련 API
      • ⌨️결제 예약 API
      • ⌨️결제 예약취소 API
      • ⌨️결제예약 복수조회 API
      • ⌨️결제예약 단건조회 API
      • ⌨️결제예약 복수조회(빌키) API
    • 🪂비 인증 결제관련 API
      • ⌨️비 인증 결제(빌링키) API
      • ⌨️비 인증 결제(일회성) API
    • 🌏해외PG 관련 API
      • ⌨️페이먼트월 배송등록 API
    • 👮본인인증 관련 API
      • ⌨️본인인증 결과조회 API
      • ⌨️본인인증 정보삭제 API
      • ⌨️본인인증 요청 API
      • ⌨️본인인증 완료 API
    • 🎫간편결제 서비스 API
      • 🧽카카오페이
        • ⌨️주문내역 조회 API
      • 🛩️KCP Quick Pay
        • ⌨️구매자 정보 단건 삭제 API
      • 🧰페이코
        • ⌨️주문상태 단건 수정 API
      • 📗네이버페이 결제형
        • ⌨️에스크로 주문확정 API
        • ⌨️포인트 적립 API
        • ⌨️현금영수증 발급 가용액 조회 API
    • 🏦에스크로 관련 API
      • ⌨️배송정보 단건조회 API
      • ⌨️배송정보 단건등록 API
      • ⌨️배송정보 단건수정 API
    • 💵현금영수증 API
      • ⌨️포트원 발급분 취소 API
      • ⌨️발급내역 단건 조회 API
      • ⌨️현금영수증 단건발급 API
      • ⌨️외부 발급분 취소 API
      • ⌨️외부 발급내역 단건 조회 API
      • ⌨️현금영수증 발급(외부) API
    • 🏛️가상계좌 관련 API
      • ⌨️가상계좌 발급 API
      • ⌨️가상계좌 발급취소 API
      • ⌨️가상계좌 발급정보 수정 API
      • ⌨️예금주 조회 API
    • 🍶기타 API
      • 🎽베네피아 포인트
        • ⌨️포인트 단건조회 API
        • ⌨️포인트 결제 요청
      • 🏪편의점 결제
        • ⌨️수납번호 발급 API
        • ⌨️수납취소 API
      • 🗃️기관코드 조회
        • ⌨️카드사코드 전체조회 API
        • ⌨️카드사명 단건조회 API
        • ⌨️은행코드 전체조회 API
        • ⌨️은행명 단건조회 API
      • 🛖PG 정보
        • ⌨️PG MID 복수조회 API
  • SDK
    • 🔖JavaScript SDK
      • 💿결제요청 파라미터
      • 📀결제응답 파라미터
      • 💿본인인증 요청 파라미터
      • 📀본인인증 결과 파라미터
    • 📚JavaScript SDK (구버전)
      • ✏️SDK Release Note
  • FAQ
    • ⁉️자주 묻는 질문
  • 🔑PG사별 결제 연동 가이드
    • 🏢Payment Gateway
      • ⌨️NHN KCP
      • ⌨️KG 이니시스
      • ⌨️토스페이먼츠 (구 모듈)
      • ⌨️토스페이먼츠
        • 📍연동 유의사항
      • ⌨️(주)케이에스넷
        • 🚩연동 주의사항
      • ⌨️NICE페이먼츠
      • ⌨️KICC
      • ⌨️다우 (키움페이/페이조아)
        • 📍페이조아 유의사항
      • ⌨️KG모빌리언스
      • ⌨️페이먼트월
      • ⌨️다날
      • ⌨️핵토파이낸셜
        • 🏦내통장 결제
      • ⌨️JTNET
      • ⌨️스마트로
      • ⌨️페이팔
      • ⌨️페이팔 SPB 일반결제
        • 😲연동 유의사항
      • ⌨️엑심베이
      • ⌨️블루월넛
    • ⛺간편 결제사
      • ⌨️네이버페이(결제형)
      • ⌨️카카오페이
      • ⌨️페이코
      • ⌨️알리페이
      • ⌨️토스 간편결제
  • 워드프레스 플러그인 사용하기
    • 워드프레스 플러그인
      • 우커머스 플러그인
        • 일반결제 연동하기
        • 정기결제 연동하기
        • 가상계좌 입금통보 URL 설정하기
      • Easy Digital Downloads 플러그인
      • 결제버튼생성 플러그인
  • V2 연동하기 (beta)
    • ⚠️V2 연동 시작하기
    • 🖥️인증결제 연동하기
      • 1. 포트원 SDK 설치
      • 2. 결제 요청하기
      • 3. 결제검증 API 구현하기 (서버)
      • 4. 결제완료 처리하기 (클라이언트)
        • iframe 방식의 결과처리
        • redirect 방식의 결과처리
    • ⏰비인증결제 연동하기
      • 빌링키 결제
        • 1. 빌링키 발급하기
          • PG 결제창 이용하기
            • 1. 빌링키 결제 API 구현하기 (서버)
            • 2. 결제창을 통해 빌링키 발급하기
          • 포트원 API 이용하기
        • 2. 정기(예약)/반복결제 구현하기 (서버)
      • 키인(수기) 결제
    • 💸웹훅 연동하기
    • 🚀JavaScript SDK
      • 결제요청 파라미터
      • 결제응답 파라미터
      • 빌링키 발급 요청 파라미터
      • 빌링키 발급 응답 파라미터
    • 🏢PG사별 연동 가이드
      • ⌨️카카오페이
    • 🛬온보딩 연동 가이드 - 별도 계약 필요
  • API (V2 beta)
    • ⚠️V2 API 시작하기
    • 채널 관련 API
    • 인증 관련 API
    • 결제 관련 API
    • 현금영수증 관련 API
    • 정기결제 관련 API
    • 빌링키 관련 API
    • 가맹점 관리 API - 별도 계약 필요
    • 온보딩 API - 별도 계약 필요
  • 영문 연동가이드
Powered by GitBook
On this page
  • 플러그인 설치 및 구성하기
  • STEP1: 설치 및 활성화하기
  • STEP2: 가맹점 정보 입력하기
  • 결제버튼 및 결제창 만들기
  • 1. 결제버튼 숏코드 추가하기
  • 2. 숏코드 속성 추가하기
  • 결제 전 설문조사 필드 추가하기
  • 1. 설문조사 필드 숏코드 추가하기
  • 2. 숏코드 속성 추가하기
  • 사용 예제
  • a. 결제버튼 + 결제창
  • b. 결제버튼 + 설문기능 + 결제창

Was this helpful?

  1. 워드프레스 플러그인 사용하기
  2. 워드프레스 플러그인

결제버튼생성 플러그인

PreviousEasy Digital Downloads 플러그인NextV2 연동 시작하기

Last updated 2 years ago

Was this helpful?

Deprecated

이 문서는 더 이상 관리되지 않습니다.

를 이용해주세요.

이 문서는 워드프레스 웹사이트에서 온라인 상점 플랫폼 없이 아임포트 결제버튼 생성 플러그인을 사용하여 쉽고 빠르게 결제시스템을 연동하는 방법을 설명합니다.

플러그인 설치 및 구성하기

아임포트 결제버튼 생성 플러그인을 워드프레스 사이트에 설치하고 가맹점 정보를 입력합니다.

STEP1: 설치 및 활성화하기

먼저 워드프레스 관리자 페이지의 플러그인 > 플러그인 추가하기 메뉴를 클릭합니다. 플러그인 추가 페이지의 상단 플러그인 검색창에 아임포트를 검색하여 결과 목록에 있는 아임포트 결제버튼 생성 플러그인의 지금 설치하기 버튼을 눌러 설치를 진행합니다.

설치가 완료되면 나타나는 활성화 버튼을 눌러 플러그인을 활성화합니다.

STEP2: 가맹점 정보 입력하기

워드프레스 관리자 페이지의 아임포트 결제목록 > 아임포트 결제설정 페이지로 이동합니다. 아임포트 결제정보 설정 섹션에 아임포트 관리자 콘솔에서 확인한 가맹점 정보를 입력합니다. 변경 사항 저장 버튼을 눌러 설정 내용을 저장합니다.

결제버튼 및 결제창 만들기

워드프레스 페이지에 간단한 아임포트 결제버튼 숏코드(shortcode)를 삽입하여 결제창을 호출하는 버튼을 생성할 수 있습니다.

숏코드(shortcode)란?

숏코드는 워드프레스 내에서 작동하는 매크로로써, 짧은 코드 덩어리를 작성하여 복잡한 기능을 페이지에 추가할 수 있는 기능입니다. 예를 들어, [gallery] 숏코드를 페이지 편집란에 작성하면 사진 갤러리를 추가할 수 있습니다.

1. 결제버튼 숏코드 추가하기

아임포트 결제 버튼 숏코드를 다음과 같이 추가합니다. 버튼 레이블은 시작과 종료 숏코드 사이에 입력합니다.

[iamport_payment_button]결제하기[/iamport_payment_button]

2. 숏코드 속성 추가하기

다음과 같이 iamport_payment_button 숏코드에 속성을 추가하여 결제창에 나타나는 항목을 설정할 수 있습니다

[iamport_payment_button title="결제하기" description="아래의 정보를 입력해주세요." name="에스페란토 서울 2018 세미나" amount="10000" pay_method_list="kakaopay,samsung,card, trans,vbank,phone" field_list="name,email,phone"]참가비 결제하기[/iamport_payment_button]

iamport_payment_button 속성

  • title: 결제창의 제목.

  • description: 결제창의 소제목.

  • pay_method_list: 결제 수단 목록.

    • kakaopay(카카오페이), samsung(삼성페이), card(신용카드), trans(실시간 계좌 이체), vbank(가상계좌), phone(휴대폰 소액결제)중 입력.

  • field_list: 입력필드 목록.

    • name(이름), email(이메일), phone(휴대폰번호)중 입력.

  • name: 결제의 주문명.

  • amount: 결제에 청구하는 금액. 다음의 세가지 형태로 지정할 수 있습니다.

    • amount="10000" : 고정 금액

    • amount="10000,15000,20000" : 세가지 금액 중 하나를 선택

    • amount="variable" : 사용자 지정 금액

  • style: 결제버튼의 HTML style 속성.

    • 기본값: ‘display:inline-block;padding:6px 12px;color:#fff;background-color:#2c3e50’

  • class: 결제버튼의 CSS class 속성.

    • 이 속성은 style 속성을 덮어 씁니다.

  • redirect_after: 결제완료 후 이동할 웹페이지 주소.

결제 전 설문조사 필드 추가하기

결제 단계 전에 사용자에게서 정보를 입력받을 수 있는 설문조사 필드를 추가할 수 있습니다.

1. 설문조사 필드 숏코드 추가하기

결제버튼 숏코드(iamport_payment_button) 사이에 설문조사 필드(iamport_payment_button_field) 숏코드를 다음과 같이 삽입합니다.

[iamport_payment_button]참가비 결제하기[iamport_payment_button_field]소속[/iamport_payment_button_field][iamport_payment_button_field]에스페란토 수준[/iamport_payment_button_field][iamport_payment_button_field]뒷풀이 참석 여부[/iamport_payment_button_field][iamport_payment_button_field]행사를 알게 된 경로[/iamport_payment_button_field][/iamport_payment_button]

2. 숏코드 속성 추가하기

다음과 같이 iamport_payment_button_field 숏코드에 속성을 추가하여 설문조사 항목들을 설정할 수 있습니다.

[iamport_payment_button]참가비 결제하기[iamport_payment_button_field type="text"]소속[/iamport_payment_button_field][iamport_payment_button_field type="radio" options="상, 중, 하"]에스페란토 수준[/iamport_payment_button_field][iamport_payment_button_field type="select" options="참석, 불참"]뒷풀이 참석 여부[/iamport_payment_button_field][iamport_payment_button_field type="check" options="지인의 소개,페이스북,홈페이지"]행사를 알게된 경로[/iamport_payment_button_field][/iamport_payment_button]

iamport_payment_button_field 속성

  • type: 입력란의 종류.

    • text(텍스트 입력란), radio(라디오 버튼), select(선택 드롭다운), check(체크박스), address(주소검색 및 입력)

  • options: 입력란의 옵션.

    • radio, select, check type을 사용할 때 옵션 목록.

    • 예: options="개발팀, 기획팀, 디자인팀, 영업팀"

  • required: 필수 입력 여부.

    • 예: required="true"

  • placeholder: text type의 필드의 기본값(placeholder).

    • 예: placeholder="이름을 입력해주세요."

  • datafor: 이 필드의 값을 자동으로 입력할 결제 화면의 필드 이름.

    • name(이름), email(이메일), phone(연락처) 중 선택.

    • 예: datafor="name" - 이 필드의 값이 결제 화면의 이름(name)필드에 자동으로 채워집니다.

사용 예제

a. 결제버튼 + 결제창

결제버튼과 결제창을 구성하는 숏코드의 예제입니다.

[iamport_payment_button title="결제하기" description="아래의 정보를 입력해주세요." name="에스페란토 서울 2018 세미나" amount="10000" pay_method_list="kakaopay,samsung,card,trans,vbank,phone" field_list="name,email,phone"]참가비 결제하기[/iamport_payment_button]

b. 결제버튼 + 설문기능 + 결제창

결제버튼, 설문조사, 결제창을 구성하는 숏코드의 예제입니다.

[iamport_payment_button title="결제하기" description="아래의 정보를 입력해주세요." name="에스페란토 서울 2018 세미나" amount="10000" pay_method_list="kakaopay,samsung,card,trans,vbank,phone" field_list="name,email,phone"]참가비 결제하기[iamport_payment_button_field type="text"]소속[/iamport_payment_button_field][iamport_payment_button_field type="radio" options="상, 중, 하"]에스페란토 수준[/iamport_payment_button_field][iamport_payment_button_field type="select" options="참석, 불참"]뒷풀이 참석 여부[/iamport_payment_button_field][iamport_payment_button_field type="check" options="지인의 소개,페이스북,홈페이지"]행사를 알게된 경로[/iamport_payment_button_field][/iamport_payment_button]
PortOne 개발자센터