Shopify Smart Checkout plugin

Our Shopify Smart Checkout plugin allows you to accept payments via Viva Wallet Smart Checkout in your Shopify store.

Overview

Features

User experience

This plugin uses our Smart Checkout solution. Customers are redirected from your checkout page on your Shopify store to Viva Wallet Smart Checkout to pay, and after the customer pays, they are redirected automatically back to your Shopify store.

The below images show:
a) a demo checkout page on Shopify, and
b) a demo Viva Wallet Smart Checkout:

Shopify Checkout Page
Smart Checkout

Supported payment methods

Smart Checkout supports a wide variety of payment methods, including:


Visa
Mastercard
American Express
Maestro
Bancontact
JCB
Discover
Diners Club
Apple Pay
Google Pay
Samsung Pay
PayPal
PayPal Pay Later
Viva Wallet
BitPay
BLIK
EPS
giropay
iDEAL
IRIS
Klarna
MULTIBANCO
P24
Payconiq
PayU
Sofort
tbi bank
Trustly
WeChat Pay
SEPA Direct Debit
Pay By Bank
Cash (Viva Spot)
Pay on Delivery

Please see our Payment Methods page for further information on all of our payment methods

Cross-border payments: You can accept payments from international customers for all payment methods

Before you start

Step 1: Create Viva Wallet account

If you do not already have an account with Viva Wallet please create an account.

Step 2: Generate Shopify credentials

Before doing anything, you need to grab your Viva Wallet Client ID and generate your unique Client Secret, following the below steps.

  1. Sign in to the Viva Wallet banking app and select the required account.

  2. Click on Settings > API Access and scroll down to the Shopify Smart Checkout Credentials (PP) section:

    Shopify credentials

  3. Click on the Generate a pair of credentials button.

  4. A pair of credentials is generated.
    Your unique 32-character Client Secret is now displayed in the Client secret field below ClientID:

    Shopify Credentials

  5. Make a temporary note of your Client ID and Client Secret for later use.

Step 3: Determine your payment methods

Determine which payment methods you want to offer to your customers.

Some of these payment methods are automatically enabled for you by us (e.g. Apple Pay), other payment methods can only be enabled by yourself (e.g. PayPal), for others you need to get in touch with us to enable them for you after a further review of your business.

Setup instructions

PLEASE NOTE: This plugin offers multi-store support, so you can install it on multiple Shopify stores you may have.

You have to use the same Shopify Credentials for all your Shopify stores. Please make a note of your unique Client Secret until you complete the setup of the plugin for all of your stores.

1) Install the plugin on one Shopify store - this will automatically create the Transaction Payment Created and Transaction Failed webhooks in your Viva Wallet account
2) Proceed to install the plugin on the next Shopify store
3) Repeat the process (steps (1) and (2)) if you have three or more stores

Adding the Shopify Smart Checkout plugin consists of the following steps:

Step 1: Add Viva Wallet Smart Checkout plugin to your Shopify store

Installation video:

Please see our video on how to install the Viva Wallet Smart Checkout plugin on your Shopify store


Instructions:

Add the Viva Wallet Smart Checkout plugin in your Shopify store following the below steps:

1. Log in to your store as an administrator.

2. Click on Settings in the bottom-left corner of your Shopify home page.

Shopify home page

3. Click on Payments at left menu side.

Shopify settings
The Shopify Payment providers page is displayed.

4. In the box “Supported payment methods”, select “Add payment methods”.

Shopify add payment methods

Select “Search by provider” and start typing “Viva Wallet Smart Checkout”. Select the plugin and then press “Activate”.

Shopify search by provider

Alternatively, copy and paste the URL https://accounts.shopify.com/store-login?redirect=settings%2Fpayments%2Falternative-providers%2F1058083 to your browser address bar, overwriting the existing URL, and hit enter.

The Shopify stores page is displayed. Click on your desired store to display the pre-installation page

Shopify stores page

5. Shopify displays the following prompt to you. You are asked to consent to the requested scopes and give authorization to install the app.

Pre-installation page

Select Install app and Shopify will redirect you to the following Configuration page. Here, you must insert the Client ID and Client Secret from your self-care account that you noted from section Generate Shopify Credentials (step 6)” above.

If you wish to use your live Viva Wallet account:

If you wish to use your demo Viva Wallet account:

VivaWallet Configuration - live credentials

6. A new field will appear to select a Source Code.

If there is no Source Code with the domain of the store in your Viva Wallet account (‘self-care’), then the Shopify application will automatically create a new one for you.

The format of this will be similar to ‘SF-0001’, incrementing to ‘SF-0002’ and so on, with each Shopify installation.

If you have multiple Source Codes, all of these will displayed within the field. Please select the Shopify-related Source Code - as outlined above - to continue.

You can change your brand logo at any time by updating your Shopify Source. To do this, please note the Source Code above and see our adding your brand logo tutorial for a step-by-step guide.

7. When you complete the form select submit.
The application will make the validations needed and it will also create the webhooks in the background.
If everything is valid then application notifies Shopify that is ready to accept payments and Shopify will send you an email that will look like this:

Validation

a) If something is wrong, the application will prompt a modal:

Modal
b) In case you get a popup like this:

Something went wrong

This can happen if your shop does not have a public domain (a public domain is required)

8. Then you will be directed to the Finish tab. In there you will be notified about the validation of the form and with some guidelines for additional configuration in your source code, if you desire.

Finish tab

9. Select Return to Shopify Admin. You will be redirected to Shopify’s configuration page. Select Activate Viva Wallet.

You will need to select the desired payment methods:

Note that in order to enable certain payment methods, it is not enough to enable them on Shopify, you first need to enable them on your Viva Wallet account.

Payment methods

10. You will receive a notification email like this:

Email notification

11. The installation process is completed and you can check in your store admin panel in Payments section that the provider selected is Viva Wallet.

Selected provider

Step 2: Set your store currency

One final thing to check is that your Shopify store currency matches that of your Viva Wallet account. For instance, if your Viva Wallet account was set up in the UK, the Viva Wallet account will be in GBP, so you must set the Shopify currency to the same, i.e. GBP in this example. Please see below for instructions on how to change your store currency.

To set your store currency, you should follow the below steps.

1. Click on Settings in the bottom-left corner of your Shopify home page:

Shopify home page

2. You may find at the bottom of the pop up the current store currency.

Shopify settings page

3. Click on the Store currency dropdown menu and choose one of the currencies supported by Viva Wallet.

Store currency dropdown

4. Click on the Save button to make your choice permanent.

Upgrading the plugin

Shopify plugin updates are done automatically so you never miss a new version.

Get Support

If you would like to integrate with Viva Wallet, or if you have any queries about our products and solutions, please see our Get Support page to see how we can help!