How it works in short
At the payment step of your checkout, shoppers choose Viva Wallet. They are sent to Viva Wallet's Smart Checkout, a payment page hosted by Viva Wallet, where they pay by card or with another payment method your Viva Wallet account offers. After the payment they come back to your store and the order is marked as paid.
You need four things from your Viva Wallet account, and two more are recommended:
- Client ID and Client Secret (the Smart Checkout credentials): required.
- Source code of a payment source for your website: required.
- Merchant ID and API Key: recommended. With them, Viva Wallet can confirm every payment to your store by webhook, even when a shopper closes the page before coming back.
One rule before you start: your store's currency must match your Viva Wallet account's currency.
1. Create your Viva Wallet account
If you are new to Viva Wallet, first create a merchant account. Then add the Viva Wallet app to your store and open it. The Get Viva Wallet live steps at the top of the app tick themselves off as you go: connect your account, turn Viva Wallet on at checkout, switch to live payments.
To try payments before going live, you can use a Viva Wallet demo account: its keys work with the app's Test Mode on. Live keys work with Test Mode off.
2. Get your Client ID, Client Secret, Merchant ID and API Key
- Log in to your Viva Wallet account.
- Open Settings - API Access. The General tab shows Access credentials with your Merchant ID and API Key.
- Find Smart Checkout Credentials.
- If you have never used them, click Generate a pair of credentials. A popup shows your Client ID and Client Secret. Copy the secret right away: you can't see it again.
- If you have used them before, you already see your Client ID there.
- Copy the Merchant ID, API Key, Client ID and Client Secret. You paste them into the app in step 4.
Need more help? See Viva Wallet's own guide to find your client credentials.
3. Create a payment source and copy its Source Code
The payment source tells Viva Wallet which website the payments come from.
- Open Sales - Online Payments - Websites / Apps.
- Click Add Website/App in the top right corner.
The New Payment Source window opens. Fill it in like this:
- Code: the four-digit number at the top left is your Source Code. You can keep it as it is.
- Source Name: any name you will recognize, for example your shop's name.
- Linked account: the account (wallet) the money from this source goes to.
- Protocol: HTTPS if your store uses https (almost every store does).
- Domain Name: your store's domain without https:// and without a slash at the end,
for example
www.yourdomain.com, oryourdomain.comif your site doesn't use www. - Integration method: leave it on Redirection/Native Checkout v2.
- Company Logo: your logo as a transparent PNG up to 100 KB. Shoppers see it on the payment page.
- Success URL: enter only
?viva=success - Failure URL: enter only
?viva=fail
Is your store inside another website (WordPress, Wix, Duda
or similar), and not on the home page? Then open your store's cart page and copy the part of the address
after the domain. For yourdomain.com/my_cart_page the Success URL is
my_cart_page?viva=success and the Failure URL is my_cart_page?viva=fail. Also
open Advanced Configuration and change the Order Code field from
s to sid.
Read and tick the checkboxes at the bottom, then click Create. Copy the Source Code of the new payment source. Viva Wallet's guide to payment sources has more detail.
4. Paste the keys into the app and save
Open the Viva Wallet app in your store admin and fill in:
- Merchant ID and API Key (from Access credentials).
- (Smart Checkout) Client ID and (Smart Checkout) Client Secret.
- Source code (from Websites / Apps).
- Test Mode: on for demo account keys, off for live keys.
Click Save. The app saves your settings and checks the keys with Viva Wallet right away. The message under the form says what it found, for example:
- Keys checked: "Saved. Viva accepted your keys."
- Demo keys with Test Mode off, or live keys with Test Mode on: the message says so. Switch Test Mode and save again.
- "Viva refused the Merchant ID and API Key": payments still work, but orders are only confirmed when the shopper comes back to your store. Copy both again from Settings - API Access.
5. Create the webhook (recommended)
Sometimes a shopper pays but the confirmation doesn't reach your store, for example when the connection drops on the way back. The order then ends up in abandoned carts instead of your orders. A webhook fixes this: Viva Wallet tells your store about every payment directly.
Save your Merchant ID and API Key in the app first (step 4). Then:
- In Viva Wallet, open Settings - API Access - the Webhooks tab.
- Click Create Webhook.
- As URL, enter
https://infiniteapps.net/app/viva/viva-webhooks/STOREIDand replaceSTOREIDwith your store ID. - Click Verify next to the URL.
- Tick Active.
- For Event Type, choose Transaction Payment Created.
- Click Save.
With the webhook, paid orders are marked as paid and the Viva Wallet transaction ID is added to the order as VivaWallet ID.
6. Turn on Viva Wallet at checkout
In your store admin, open the Payment settings and switch Viva Wallet on, so shoppers can choose it. The app's Open payment settings button takes you there. Shoppers then see Viva Wallet at the payment step, under the name you set in Payment method name at checkout (VivaWallet by default).
7. Make a test order, then go live
With Test Mode on and your demo account keys saved, place an order in your store and pay on the Smart Checkout page with a test card from Viva Wallet's demo environment. Check that you land back in your store and that the order shows up as paid. Then put your live keys in, switch Test Mode off and save. The last of the Get Viva Wallet live steps is done, and real payments can come in.
Smart Checkout options
Below the keys, the app has a few options for the payment page and your checkout:
- Brand color for checkout: Smart Checkout uses your brand color instead of the default one.
- Pre-selected payment method: the method already chosen when the shopper arrives (Credit Card by default). Shoppers can still pick any other. The list includes SEPA Direct Debit, iDEAL, P24, BLIK, PayU, MULTIBANCO, giropay, Sofort, EPS, WeChat Pay, PayPal, Trustly, Klarna, Payconiq, IRIS, Online Banking and more. Which methods shoppers really see depends on your Viva Wallet account.
- Payment method name at checkout: the name at the payment step of your checkout.
- Custom CSS: your own styles for Viva Wallet on the checkout payment page.
Common setups
A store on its own domain
Success URL ?viva=success, Failure URL ?viva=fail, Order Code left as it is. Add
the webhook, and you are done.
A store inside WordPress or Wix
Put your cart page's path in front: my_cart_page?viva=success and
my_cart_page?viva=fail, and change the Order Code under Advanced Configuration to
sid.
Shoppers in the Netherlands or Poland
Set Pre-selected payment method to iDEAL, or to BLIK or P24, so the local method is ready when the payment page opens.
Payment page in your colors
Pick your brand color in Brand color for checkout and upload your logo to the payment source in Viva Wallet. Give the payment method a name shoppers recognize, like "Pay by card".
Questions
Which currency can I use?
Your store's currency must match your Viva Wallet account's currency. Shoppers can pay with cards in other currencies: the amount is converted to your account currency with the card schemes' daily rate. More from Viva Wallet.
Is there a minimum order?
Yes. The minimum transaction amount is 30 cents (or 30p).
Some orders end up in abandoned carts. What can I do?
Create the webhook from step 5. Then payments reach your store even when the shopper doesn't come back after paying.
The app says my keys are demo keys, or live keys. Why?
Demo account keys only work with Test Mode on, and live keys only with Test Mode off. Switch Test Mode to match the keys, or use the other keys, and save again.
Where can I read more about Viva Wallet?
In the Viva Wallet help center.
