Table of Contents

WooCommerce

Team ViaBill Updated by Team ViaBill

ViaBill Integration for WooCommerce

Need help with integrating ViaBill in your store? Reach out to our dedicated integration team at tech@viabill.com and we'll be happy to complete your ViaBill integration at no cost to you.

Description

ViaBill provides a seamless financing solution for thousands of merchants and customers across the world featuring low transaction costs and stellar support.

With ViaBill, you can increase your average order size and conversion rate, and put your customer in focus so they can get what they want when they want it — without your customer having to pay in full and upfront.

ViaBill - WooCommerce is a WordPress plugin that allows you to accept payments via ViaBill on your WordPress/WooCommerce store. You will be able to capture and refund your ViaBill orders directly in WooCommerce, and you can even activate the ViaBill PriceTag which ensures higher conversion rates and will increase your average order size.

We strive to make this plugin as functional and stable as possible.

Nevertheless, before installing the ViaBill - WooCommerce plugin on your production site, it is your responsibility to test it in a pre-production environment to verify that it adheres to your needs and that you understand its behavior.

You can modify it to adapt it to your exact needs.

You are granted one license for a unique web site.

You are not allowed to change the author of the plugin.

You are not allowed to redistribute it, modified or not, in whatever the way of redistribution.

Installation

The ViaBill - WooCommerce plugin is easily installed directly in your WordPress plugin dashboard via the WordPress plugin directory or direct upload. You can find the latest version and changelog of the ViaBill - WooCommerce plugin in the WordPress plugin directory.

Requirements
  • WooCommerce 3.3 or greater.
  • PHP version 5.6 or greater (PHP 7.2 or greater is recommended).
  • SSL must be installed on your site and active on your Checkout pages.
WooCommerce Admin

We strongly advise that you install the ViaBill - WooCommerce plugin on a pre-production environment, such as a staging or local installation of your store. This will reduce the risk of potential conflicts and allows you to test the plugin without affecting your live site and customer experience.

First, log in to your WordPress admin with an account that has administrator privledges.

Next, click on the Plugins tab located in the left side menu.

Then, click the Add New button located in the top left corner of the plugins page.

In the top right corner, search for "ViaBill". Find the ViaBill – WooCommerce plugin and then click on the Install Now button.

Then, click on the Activate Plugin button and the plugin will appear in the Installed Plugins tab.

If you wish to install the ViaBill - WooCommerce plugin by direct upload, click on the Upload Plugin button in the top left corner of the plugins page. Then, click the Choose File button in the center of the file upload section or drag the .zip file for the plugin to the file upload section.

We strongly advise that you install the ViaBill - WooCommerce plugin automatically inside of your WordPress admin account via the WordPress plugin directory to take advantage of update notifications.

Connecting your ViaBill account

After clicking Activate for the first time, you will be automatically directed to the following window.

There are two possibilities to connect to ViaBill -

Create a new ViaBill account or Log in to an existing ViaBill account.

Create a new ViaBill account

If you don’t already have a ViaBill merchant account, it is necessary to create a new account. Please fill out the following form.

  1. Email: Mandatory field for your email address. This email address will be used to create a MyViaBill account that holds all of your business, transaction, and payout information.
  2. Country: Mandatory field for the country in which your business operates in.
  3. Shop URL (live): Mandatory field for your live store.
  4. Contact name: Field for the name of the contact person of your company.
  5. Phone number: Field for your direct phone number. This may be used to contact you by a ViaBill representative for all matters requiring urgent communication.
  6. Terms And Conditions: Mandatory checkbox for acceptance of ViaBill's terms and conditions of the country your store operates in. The terms and conditions can be accessed by clicking on the link located next to the checkbox, and may also be accessed here: Click here to read ViaBill's terms & conditions.

When all necessary information is entered, click the Register button located at the bottom of the form. When your account is successfully created, you will be redirected to the main settings of the plugin. 

Log in to an existing ViaBill account

You should only choose this option if you already have a ViaBill merchant account. 

Please enter the email and password associated with your ViaBill merchant account to log in. Then, click the Login button at the bottom of the form. Upon connecting, you will be redirected to the main settings of the plugin.

If you forgot your password, click the Forgot password? link located above the login button. You will be directed to MyViaBill, where you can reset your password by entering your email and receiving a temporary password via email.

Connect a different ViaBill account

To connect a different ViaBill merchant account to the ViaBill - WooCommerce plugin, you should delete and reinstall the plugin to access the login form again.

While this may inconvenient, it is intentional to lower the risk of accidentally logging out of your ViaBill account while the plugin is active.

Navigate to Plugins > Installed Plugins and find ViaBill - WooCommerce.

Click on Deactivate located below the plugin title. You will get then get the opportunity to delete the plugin.

Click on Delete located below the plugin title. The plugin will now be uninstalled from your store.

To reinstall the ViaBill - WooCommerce plugin, follow the instructions located in the previous "Installation" section of this document.

