Smart Checkout integration guide

#Introduction

Integrate Viva.com Smart Checkout to allow customers to make secure payments through a hosted checkout page. This guide walks you through the steps for seamless integration into your website or app.

---

#➤ Get your Viva.com Account, if you don’t have one already

Viva.com supports two different environments, make sure you use the correct one:

#➤ Get your online payment source and keep your source code

A payment source is a configuration entity which enables merchants to set up and manage payment integration settings for their websites or mobile apps.

Set up your domain and the URLs where Viva.com Smart Checkout will redirect customers after payment completion. These URLs typically lead to pages like “Thank you for your order” for successful payments or “Something went wrong with your payment” for failed transactions, allowing customers to continue their journey seamlessly on your website or app.

Create a payment source for online payments, by navigating to Menu > Sales > Online in the Viva.com dashboard.

Make sure to save the 4-digit source code of the payment source you just created, as you will need it later for integration and configuration purposes.

Check here for a detailed guide on how to create a Source for Online payments

#➤ Step-by-step integration guide

#Key steps to integrate

1. Create the Payment Order

2. Redirect to Smart Checkout

3. Handle Customer Return and verify payment outcome

➥ Step 1: Create the Payment Order

To request a payment from one of your customers, you need to create a payment order. Each payment order is assigned a unique 16-digit ID, also known as the orderCode.

You can generate the payment order using the Create Payment Order API on your server and pass the orderCode to your website or app.

For more details on how to setup a payment order check our detailed guide on our developer's portal here and here.

➥ Step 2: Redirect Customer to Smart Checkout

When redirected, customers will see the Smart Checkout form to enter their payment details and complete the transaction.

#➤ Additional options for Smart Checkout

• Payment Source options

• Display your brand logo

You can include your brand logo to be displayed on Smart Checkout by configuring it in the Payment Source settings. There is a detailed guide on our developer's portal here.

Adding your logo enhances the customer experience by reinforcing your brand identity during the payment process. Make sure to upload a clear and appropriately sized logo for optimal display.

#➤ Display a cancel button

Providing a Cancel button offers flexibility for your customers and helps improve the overall user experience.

You can configure a Cancel button on Smart Checkout to provide customers with the option to cancel their orders. This is managed at the payment source level (under Advanced Configuration), giving you control over whether the Cancel button is available for orders associated with a specific source.

Supported Platforms: The Cancel button is currently supported for direct Smart Checkout integrations and plugins for Shopify and PrestaShop.

Webhook Support: You can configure webhooks to receive notifications for order cancellation events. Follow this webhook setup guide for more information.

➥Step 3: Handle Customer Return and Verify Payment Outcome

#Handle Customer Return

After payment, customers are redirected to:

• Success URL for successful payments.

• Failure URL for failed payments.

You can configure these settings through your Viva.com Account Dashboard under Menu > Sales > Online Payments > Websites/Apps

#Verify Payment Outcome

Verification ensures that the transaction is completed successfully. To validate the status of a transaction in your system, cross-check the following parameters: Amount, transactionId, statusId (View all StatusId codes).

#➤ Recommended payment verification methods:

1. Webhooks:

   • Receive real-time updates for payment success or failure.

   • Refer to our Transaction Payment Created and Transaction Failed webhooks documentation for more details on implementation, sample payloads and explanation of all parameters.

   • Covers both synchronous and asynchronous payment methods.

2. Retrieve Transaction API:

   • For more details on the API call and its parameters, refer to the Retrieve Transaction API documentation on our developer's portal

#➤ Additional Setup

With Viva.com Smart Checkout we have prepared many features and tools that you can use and give your customers more options for their payments.

• Recurring Payments: A payment method where the merchant (you) initiates charges automatically on a predefined schedule without involving the customer after the first payment.

• Pre-Authorizations: A payment method used to verify the availability of funds and reserve the amount, with the actual transfer of funds initiated later.

You can find detailed guides on our developer's portal to proceed with all the configurations you can make through your account to accept online payments, as well as explore all the alternatives and services we offer.