Simple Checkout

Simple Checkout is the simplest way to add payments to your website. A payment button on your page opens a payment overlay. Once payment has been received by the user, they can close the overlay and return to the page:

Simple Checkout

Simple Checkout provides users with a streamlined, mobile-ready payment experience that is constantly improving. It allows for quick integration in as little as a single line of client-side code. As new features are released, we’ll automatically roll them out to your existing integration, so that you’ll always be using our latest technology without needing to change a thing.

Features:

  • Ease of integration – minimal coding is required to start accepting payments.
  • Mobile-first design – the checkout page is responsive and suitable to all screen sizes.
  • No redirection – users won’t have to leave your site. Checkout page is rendered within your own web page.
  • Security – user input is protected with the use of an inline frame element (iframe). Host window scripts have no access to the checkout’s internals and all cardholder data is encrypted in accordance to industry standards.
  • User friendly – simple checkout uses smooth animations to communicate errors to the user. Try pressing the ‘Pay’ button with empty credit card fields.
  • Pay with Credit card or Viva Wallet – users can choose to pay using their wallet balance or a credit card.

This checkout solution uses an iframe which may cause problems in some browsers, including the one within the Facebook mobile app. You should test first in the demo development environment. If you run into any issues, use Redirect Checkout instead.

Step 1: Display the button

You need jQuery to integrate Simple Checkout. Fire up a code editor and paste the code below to see the button rendered, or edit it in JsBin  .

<html>
    <head>
        <title>Simple Checkout</title>
    </head>
    <body>
      <form id="myform" action="/checkout" method="post">
        <button type="button"
          data-vp-publickey="LZmm8E8FLUJmRMPQFAssIV3mkzsrgQ3wbDIp7XcsZno="
          data-vp-baseurl="https://demo.vivapayments.com"
          data-vp-lang="en"
          data-vp-amount="1000"
          data-vp-description="My product">
        </button>
      </form>

      <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
      <script src="https://demo.vivapayments.com/web/checkout/js"></script>
    </body>
</html>

When the user clicks the button, the checkout form is displayed within the browser without redirection:

Two payment methods are available:

  • pay using Viva Wallet
  • pay with credit card (including stored credit cards).

Depending on the payment method selected and whether the merchant is enrolled in the Viva Payments Cardholder Authentication Service (3DSecure), the user may be redirected to their bank’s page to authenticate (e.g. enter a password or SMS code).

After selecting the payment method and filling in the necessary fields, paymentForm is submitted to the URL defined in the action attribute along with vivaWalletToken, a hidden <input> field.

The code above does not create charges – it only creates a charge token. A charge token is an encrypted string containing data related to the payment and can only be decrypted by us when the actual transaction is applied to the user’s credit card. vivaWalletToken is a charge token too.

Received parameters

vivaWalletToken will be submitted to your form’s action endpoint along with any other <input> fields included in the form.

Parameter Description
vivaWalletToken The charge token that will be used to charge your customer.

Configuration options

Option Description Required Advised Optional
data-vp-publickey Your (demo or live) public key, available in your merchant profile. Tick symbol
data-vp-amount The amount you wish to charge. The amount is entered in the currency’s minor unit of measurement (e.g. cents instead of euros. To charge your customer 20 euros, you would enter the value ‘2000’). Tick symbol
data-vp-description A description of the payment, visible to your customer. Tick symbol
data-vp-merchantref A reference ID that will later help you easily identify the payment (e.g. a unique order code generated by your system. Tick symbol
data-vp-lang The interface language. Supported languages:
‘en’ – English, ‘fr’ – French, ‘nl’ – Dutch, ‘ro’ – Romanian, ‘el’ – Greek.
Tick symbol
data-vp-background-color Sets button’s background colour, default value: #030408. Tick symbol
data-vp-color Sets button’s text colour, Default value: #fff. Tick symbol
data-vp-hover-background-color Sets button’s background colour on mouse over, Default value: #1a2242. Tick symbol
data-vp-hover-color Sets button’s text colour on mouse over, Default value: #fff. Tick symbol
data-vp-border-radius Sets button’s roundness, Default value: 10px. Tick symbol
data-vp-text Sets button’s text, Default value: Pay (when data-vp-lang=“en”). Tick symbol
data-vp-sourcecode Your SourceCode. If omitted, ‘Default’ SourceCode is used. For Sources with logos attached to them, checkout will render the logo in the header area. See also Create a payment source. Tick symbol
data-vp-customersurname Card holder’s surname. Fills in the related form field. Tick symbol
data-vp-customerfirstname Card holder’s first name. Fills in the related form field. Tick symbol
data-vp-customeremail Card holder’s e-mail address. Fills in the related form field. Tick symbol
data-vp-baseurl The target environment (demo / production). Use https://demo.vivapayments.com for development. If no value is set, production environment is assumed. Tick symbol
data-vp-disablewallet (true/false) Disables Wallet payment method. Tick symbol
data-vp-expandcard (true/false) Expands credit card payment method area upon display. Tick symbol
data-vp-preauth (true/false) Reserve money from a credit card. Capture it later on and within a merchant specific timeframe (usually 20 days). Tick symbol
data-vp-walletonly (true/false) Disable credit card payment. Tick symbol

Step 2: Make the charge

Having the charge token submitted to your server, enables you to proceed with applying the actual transaction to your customer’s account/credit card. This can be achieved with a single HTTP POST request to /api/transactions as shown below.

A token can be used once only. Subsequent charges require new tokens.

public class TransactionResult
{
    public int ErrorCode { get; set; }
    public decimal Amount { get; set; }
    public string ErrorText { get; set; }
    public Guid TransactionId { get; set; }
}

public async Task<TransactionResult> ChargeAsync(string vivaWalletToken)
{
    var cl = new RestClient("https://demo.vivapayments.com/api/") {
        Authenticator = new HttpBasicAuthenticator("your_merchant_id", "your_api_key")
    };
    var request = new RestRequest("transactions", Method.POST) {
        RequestFormat = DataFormat.Json
    };

    request.AddParameter("PaymentToken", vivaWalletToken);

    var response = await cl.ExecuteTaskAsync<TransactionResult>(request);

    return response.ResponseStatus == ResponseStatus.Completed &&
        response.StatusCode == System.Net.HttpStatusCode.OK ? response.Data : null;
}

That’s it! If the call above succeeds, your customer was successfully charged. You can retrieve information about the transaction by making an HTTP call to GetTransactions API endpoint using the TransactionId received from the previous HTTP call or with the use of webhooks.

Step 3: Switch from demo to live (production)

After you’ve tested and are happy with your integration, don’t forget to replace in your JavaScript includes

<script src="https://demo.vivapayments.com/web/checkout/js"></script>

with

<script src="https://www.vivapayments.com/web/checkout/js"></script>

You’ll also need to:

  1. Update your data-vp-publickey attribute with your production key.
  2. Find your production Merchant ID and API Key and replace the demo versions.