i'mport Payment Button Plugin

This guide describes how to use the i'mport Payment Button Plugin to quickly and easily integrate payment into your WordPress website without an online store platform.

Install and Set Up Plugin

Install the I'mport Payment Button plugin on your WordPress website and enter the merchant information.
STEP1Install and activate plugin
Go to WordPress Admin and select Plugins > Add New. Search for‘i’mport’ in the plugin search field at the top of the Add Plugin page. Find i'mport Payment Button Plugin among the search results and click the Install Now button to start installing.When the installation is complete, activate the plugin by clicking the Activate button that appears.
STEP2Enter merchant information
Go to WordPress Admin and then select i'mport Payments > Payment Settings. In the i'mport Payment Settings section, enter the merchant information obtained from the i'mport Admin Console. Click the Save changes button to save your changes.

Add Payment Button

You can create a button that calls the payment window by inserting a simple i'mport payment button shortcode on your WordPress page.

What is shortcode?

Shortcodes are macros that run in WordPress, allowing you to add complex functionality to your pages by adding short chunks of code. For example, you can add a photo gallery by adding the [gallery] shortcode in the page editor.
1Add payment button shortcode
Add the i'mport payment button short code as follows. The button label is entered between the starting and ending shortcode tags.
  [iamport_payment_button]Pay[/iamport_payment_button]
2Add shortcode attributes
You can configure the items that appear in the payment window by adding attributes to the iamport_payment_button shortcode as follows:
  [iamport_payment_button title="Pay" description="Enter the following information." name="2018 Esperanto Seoul Seminar" amount="10000" pay_method_list="kakaopay,samsung,card, trans,vbank,phone" field_list="name,email,phone"]Pay Fee[/iamport_payment_button]

iamport_payment_button attribtutes

  • title: title for the payment window.
  • description: description for the payment window.
  • pay_method_list: payment method list.
    • Options: kakaopay (Kakao Pay), samsung (Samsung Pay), card (credit card), trans (instant account transfer), vbank (virtual bank account), phone (mobile micropayment).
  • field_list: Input field list.
    • Options: name, email, phone.
  • name: order name.
  • amount: payment amount set as one of:
    • amount="10000" : fixed amount
    • amount="10000,15000,20000" : select one of the 3 options
    • amount="variable" : user-specified amount
  • style: HTML style attribute for payment button.
    • Default: ‘display:inline-block;padding:6px 12px;color:#fff;background-color:#2c3e50’
  • class: CSS class attribute for payment button.
    • This attribute overrides the style attribute.
  • redirect_after: URL to redirect to after payment.

Add Pre-checkout Survey

You can add survey fields that allow users to fill in information before the checkout step.
1Add survey field shortcode
You can insert the survey field short code (iamport_payment_button_field) between the payment button short code (iamport_payment_button) as follows:
  [iamport_payment_button]Pay Fee[iamport_payment_button_field]Company[/iamport_payment_button_field][iamport_payment_button_field]Esperanto level[/iamport_payment_button_field][iamport_payment_button_field]Attend post-event reception?[/iamport_payment_button_field][iamport_payment_button_field]How you learned about the event[/iamport_payment_button_field][/iamport_payment_button]
2Add shortcode attributes
You can add attributes to the iamport_payment_button_field shortcode as follows:
  [iamport_payment_button]Pay Fee[iamport_payment_button_field type="text"]Company[/iamport_payment_button_field][iamport_payment_button_field type="radio" options="high, medium, low"]Esperanto level[/iamport_payment_button_field][iamport_payment_button_field type="select" options="yes, no"]Attend post-event reception?[/iamport_payment_button_field][iamport_payment_button_field type="check" options="Friend's suggestion, Facebook, Homepage"]How you learned about the event[/iamport_payment_button_field][/iamport_payment_button]

iamport_payment_button_field attributes

  • type: input field type.
    • Options: text, radio, select, check, address
  • options: field options.
    • Options for radio, select, or check type.
    • Example: options="Dev team, Planning team, Design team, Sales team"
  • required: whether or not the field is required.
    • Example: required="true"
  • placeholder: default value for a text type field.
    • Example: placeholder="Enter a name."
  • datafor: name of the field to populate with this field's value.
    • Options: name, email, phone
    • Example: datafor="name" - this field's value will be used to automatically populate the name field on the payment page.

Example

a. Pay button + payment window

You can create a payment window and a Pay button with shortcode as follows:
  [iamport_payment_button title="Pay" description="Fill in the following information." name="2018 Esperanto Seoul 2018" amount="10000" pay_method_list="kakaopay,samsung,card,trans,vbank,phone" field_list="name,email,phone"]Pay Fee[/iamport_payment_button]

b. Pay button + survey + payment window

You can create a payment window, survey section and a Pay button with shortcode as follows:
  [iamport_payment_button title="Pay" description="Fill in the following information." name="2018 Esperanto Seoul 2018" amount="10000" pay_method_list="kakaopay,samsung,card,trans,vbank,phone" field_list="name,email,phone"]Pay Fee[iamport_payment_button_field type="text"]Company[/iamport_payment_button_field][iamport_payment_button_field type="radio" options="high, medium, low"]Esperanto level[/iamport_payment_button_field][iamport_payment_button_field type="select" options="yes, no"]Attend post-event reception?[/iamport_payment_button_field][iamport_payment_button_field type="check" options="Friend's suggestion, Facebook, Homepage"]How you learned about the event[/iamport_payment_button_field][/iamport_payment_button]