아임포트docs

Plug-in to Create Iamport Payment Button

Introduction

When you build a website with WordPress but without any e-commerce platform, you can still integrate a payment system to accept various payment methods from customers. The payment system can be easily and quickly installed with a simple Shortcode.

Installing and activating the plug-in & Enter merchant information

To use the plug-in to create a Iamport payment button, it needs to be installed on WordPress. Then, enter the merchant information to use the plug-in
STEP1Installation
First, go to the Plugins > Add New menu on the left menu in your WordPress site. Second, search for Iamport in the top plug-in search box. Finally, click the Install Now button on the Plug-in to Create Iamport Payment Button in the search results list to proceed with the installation.
STEP2Activating the plug-in
When the installation is complete, Activation button appears. Activate the plug-in by clicking the button.
STEP3Enter merchant information
On the WordPress Admin page, go to Iamport Payment List > Iamport Settings page, and enter Merchant ID, REST API key, and REST API secret values in the fields with the information you checked from Iamport Admin Dashboard. After filling in, click Save button to save the settings.

Checking Merchant Information

The information can be found in Admin Dashboard More details can be found in Checking merchant information.

Create payment button and window

You can create a button that leads to payment by inserting a simple Shortcode into your WordPress page. When you click on the button, a payment window will appear.

What is Shortcode?

It is a macro that works in WordPress. It allows you to add complex functionalities to your page by inserting (writing) a small chunk of codes. For example, if you write a Shortcode such as [gallery] in the page edit box, you can actually make the photo gallery appear on the page. Using the Shortcode provided by the plug-in to create a Iamport payment button, you can insert a button to proceed with the payment on click.
1Shortcode basic form
The basic form of Shortcode to add the Iamport payment button is as below. The text where the button appears should be placed between the Shortcodes.
  [iamport_payment_button]Pay[/iamport_payment_button]
2Shortcode Properties
You can set the items that appear in the payment window as you like by adding properties to the iamport_payment_button Shortcode as follows:
  [iamport_payment_button title="Pay" description="Please provide the information below." name="Esperanto Seminar Seoul 2018" amount="10000" pay_method_list="kakaopay,samsung,card, trans,vbank,phone" field_list="name,email,phone"]Pay to register[/iamport_payment_button]

iamport_payment_button properties

  • title: Title of the payment window.
  • description: The sub-title of the payment window.
  • pay_method_list: User-selectable payment methods.
    • Enter the payment methods you wish to provide: kakaopay(KakaoPay), samsung(Samsung Pay), card(Credit card), trans(real-time account transfer), vbank(virtual account), phone(mobile micropayment).
  • field_list: Information to be asked to users in the payment window.
    • Select the field you want users to provide: name (Name), email (e-mail), and phone (mobile phone number).
  • name: Order name of the payment.
  • amount: The amount to ask for the payment.
    • amount="10000" can be set to ask for the fixed amount.
    • amount="10000,15000,20000" can be set to allow users to select one of three amounts (10000, 15000, 20000) for the payment.
    • amount="variable" can be set to accept the user input amount.
  • style: HTML style attribute applied to the button created by Shortcode.
    • Default: "display:inline-block;padding:6px 12px;color:#fff;background-color:#2c3e50"
  • class: CSS class attribute applied to the button created by Shortcode.
    • When the class property is set, the style property is ignored.
  • redirect_after: Redirect URL after payment is completed.

Add a survey before payment

Before the payment, you can add a survey to allow customers to enter information. You can skip this if you don’t need.
1Add Shortcode
Insert iamport_payment_button_field Shortcode between Shortcodes (iamport_payment_button) for the payment button.
  [iamport_payment_button]Pay to register[iamport_payment_button_field]Organization[/iamport_payment_button_field][iamport_payment_button_field]Your Esperanto level[/iamport_payment_button_field][iamport_payment_button_field]Whether to join post-seminar dinner[/iamport_payment_button_field][iamport_payment_button_field]How did you know this event"[/iamport_payment_button_field][/iamport_payment_button]
2Shortcode Properties
You can change what will appear in the survey by adding attributes to the iamport_payment_button_field Shortcode as below.
  [iamport_payment_button]Pay to enroll[iamport_payment_button_field type="text"]Organization[/iamport_payment_button_field][iamport_payment_button_field type="radio" options="High, Medium, Low"]Your Esperanto level[/iamport_payment_button_field][iamport_payment_button_field type="select" options="Yes, No"]Whether to join post-seminar dinner[/iamport_payment_button_field][iamport_payment_button_field type="check" options="From your friends,Facebook,Homepage"]How did you know this event[/iamport_payment_button_field][/iamport_payment_button]

iamport_payment_button properties

  • type: Set the type of input field.
    • text (text input), radio (radio button), select (select dropdown), check (check box), address (address search and input)
  • options: Add options to the input field.
    • Provides options when using radio, select, or check type.
    • Example: options="Development Team, Planning Team, Design Team, Sales Team"
  • required: Set whether the field is required.
    • Example: required="true"
  • placeholder: Assign a default (placeholder) to a text type field.
    • Example: placeholder="Please enter your name."
  • datafor: Specifies the fields to be passed to the payment screen so that it can be automatically filled.
    • name (Name), email (e-mail), phone (mobile phone number)
    • If you specify one of the required fields (name, email, phone) in the datafor property, the value entered in the field is automatically filled in the payment screen.
    • Example: datafor="name" - The value entered in the field is automatically filled in the Name (name) field on the payment screen.

Usage examples

a. Payment button + Payment window

To have the payment button and payment window as above, you can configure Shortcode as follows.
  [iamport_payment_button title="Pay" description="Please provide the information below." name="Esperanto Seminar Seoul 2018" amount="10000" pay_method_list="kakaopay,samsung,card,trans,vbank,phone" field_list="name,email,phone"]Pay to register[/iamport_payment_button]

b. Payment button + Survey feature + Payment window

To have the payment button, survey form, and payment window as above, you can configure the Shortcode as follows.
  [iamport_payment_button title="Pay" description="Please provide the information below." name="Esperanto Seminar Seoul 2018" amount="10000" pay_method_list="kakaopay,samsung,card,trans,vbank,phone" field_list="name,email,phone"]Pay to register[iamport_payment_button_field type="text"]Organization[/iamport_payment_button_field][iamport_payment_button_field type="radio" options="High, Medium, Low"]Your Esperanto level[/iamport_payment_button_field][iamport_payment_button_field type="select" options="Yes, No"]Whether to join post-seminar dinner[/iamport_payment_button_field][iamport_payment_button_field type="check" options="From your friends,Facebook,Homepage"]How did you know this event[/iamport_payment_button_field][/iamport_payment_button]