아임포트 결제버튼 생성 플러그인

소개

워드프레스로 웹사이트를 구축하고 온라인 상점 플랫폼 없이 고객으로부터 다양한 결제수단을 통해 지불받을 수 있는 결제시스템을 연동할 수 있습니다. 간단한 숏코드를 활용하여 쉽고 빠르게 결제시스템을 설치할 수 있습니다.

플러그인 설치 및 활성화 & 가맹점 정보 입력하기

아임포트 결제버튼 생성 플러그인을 사용하기 위해서는 워드프레스 사이트에 설치해야 합니다. 그 후, 플러그인 사용을 위해 가맹점 정보를 입력합니다.

STEP1설치하기

먼저 여러분의 워드프레스 웹사이트의 좌측 탭의 플러그인 > 플러그인 추가하기메뉴로 진입합니다. 그 다음 상단 플러그인 검색창에 아임포트를 검색합니다. 그 다음, 검색 결과 목록에 있는 아임포트 결제버튼 생성 플러그인의 지금 설치하기버튼을 눌러 설치를 진행합니다.

STEP2플러그인 활성화

설치가 완료되면 활성화버튼이 나타납니다. 해당 버튼을 클릭하여 플러그인을 활성화합니다.

STEP3가맹점 정보 입력하기

워드프레스 관리자페이지에서 아임포트 결제목록 > 아임포트 설정페이지에 접근하여 가맹점 식별코드, REST API 키, REST API secret입력란에 아임포트 관리자페이지에서 확인한 값을 입력합니다. 입력 후, 하단의 저장하기버튼을 클릭하여 설정 내용을 저장합니다.

가맹점 정보 확인하기

해당 정보는 관리자 대시보드에서 확인하실 수 있습니다. 가맹점 정보 확인하기 페이지에서 자세히 알아보세요.

결제버튼 및 결제창 만들기

워드프레스 페이지에 간단한 숏코드(shorcode)를 삽입하여 결제로 이어지는 버튼을 생성할 수 있습니다. 버튼을 클릭하면 결제를 진행하는 결제창이 나타납니다.

숏코드(shortcode)란?

워드프레스 내에서 작동하는 매크로로써, 짧은 코드 덩어리를 삽입(작성)하여 복잡한 기능을 페이지에 추가할 수 있는 기능입니다. 예를 들어 [gallery]와 같은 숏코드를 페이지 편집란에 작성하면 실제 페이지에서는 사진 갤러리가 나타나도록 할 수 있습니다. 아임포트 결제버튼 생성 플러그인이 제공하는 숏코드를 사용하여, 클릭시 결제를 진행할 수 있는 버튼을 삽입할 수 있습니다.

1숏코드 기본 형태

아임포트 결제 버튼 숏코드의 기본 형태는 다음과 같습니다. 버튼이 나타나는 텍스트는 숏코드 사이에 삽입니다.

Shortcode

  [iamport_payment_button]결제하기[/iamport_payment_button]

2숏코드 속성

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

Shortcode

  [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"로 지정하여 고객이 세가지 금액(10000, 15000, 20000) 중 한가지를 선택하여 결제할 수 있습니다.
- amount="variable"로 지정하여 고객이 입력하는 금액으로 결제할 수 있습니다.
style: 숏코드가 생성하는 버튼에 적용하는 HTML style 속성.
- 기본값: ‘display:inline-block;padding:6px 12px;color:#fff;background-color:#2c3e50’
class: 숏코드가 생성하는 버튼에 적용하는 CSS class 속성.
- class속성이 설정되면 버튼에 style 속성은 적용되지 않습니다.
redirect_after: 결제완료 후 이동할 웹페이지 주소.

결제 전 설문 추가하기

결제 단계 이전, 고객이 정보를 입력할 수 있도록 설문기능을 추가할 수 있습니다. 설문기능이 필요없다면 생략할 수 있습니다.

1숏코드 추가하기

결제버튼 숏코드(iamport_payment_button) 사이에 iamport_payment_button_field숏코드를 삽입합니다.

Shortcode

  [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 숏코드에 속성을 추가하여 설문에 나타나는 항목을 임의로 변경할 수 있습니다.

Shortcode

  [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 속성

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, email, phone)중 하나를 지정하면 결제 화면에 해당 필드에서 입력한 값이 채워집니다.
- 예시: datafor="name" - 해당 필드에 입력한 값이 결제 화면의 이름(name)필드에 자동으로 채워집니다.

사용 예제

a. 결제버튼 + 결제창

위와 같은 결제버튼과 결제창을 구성하기 위해 다음과 같이 숏코드를 구성할 수 있습니다.

Shortcode

  [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. 결제버튼 + 설문기능 + 결제창

위와 같은 결제버튼, 설문기능, 결제창을 구성하기 위해 다음과 같이 숏코드를 구성할 수 있습니다.

Shortcode

  [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]