The Hygglig Gateway module is a plugin that extends WooCommerce. It allows you as a merchant to have only one payment integration, and your customers to pay with the payment method of their choice. Hygglig Checkout is at the moment only available in Sweden.

General information

When the order is passed to Hygglig, a credit record of the customer is made. The customer will then be presented with different payment methods, depending on how the check turns out. When the customer finalize the purchase, Hygglig creates an invoice in their system and sets the order in WooCommerce as ‘Processing’. After you (as the merchant) completes the order in WooCommerce, you need to approve/send the invoice in Hygglig system as well. You can choose to do that either by logging in to Hygglig Merchant web, or by stating in the plugin settings for Hygglig Gateway that the order is to be automatically approved/sent in Hygglig when the order is set as ‘Completed’ in WooCommerce.

Installation

You can install the module directly from WordPress och by downloading it from WordPress.org and follow the step below.

  1. Download the latest release from WordPress:
    for WooCommerce version 2.4 or above – Download zip file here.
  2. Install the plugin by uploading the zip file in WordPress Administration Plugins menu Add New Upload plugin.
  3. Activate the plugin through the ”Plugins” menu in WordPress Administration.
  4. Go to WooCommerce Settings Checkout Hygglig Checkout, and configure your Hygglig settings.

Update

If you update from a previous version, make sure you first Deactivate and Delete the old plugin. After that you install the new version just like you would a new plugin. Don’t worry, the keys and configurations you’ve entered in WooCommerce Settings Checkout Hygglig Checkout, will still be there with the new version installed.

Configuration

Before you start you should contact Hygglig who will send you login for Hygglig merchant web (Hygglig Handlarwebb) and the Merchant ID and Secret Key needed for Hygglig WooCommerce plugin.

  1. Navigate to WooCommerce Settings Checkout Hygglig Checkout.
  2. Hygglig checkout is enabled when the Enable/Disable checkbox is checked. This also makes Hygglig Checkout the default checkout page (stated in Custom Checkout Page field).
  3. Enter Merchant id – Sweden and Secret – Sweden for Hygglig. (If it is the keys for Hygglig Test Environment, you need to check the Test Mode checkbox.)
  4. Enter the full URL to Hygglig checkout page in the settings field Custom Checkout Page – Sweden. This page must contain the shortcode [woocommerce_hygglig_checkout].
  5. If you use the existing checkout page for Hygglig, make sure you replace the existing shortcode in the checkout page and instead use the shortcode [woocommerce_hygglig_checkout].
  6. Enter the full URL to your Thank You page in the settings field Custom Thanks Page – Sweden. If you use the existing Thanks page for Hygglig, then leave this field blank, but make sure you replace the existing shortcode in the Thanks page and instead use the shortcode [woocommerce_hygglig_checkout].
  7. Check Auto Send Order and Auto Cancel Order boxes if you want WooCommerce to send order status changes automatically to Hygglig Merchant Web.
  8. Button to Standard Checkout. Check this box if you want to add a link on the Hygglig Checkout page that links to the Standard Checkout Page.
  9. Label for Standard Checkout Button: Enter the text for the link that links to the Standard Checkout page from the Hygglig Checkout page.
  10. A Terms page must be set. If the Terms Page field is left empty, the Terms and Conditions page defined in WooCommerce Settings Checkout will be used.
  11. Create customer account should be checked if you want WordPress to save new customer information entered in Hygglig Checkout.
  12. With both Create customer account and Send New account email checked, WooCommerce will send a New account email to the customer. If you want to edit that email this can be done under WooCommerce Settings Emails New account, and click button View template.
  13. Test Mode. Check this box to enable Hygglig Test Mode. This will only work if you have a Hygglig Checkout test account.
  14. After you have saved the Hygglig Checkout settings, you can start making test purchases (still with the test credentials obtained from Hygglig).

Using the CSS file

Hygglig Gateway plugin for WooCommerce comes with a separate css-file, hygglig.css. You can use that to get full control over how the Hygglig checkout page is displayed in your theme. Without the css Hygglig iframe is rendered with no borders, no margins, no padding, transparent background and a maximum width of 1170px. The default hygglig.css gives the iframe a border, white background, 20px padding, a max width of 620px and centers it in the parent div. There is also styles to make the link to standard checkout look and behave like a button.

Here is a copy of hygglig.css for reference.

In the default example (shown below) we wanted the Hygglig iframe to have a border around it, make sure it hade white background regardless of theme, be centered in the parent div and have a width of 620 pixels on desktop.

#hyggligiframe {
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #ffffff;
  /* some padding */
  padding: 20px; 
  /* max-width to be responsive */
  max-width: 620px; 
  /* center Hygglig */
  margin: 0 auto; 
}

Test the installation

Send a mail to woocommerce@hygglig.com and you will receive a reply containing keys and login information for the test environment.

Going live

When the installation is tested and you are ready to go live you need to contact Hygglig support. Hygglig will then verify the integration and send you the keys for the production environment.