Collector Checkout – Introduction

Introduction

Collector Checkout for WooCommerce is a plugin that extends WooCommerce, allowing you to take payments via Collector.

Limitations in functionality

Collector Checkout is an embedded checkout, a checkout solution that replaces the standard WooCommerce checkout form. This setup provides an easy way for the customer to complete the purchase and a convenient way for the merchant to offer multiple payment options in the same solution.
An embedded checkout also implies certain limitations in functionality. Compatibility with other plugins that extend the functionality of the standard checkout might be limited. Examples of features that might not work out of the box:
  • Selection of Delivery Date.
  • Extra checkout fields (besides the standard billing and shipping fields).
  • Newsletter subscription signup.
  • Create an account during checkout process where the customer gets the opportunity to select user name and password (however, this can be generated automatically in WooCommerce).

Sign up with Collector

To get started with Collector Checkout, you need to create an account with Collector. If you’re not a customer yet you can register here.

Testing

If you want to try the checkout before installing it in your store you can checkout our demo store here.
To make test purchases you also need customer test data. This information can be found here.

Installation

  • Login to your WordPress Admin. Click on Plugins | Add New from the left hand menu
  • Click on the Upload option, then click Browse to select the zip file from your computer. Once selected, press OK and press the Install Now button.
  • Activate the plugin.

Required WordPress & WooCommerce settings

  • Installing HTTPS (a SSL/TLS certificate) in your web store is strongly recommended.
  • To get the order total to match between WooCommerce and Collector you need to configure WooCommerce to display prices with 2 decimals. More information about displaying of prices and how it can cause rounding issues can be found in this article.
  • You need to enable Guest Checkout (or let WooCommerce generate user name and password automatically when creating an account) in your store, otherwise the order will not be finalized in WooCommerce when paying with Collector.
  • It’s recommended to add/use SKU on products (even on product variants). This is needed to keep track of purchased products in orders between the two systems and to make refunds working properly.

Configuration

  • Navigate to → WooCommerceSettingsPayments.
  • Now Collector Checkout appears as an available payment method in the horizontal menu at the top. Click on this link to get to the settings page for the payment method.
  • Enable / Disable – Tick the checkbox if you want the payment method should be available at checkout.
  • Title – Enter the title for the payment method displayed in the checkout and order confirmation emails.
  • Username – Your Username received fromCollector.
  • Password – Your Password received from Collector.
  • Shared key – Your Shared Key received from Collector.
  • Merchant ID Sweden  B2C – Your Merchant ID for B2C purchases in Sweden received from Collector.
  • Merchant ID Sweden  B2B – Your Merchant ID for B2B purchases in Sweden received from Collector.
  • Merchant ID Norway  B2C – Your Merchant ID for B2C purchases in Norway received from Collector.
  • Invoice fee – If you want to add an invoice fee to purchases where the customer selects invoice as the selected payment method you can create a (hidden) product that acts as the invoice fee and add the ID of the product in this field.
  • Default customer – Sets the default customer/checkout type for Collector Checkout (if offering both B2B & B2C).
  • Checkout button color – Select your custom background color of call to action buttons in Collector Checkout iframe. Leave blank to use Collector standard color.
  • Manage orders – Check this box if you want to cancel an order in Collectors system automatically when the order is marked as Cancelled in WooCommerce and activate an order/invoice in Collectors system automatically when the order is marked as Completed in WooCommerce.
  • Invoice number on order page -Tick the checkbox if you want to display Collector Invoice Number after WooCommerce Order Number on WooCommerce order page (-> WooCommerce -> Orders).
  • Test mode – Tick the checkbox if you make purchases using test credentials.
  • Debug – Enable logging. The log messages can be displayed by navigating to: –> WooCommerce –> Status –> Logs.

Invoice fee handling

The invoice Fee for Collector Checkout Invoice payments are added as a simple (hidden) product. To create a Invoice fee product:
  1. Add a simple (hidden) product. Mark it as a taxable product. For more information on how to add a simple (hidden) product please check WooCommerce documentation page on Adding and Managing products.
  2. Go to the Collector Checkout settings page and add the product ID (not the price or the SKU) of the Invoice Fee settings field. The ID can be found by hovering the Invoice Fee product on the Products page in WooCommerce.

Checkout process flow in the plugin

Since Collector Checkout is an embedded checkout solution, order/cart data & customer data is passed between WooCommerce and the payment service provider in a different way than a payment method in the standard WooCommerce checkout.
The checkout process looks like this:
  1. The checkout page is requested.
  2. If Collector Checkout is the default (or selected) payment method a request containing merchant and cart data is sent to Collector.
  3. Collector respond with information about a new transaction session.
  4. The checkout page is rendered and the Collector checkout iframe is displayed.
  5. The customer identifies herself in Collectors Checkout.
  6. A javascript event is triggered so that:
    – The checkout is paused.
    – Customer address data (country and postal number) is fetched from Collector.
    – If needed the cart is recalculated and an cart update is sent to Collector.
    – The checkout is resumed.
  7. When the customer clicks the Pay button in Collector Checkout iframe, the checkout page is being reloaded, the WooCommerce checkout form is being populated with customer address data and the form is then posted.
  8. An order is created in WooCommerce.
  9. Order status is changed to Processing (by triggering the WooCommerce function payment_complete()) and an email about the new order is sent to the customer.

Order management

When an order is created in WooCommerce and a reservation number exists in Collectors system, you have the possibility to handle the order management in Collector directly from WooCommerce. This way you can save time and don’t have to work in both systems simultaneously.
Read more about order management in Collectors system directly from WooCommerce in the Collector Checkout Order management documentation.

Customize the checkout page

In some scenarios there might be a need for modifying the checkout page. Learn more how you can Customize the Collector checkout page here.