Settings

After you've successfully logged in, you are brought to the main settings window where the plugin can be configured.

Below you will find the available configuration options and how they each function. You may enable or disable these settings according to your ideal workflow.

Enable ViaBill Payment Gateway

Check the box to activate ViaBill as a payment method on your checkout. Click the Save changes button at the bottom of the plugin settings to save the changes.

ViaBill Test Mode

ViaBill Test Mode allows you to easily make a successful APPROVED or CANCELLED transaction without having to input any data in the ViaBill checkout.

Check the box to activate ViaBill Test Mode. Click the Save changes button at the bottom of the plugin settings to save the changes.

To complete a test transaction when ViaBill Test Mode is enabled, simply choose ViaBill at checkout. Upon redirection to the ViaBill Checkout, you will see two buttons titled APPROVED or CANCELLED.

Click the APPROVED button to create a test order within WooCommerce that mocks an approved ViaBill transaction. Within the order, you may cancel, capture, and refund the order. You may reference the order notes and ViaBill Status to ensure that these operations are successful.

Click the CANCELLED button to create a test order within WooCommerce that mocks a canceled ViaBill transaction. Within the order, you may reference the order notes and ViaBill Status to ensure that the order is successfully canceled.

This mode is strictly for testing purposes only. Keep this disabled this for live stores.
ViaBill Debug Log

The Debug log is for debugging purposes only. When contacting ViaBill technical support, you may be asked to enable logging and send the log file after 24 hours for troubleshooting.

Check the box to enable the Debug log. Click the Save changes button at the bottom of the plugin settings to save the changes.

Automatic Redirect

Select this option to automatically redirect your customers to the ViaBill checkout when customers choose to purchase via ViaBill. If the option is disabled, the customer will have one more step that they will need to confirm within WooCommerce in order to go to the ViaBill checkout.

Check the box to enable the Automatic redirect. Click the Save changes button at the bottom of the plugin settings to save the changes.

Hide Pending Orders

Select this option to hide all orders from the WooCommerce order list that are not approved/authorized by ViaBill.

Check the box to enable Hide pending orders. Click the Save changes button at the bottom of the plugin settings to save the changes.

Automatic Refund

Select this option to automatically refund orders in full by changing the order status to Refunded.

Check the box to enable Automatic refund. Click the Save changes button at the bottom of the plugin settings to save the changes.

Auto-Capture Payments

Select this option from the dropdown to automatically capture all approved ViaBill orders. All automatically captured orders will be updated with an order status of, Processing.

Selecting this option will also disable the option to partially capture the order amount.

After enabling/disabling, click the Save changes button at the bottom of the plugin settings to save the changes.

Auto Capture Email

Select this option to skip sending emails for approved orders (Order status set to On Hold) if the Auto-capture payments setting is enabled. This option will only send an email when the order is captured. (Order status set to Processing)

Check the box to enable Auto-capture email. Click the Save changes button at the bottom of the plugin settings to save the changes.

Capture Order On Status Change

Select this option from the dropdown in order to capture the whole order amount by manually switching the order status from On Hold to Processing.

After enabling/disabling, click the Save changes button at the bottom of the plugin settings to save the changes.

Database Update

If you updated the ViaBill plugin from before version 1.1.0 to a later version, we strongly advise you to start a database update to ensure that there are no order conflicts. Performing a database update will only update ViaBill related data in the database, no other data will be accessed or altered.

Before starting the update we recommend you create a backup of your database!

ViaBill PriceTags

The ViaBill PriceTag is an intelligent widget that is typically placed just below the price of the product.

This feature ensures higher conversion rates and increased basket size. There are three places where the PriceTag can be displayed. Each of them can be enabled separately in the plugin configuration.

Enable PriceTag on Product Page

When enabled, the PriceTag will appear on the Single Product template, typically below the price of your product. Here's an example of how the PriceTag should appear on the Single Product template while the option is enabled.

After you enable the PriceTag on Product Page, if the PriceTag appears in a location that is not near the price of your product, you may need to manually override the PriceTag location by following the instructions located below, titled, "PriceTag Position".

If you click on the PriceTag, a modal popup will appear, where your customers can read more about how ViaBill works on your store. Here's an example of how the modal appears.

Enable PriceTag on Cart Page

When enabled, the PriceTag will appear on the Cart template, typically below the subtotal section after you add products to the shopping cart on your store. Here's an example of how the PriceTag is displayed on the Cart template while the option is enabled.

Enable PriceTag on Checkout Page

When enabled, the PriceTag will appear on the checkout page, typically below the ViaBill payment option. Here's an example of how the PriceTag is displayed on the checkout while the option is enabled:

PriceTag Position, Price, Variants, and Style

Each PriceTag (Product, Cart, and Checkout) has its own configuration so that the PriceTag's position, price, and styling can be updated individually. This is necessary as each page template has its own styling and layout, which may require you to use different selectors respective to the specific template.

PriceTag Position

