WooCommerce

The instructions below accompany the redirect version of our plugin for WooCommerce. In July 2020 we released a more advanced payment plugin in partnership with WooCommerce. The documentation for this can be found at docs.woocommerce.com.

Take credit card payments easily on your store

The Viva Wallet plugin extends WooCommerce allowing you to take payments via Viva Wallet’s API. Accept Visa, MasterCard, American Express, Alipay, JCB, and more, via a redirect from your store with the Viva Wallet payment gateway for WooCommerce.

Before you start

Setup instructions

Adding the Viva Wallet plugin to WooCommerce consists of the following steps.

Step 1: Create a payment source

To add a new payment source in the Viva Wallet banking app:

  1. Click on Sales in the left navigation:

    Sales menu
  2. Click on Online payments in the Sales menu.

  3. Click on Websites / apps in the Online payments menu:

    Online payments menu

  4. Click on the Add Website/App button in the top right-hand corner:

    Add Website button
    The New Payment Source dialog box is displayed:

    New Payment Source dialog box

  5. Complete the fields as follows:

    • Code – the four-digit number in the top-left of the dialog box is the ‘Source Code’. Make a note of it for use in your plugin.
    • Source Name – give your payment source a source name so you can recognise it in your reports.
    • Linked Wallet – link the payment source to the required wallet.
    • Protocol – if your e-commerce platform uses SSL on the checkout, select https, otherwise use http.
    • Domain Name – enter the domain name to be associated (without the protocol. i.e. use [(www.)yourdomain.com], not http://[yourdomain].com). If the site uses www, it must be specified and visa versa.
    • Integration method – leave this with redirection selected.
    • Company Logo – a PNG of your company logo to be displayed on the Viva Wallet payment page.
    • Success URLindex.php?wc-api=wc_vivawallet&vivawallet=success
    • Failure URLindex.php?wc-api=wc_vivawallet&vivawallet=fail
  6. Click on the Create button to finish creating the payment source.

During payment source activation, our team will update your payment source from a status of ‘Pending’ to ‘Active’ in the payment source list. This process normally takes a maximum of one working day after submitting the source.

Step 2: Integrate with your e-commerce store

To start using Viva Wallet as the payment gateway within WooCommerce:

  1. Log in to your Wordpress website as an administrator.

  2. Choose Add New from the Plugins menu:

    Add new plugin

  3. Click on the Upload Plugin button to display the upload page:

    Add new plugin

  4. Click on the Choose File button and browse to the ZIP archive (vivawallet-for-woocommerce.zip) you downloaded earlier to your desktop.

  5. Click on the Choose button then Install Now.
    Wordpress installs the plugin in the background.

  6. Once installed, click on the Activate Plugin button.
    An entry for the WooCommerce Vivawallet Gateway will be displayed at the bottom of the plugins page:

    WordPress Plugins List

  7. Choose Settings from the WooCommerce menu in the left navigation.

  8. Click on the Payments tab at the top of the page to display the WooCommerce Payment Methods list.

  9. Ensure that the Vivawallet toggle is enabled and click on the Manage button next to the Vivawallet entry at the bottom of the list:

    Add new plugin
    A Viva Wallet-specific settings page will be displayed:

    WooCommerce Payments Tab

  10. In the Title field, enter the text ‘Pay by debit or credit card.’

  11. In the Description field, enter the text ‘Cards accepted: Visa, Mastercard, Maestro or Amex.’

  12. In the Merchant ID, API Key and Source Code fields, enter the previously noted values.

  13. Instalments – optional. Here you can include a meaningful code for installments to be collected. Use the example below the field as a guide to creating the required code. Requirements: customer uses card enabled for installments and chooses desired installment amount on payment page.

  14. Test mode – optional. When checked the plugin will connect to the demo environment. In that case, use only the credentials from your demo account. When unchecked use the credentials from your live account.

  15. Click on the Save changes button.
    You are now ready to start receiving payments.

Step 3: Create an optional webhook

  1. Go to Settings > API Access > Webhooks in the Viva Wallet banking app:

    Webhooks tab

  2. Click on the Create Webhook link to display the New Webhook dialog box:

    New webhook dialog box

  3. In the Url field, enter
    http(s)://(www.)your_domain.com/index.php?wc-api=wc_vivawallet&vivawallet=webhook
    exchanging the placeholder for your actual domain name.

  4. Click on the Verify link next to the URL you just entered.
    After a short while, a message should be displayed confirming verification.

  5. Choose Transaction Payment Created from the Event Type dropdown.

  6. Click in the ‘Active’ checkbox to select it and make the webhook live.

  7. Click on the Save button.