Simple Checkout

Kostas Xiradakis edited this page Jun 18, 2018 · 12 revisions

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:

  1. Ease of integration: minimal coding is required to start accepting payments
  2. Mobile first design: the checkout page is responsive and suitable to all screen sizes.
  3. No redirection: Users won't have to leave your site. Checkout page is rendered within your own web page.
  4. Security: User's input is protected with the use of an <iframe>. Host window scripts have no access to the checkout's internals and all cardholder data is encrypted in accordance to industry standards.
  5. User friendly: Simple checkout uses smooth animations to communicating errors to the user. Try pressing 'Pay' button with empty credit card fields ;)
  6. Pay with Credit card or Viva Wallet: Users can choose to pay using their Wallet's balance or a credit card.

STEP 1: Display the button

We are going to need jQuery to integrate Simple Checkout. Fire up a code editor and paste the code below to see the button rendered instantly, or edit it directly on 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 rendered within the browser without redirection. Two payment methods are available: pay using Viva Wallet or pay with credit card (included 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 his/her bank's page to authenticate (e.g. enter a password, or a 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

Required

Option Description
data-vp-publickey Your (demo or live) public key, available to your merchant profile. Please note that this is your publishable key, not the ‘API key’ you use for making server side calls to the Viva Payments API.
You will find your public key on Settings>API Access of your merchant profile, once you enable 'Enable Native/Pay with Viva Wallet checkout'
data-vp-amount The amount you wish to charge. The amount is entered in the currency's minor unit of measurement (ie cents for euros. to charge your customer 20,00 Euros you should enter the value “2000”)

Highly recommended

Option Description
data-vp-description A description of the payment, visible to your customer.
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
data-vp-lang The language in which the interface is displayed. Supported languages: 'el'-Greek, 'en'-English, 'ro'-Romanian
data-vp-background-color Sets button’s background color, Default value: #030408
data-vp-color Sets button’s text color, Default value: #fff
data-vp-hover-background-color Sets button’s background color on mouse over, Default value: #1a2242
data-vp-hover-color Sets button’s text color on mouse over, Default value: #fff
data-vp-border-radius Sets button’s roundness, Default value: 10px
data-vp-text Sets button’s text, Default value: Pay (when data-vp-lang="en"), Πληρωμή (when data-vp-lang=”el”)

Optional

Option Description
data-vp-sourcecode Your SourceCode. If ommitted, 'Default' SourceCode is used. For Sources with logos attached to them, checkout, will render the logo in the header area.
data-vp-customersurname Card holder's surname. Fills in the related form field
data-vp-customerfirstname Card holder's first name. Fills in the related form field
data-vp-customeremail Card holder's e-mail address. Fills in the related form field
data-vp-baseurl The target environment (demo/production). Use https://demo.vivapayments.com for development. If no value is set, Production environment is assumed.
data-vp-disablewallet (true/false) Disables Wallet payment method
data-vp-expandcard (true/false) Expands credit card payment method area upon display
data-vp-preauth (true/false) Reserve money from a credit card. Capture it later on and within a merchant specific timeframe (usually 20 days)
data-vp-walletonly (true/false) Disable credit card payment

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 only be used once. 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 was 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.

Switching from Demo to Live (Production) Environment

After you've tested and are happy with your integration, do not 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>

as well as updating your data-vp-publickey attribute with your production key.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.