By default, the ViaBill - WooCommerce plugin will attempt to insert the PriceTag next to or below the price in the respective template.

However, the PriceTag may appear in the wrong place depending on your WordPress theme. If you would like to insert the PriceTag in a specific location, you may insert a query selector to target an element before which the PriceTag will be inserted.

PriceTag Dynamic Price Selector

By default, the PriceTag is set with the standard product price. If you offer product variants, you'll need to set a query selector for the element that contains the price of the product, either as text content (if the element is <div>, <span>, etc.) or in the value attribute (if the element is an <input>).

You can determine the correct selector by using your browser's inspect tool on the price that you intend to target. Locate the id or class found in the product price element. This should be the selector used to target the product price.

Note: Some themes that have a robust CSS structure that may require you to include parent or child selectors in order to target the specific element.

PriceTag Dynamic Price Trigger

If you offer product variants that upon selection automatically update the product price, or if you need to update a cart or checkout subtotal upon increasing or decreasing quantity, you'll need to set a query selector in order for the PriceTag to automatically adjust its price.

Set a query selector for the element(s) that triggers a click or change event responsible for updating the price.

For example – If your variants are selected in a dropdown, simply inserting select into the field should enable the PriceTag price to automatically update when you select the variant. However, some themes and third-party plugins that manage product variants may require a more specific selector.

Note: When using this attribute, setting data-dynamic-price (see above) is required.

PriceTag Wrapper Style

If you'd like to fine-tune how the PriceTag is displayed, you may do so by specifying some CSS properties.

For example, if you'd like for the pricetag to appear centered, you may insert the following code: display: flex; justify-content: center;

Note: The PriceTag is injected via an iframe. Therefore, you cannot adjust the font type, size, or colors using this setting.

If you would like assistance locating the correct selector to insert, you may reach out to tech@viabill.com and we'll be happy to assist you.

ViaBill Orders in WooCommerce

New ViaBill orders

Once your customer initiates the ViaBill checkout, an order will be created in WooCommerce with an order status of Pending payment. The order status will automatically update once the order has been approved/authorized by ViaBill to On Hold.

Once approved, the order must be captured in order to trigger a charge to your customer and a payout to you. There are multiple options to capture your orders that are outlined below.

Once captured, the order status will automatically be updated to Processing.

Prior to shipping all ViaBill orders, please make sure that the order is captured. This is required for ViaBill to assume fraud and credit risk, as well as to trigger a charge to your customer and a payout to you.
How to Capture an order

After receiving your ViaBill order, you have a few options to capture your orders. If you require the ability to capture less than the full order amount, we recommend following the Capture order on status change or Capture order on manual entry processes listed below.

Auto-capture

  1. You can choose to enable Auto-capture payments in the plugin settings. This will automatically capture the order in full after it’s been approved by ViaBill. If enabled, we recommend to also enable Auto-capture email in the plugin settings to ensure your customers do not receive multiple order notification emails from WooCommerce.

Capture order on status change

  1. Second, you can choose to manually capture the order by changing the order status from On Hold to Processing. Once you've updated the order status, click the Update button. You'll receive a browser alert to confirm that you'd like to capture the order. If you'd like to capture the order, click the OK button, otherwise, click the Cancel button. If you need to capture less than the full order amount, you will need to complete the process outlined below in Capture order on manual entry. The option to manually capture an order via the Capture button will always be available when Capture order on status change is enabled.

Capture order on manual entry

  1. Third, you can choose to manually capture the order by clicking on the Capture button on the bottom left corner of the order details. Afterward, you will be able to type in the amount you would like to capture next to where the total order amount is. Once you enter the amount you would like to capture, click the Capture $x.xx via ViaBill button. You will receive a browser alert to confirm that you'd like to capture the order. If you'd like to capture the order, click the OK button, otherwise, click the Cancel button.

By clicking the OK button, the order’s payment will be captured and the order status will be updated to Processing.

How to Refund an order

To refund an order, the order must be paid via ViaBill and already captured. There are two available options to refund your ViaBill orders. If you require the ability to refund less than the full order amount, we recommend following the Refund order on manual entry processes listed below.

To refund an order, the order must be paid via ViaBill and already captured. To refund an order, click on the Refund button located in the bottom left corner of the order details.

Afterward, you will be able to type in the amount you would refund.

A pop-up will appear with the following message: “Are you sure you wish to process this refund? This action cannot be undone.” 

By clicking the OK button, the order's payment will be refunded and the order status will be updated to Refunded.

MyViaBill

You can access your MyViaBill account without having to sign in by clicking on the My ViaBill link located at the bottom of the ViaBill - WooCommerce plugin settings.

Within MyViaBill, you can monitor your ViaBill transaction activity including your captured orders and payout settlements.

MyViaBill also allows you to search for specific ViaBill orders and to export transactions and payout settlements in different formats like JSON, C5, and CSV.

How did we do?

Shopify

PrestaShop

Contact