Smart Checkout integration guide

Viva.com Smart Checkout lets you accept online payments through a hosted checkout page.

This guide explains the main steps for integrating Smart Checkout with your website or app, from setting up your account and payment source to redirecting customers and verifying the payment outcome.

1. Choose your Viva.com environment

Viva.com provides two environments. Make sure you use the environment that matches what you want to do.

Environment	Use it for	Get started
Production	Accepting live payments	Viva.com account registration process \| Viva.com Support
Demo	Testing your integration and test payments	Getting started with a sandbox/demo account \| Viva.com Support

Make sure you are working in the correct environment when setting up and testing your integration.

2. Create an online payment source

A payment source contains the settings Viva.com uses for payments made through your website or app.

When setting up your payment source, configure your domain and the URLs where customers should return after completing the checkout process.

For example:

a success page, such as “Thank you for your order”
a failure page, such as “Something went wrong with your payment”

To create a payment source for online payments, go to Sales > Online Payments > Websites/Apps in your Viva.com dashboard.

After creating the payment source, save its 4-digit source code. You will need this code when configuring your integration.

Example setup of payment source with source code 2861

For detailed setup instructions, see Source for Online payments | Viva.com Support.

3. Integrate Smart Checkout

There are three main steps to integrate Smart Checkout:

Step 1: Create a payment order

Before requesting a payment from a customer, create a payment order.

Each payment order is assigned a unique 16-digit ID, called the orderCode.

Create the payment order from your server using the Create Payment Order API, then pass the orderCode to your website or app.

For API parameters and implementation details, visit the Viva.com Developer Portal. In the left-hand menu, select APIs for payments, then Payment API. Under Payments, select Create payment order.

Step 2: Redirect the customer to Smart Checkout

After creating the payment order, redirect the customer to Smart Checkout. The customer can then enter their payment details and complete the payment process on the Smart Checkout page.

Step 3: Handle the customer return and verify the payment outcome

After the payment process, the customer is redirected to the URL configured for the relevant outcome:

Success URL for successful payments
Failure URL for failed payments

You can configure these URLs in your Viva.com dashboard under Sales > Online Payments > Websites/Apps.

Verify the payment outcome

Verify the transaction status in your system using the payment information returned by Viva.com. The transaction information used for validation includes:

Amount
transactionId
statusId

Viva.com provides the following methods for checking the payment outcome.

Webhooks

Webhooks allow your system to receive notifications about payment success or failure and support both synchronous and asynchronous payment methods.

For implementation details, event parameters and sample payloads, visit the Viva.com Developer Portal and select Webhooks For Payments from the menu.

Retrieve Transaction API

You can also retrieve transaction information using the Retrieve Transaction API. For API parameters and implementation details, visit the Viva.com Developer Portal. In the left-hand menu, select APIs for payments, then Payment API. Under Transactions, select Retrieve transaction.

Optional Smart Checkout settings

You can also configure additional Smart Checkout settings based on your integration needs.

Display your brand logo

You can add your brand logo to Smart Checkout through your payment source settings. For instructions, visit the Viva.com Developer Portal, go to Tutorials, select Smart Checkout Configuration, and then click on Add your brand logo.

Make sure you upload a clear and appropriately sized logo for optimal display.

Display a Cancel button

You can configure a Cancel button in the payment source's advanced configuration settings. This gives customers the option to cancel their order.

The Cancel button is supported for direct Smart Checkout integrations and plugins for Shopify and PrestaShop.

You can also configure webhooks to receive notifications about order cancellation events. Visit the Viva.com Developer Portal, select Webhooks For Payments, and then Order Updated to view more information.

Additional payment options

Smart Checkout also supports additional payment configurations, including:

Recurring payments: The merchant initiates charges automatically according to a predefined schedule after the first payment.
Pre-authorizations: An amount is reserved, with the transfer of funds initiated later.

For technical implementation details and other available Smart Checkout configurations, visit the Viva.com developer portal.

Still need help? Our team is here to support you. Please contact us via the Chat with us option in your Viva.com account.