Redirect

The Redirect Checkout is very similar to Simple Checkout, but instead of opening a popup overlaid on your website, the user is directed to a special payment page hosted by Viva Wallet.

Once your customers complete a purchase, they are redirected back to a success page of your choice. It involves minimal technical effort on your side and offers the widest variety of payment options.

Before you start

The demo environment has a base URL of https://demo.vivapayments.com/ and for the live environment it’s https://www.vivapayments.com/.

  1. Log in to Viva Wallet, demo or live , and select the required account.
  2. Create a payment source selecting Redirection/Native Checkout v2 as the integration method.

Setup instructions

Redirect checkout is a simple three-step process, where you create the payment order, redirect the customer to the Viva Wallet Payment gateway then confirm the transaction.

Step 1: Create the payment order

A payment order is created every time you want to tell Viva Wallet that you require a certain amount of money from one of your customers. Think of it as a utility bill. You give Viva an order to issue a bill on your behalf. The bill is then sent to your customer and they have to pay a specific amount within a given period of time. Each Payment Order has a unique 12-digit ID also referred to as the payment code.

post    /api/ordersCreate payment order

Request example

Make the below call through a backend channel. Replace the authorization token with your own, generated as described under How to authenticate using basic auth.

curl -L -X POST 'https://demo.vivapayments.com/api/orders' \
-H 'Content-Type: application/json' \
-H 'Authorization: Basic ZTc1ZmZmNDMtNWM5Zi00YWE2LTljZjEtODZhZmRkZWE4MjA0OmV0UzdrMw==' \
--data-raw '{
  "Tags": [
    "sample string 1",
    "sample string 2",
    "sample string 3"
  ],
  "Email": "customer@example.com",
  "Phone": "07967813180",
  "FullName": "Customer Name",
  "PaymentTimeOut": 86400,
  "RequestLang": "en-US",
  "Source": "Default",
  "MaxInstallments": 12,
  "AllowRecurring": false,
  "IsPreAuth": false,
  "Amount": 200,
  "MerchantTrns": "Your reference",
  "CustomerTrns": "Description that the customer sees"
}'

Response example

If authentication is successful and the body parameter values are valid, an order code is returned along with some other response data.

{
    "OrderCode": 7186650102996314,
    "ErrorCode": 0,
    "ErrorText": null,
    "TimeStamp": "2020-09-16T15:21:41.0299631+03:00",
    "CorrelationId": null,
    "EventId": 0,
    "Success": true
}

Step 2: Complete payment details

Redirect the customer to the Viva Wallet checkout page via a browser using the below URI format. Replace OrderCode value with the one generated in the previous step.

https://demo.vivapayments.com/web/checkout?ref={OrderCode}

Now you will see the checkout form where the customer can enter their name, card number and all other necessary information to complete the transaction:

Redirect checkout

Step 3: Confirm the transaction

The customer is returned to a page on your website. The redirection URLs are defined in your Viva Wallet banking app under the payment sources for your website / app.

If you have defined multiple sources on your profile, you need to use the optional SourceCode parameter when creating the payment order, so that the system selects the appropriate redirection URL.

The redirection uses the HTTP GET method and may append the following parameters to the URL:

Try to verify the status of a transaction and not depend only on whether your success or failure URL is called. You can make a call to Retrieve transactions in order to verify the status of an order. To get notified for offline payment methods you can make use of the webhooks notification service.