Mondido Checkout

Our complete checkout is a dynamic and simple solution that focuses on a fast checkout and easy payment process. The goal is to enable a global checkout that lets every Payment Experience be as good as it possibly can be, across all products, service and devices.

About

Mondido's checkout is integrated on the merchant’s site using an HTML iframe, as well as into the order management system of the merchant. This can be done through standard REST calls or using the libraries that Mondido provides in several different programming languages.

The checkout can handle standard order information as well as very business specific order or product data. By using the metadata property, the merchant can utilize the full functionality that Mondido provides for the highest Conversion, Reporting and Fraud Management. Authorization and Capture and Refund can all be used along with more advanced commands.

Examples of Mondido Checkout

Benefits

• Offer the most popular payment methods
• One solution for global and local customers
• High security and availability
• Customizable UI and business rules
• Supports both B2B and B2C businesses

Implementation

To implement the Mondido Checkout, you need to follow these 4 easy steps:

1. Prepare account

You need to have a Mondido Merchant Account, which you can create here.
The account needs to be prepared for allowing the checkout to be rendered in a iframe, so you will need to change merchant settings or ask support for help.

2. Create transaction

On the merchant server, create an API request to create the transaction, which will return the transaction along with the URL needed for the iframe. Find information how to do the API request here: http://doc.mondido.com/api#transaction-create

EXAMPLE REQUEST

curl -v -X POST --user 1:custom00 'https://api.mondido.com/v1/transactions?locale=eng' \
  -d process=false \
  -d amount=5.00 \
  -d currency=sek \
  -d payment_ref=53dfaa67 \
  -d hash=b871a262b38bc2866f776731fedc4c64 \
  -d test=true \
  -d success_url=https://admin.mondido.com/payment-ok \
  -d error_url=https://admin.mondido.com/payment-error \
  -d card_expiry=9999 \
  -d card_cvv=200 \
  -d metadata=%7B%22random_variable%22%3A%22my%20special%20value%22%7D

EXAMPLE RESPONSE

{
  "payment_response": null,
  "id": 288062,
  "created_at": "2017-09-28T16:23:05Z",
  "processed_at": null,
  "merchant_id": 1,
  "amount": "5.00",
  "vat_amount": null,
  "payment_ref": "53dfaa67",
  "ref": null,
  "card_holder": null,
  "card_number": null,
  "test": true,
  "metadata": {
    "random_variable": "my special value"
  },
  "currency": "sek",
  "status": "pending",
  "card_type": null,
  "transaction_type": null,
  "template_id": null,
  "error": null,
  "fail_message": "",
  "success_url": "https://admin.mondido.com/payment-ok",
  "error_url": "https://admin.mondido.com/payment-error",
  "items": [],
  "authorize": false,
  "href": "https://pay.mondido.com/v1/form/e2QZ_2x_v_Bq9o2V7sjQ",
  "mpi_ref": null,
  "link_payment": false,
  "event_context": {
    "internal": {
      "implementation_type": "api"
    }
  },
  "client_info": {
    "raw_user_agent": "curl/7.54.0",
    "browser": "curl",
    "version": "7.54.0",
    "platform": null,
    "ip": "81.200.20.200",
    "accept_language": null
  },
  "currency_converter": null,
  "status_details": "",
  "response_hash": "1db9b94c877e3d756c24043c77c00189",
  "request_hash": "b871a262b38bc2866f776731fedc4c64",
  "stored_card": null,
  "customer": null,
  "subscription": null,
  "refunds": [],
  "refunds_all": [],
  "webhooks": [],
  "cost": {
    "id": null,
    "percentual_fee": "0.0",
    "fixed_fee": "0.0",
    "percentual_exchange_fee": "0.0",
    "vat_rate": "0.0",
    "total": "0.0"
  },
  "payment_details": null
}

file not found

file not found

file not found

Use the href property as iframe source address

3. Render iframe

The iframe loads the URL which is found in the transaction href property.

• A. Updating the cart
  If the customer changes the cart/order data, you need to update the transaction using the API (see 2. Create transaction) and then reload the iframe with the new URL.
• B. Handle resizing
  To make the User Interface as good as possible you should add functionality to resize the iframe depending on the content (i.e. the payment template loaded in the iframe). You can implement http://davidjbradshaw.github.io/iframe-resizer/ on the merchant server.

4. Show confirmation page

When the order is successfully processed the customer will be redirected to the provided URL (from the creation of the transaction). This URL should provide functionality to reload the top.location of the shop so that the confirmation page will be properly rendered to the customer.

Sequence Diagram Create Order

Diagram, showing basic data calls to make a Mondido Checkout Payment

Sequence Diagram Update Order

Diagram, showing how to update order

Confirmation Webhook

You should implement a confirmation Webhook either manually in the Mondido admin, or as a parameter sent into the API when creating the transaction. In the case where the customer redirect fails, our server-to-server Webhook will tell your system about the payment.

Read more about Webhooks here

FAQ

Metadata

Metadata is custom schemaless information that you can choose to send in to Mondido. It can be information about the customer, the product or about campaigns or offers.

The metadata can be used to customize your hosted payment window or sending personalized receipts to your customers in a webhook.

Example of metadata:

{
  "products":[
  {
    "id":"1",
    "name":"Nice Shoe",
    "price":"100.00",
    "qty":"1",
    "url":"http://mysite.com/product/1"
  }
  ],
  "user":{
    "email":"jd@email.com"
  }
}

The values like products, 1, name, are optional and can be named freely by the merchant. These will be shown in the transaction lists so you can analyze transactions based on metadata and get a comprehensive understanding of your sales.

Why Metadata?

One of the most important benefits of using Mondido is the power of the data that you can send with the payment. The more data you send in the more parameters you have to create custom payment flows and analyze transaction data to see what are your best selling items, services and products.

• Order information (price, vat, categories, materials, tags)
• Platform specs (iPhone/Android, OS version, screen size, locale)
• Application specs (version number, tokens, sessions)
• Customer information (location, language)

All sent in data can be visualized in your dashboard in graphs or charts so that you easy can follow up and analyze your sales. Mondido understands that making relevant and important business decisions starts with knowing your customers habits, likes and preferences. Incorporating metadata into the payment gives you the best chance to optimize your checkout, A/B test and bring intelligence into your business.

Updating the transaction with shop order ID

Liquid and Metadata

Liquid is an open-source, Ruby-based template language created by Shopify. It is a well-known framework and is used to load dynamic content on storefronts.

Liquid uses a combination of tags, objects, and filters to load dynamic content. They are used inside the Mondido Hosted Window Payment Form to display information from the payment data and make the template dynamic for each customer, product or transaction.

The official documentation can be found here: https://github.com/Shopify/liquid/wiki/Liquid-for-Designers

You can output information in your metadata to your Hosted Windows Form or in a Receipt Webhook using Liquid syntax. Using the example above, this is the way to output it:

Product name: {{ transaction.metadata['products'].first.name }}
Product quantity: {{ transaction.metadata['products'].first.qty }}

To loop all products:

{%for item in transaction.metadata['products']%}
<li>
  Name: {{ item['name'] }},
  Price: {{ item['price'] }} {{transaction.amount | upcase }},
  Quantity {{ item['qty'] }}
</li>
{% endfor %}

Liquid Syntax

Liquid is an open-source, Ruby-based template language created by Shopify. It is a well-known framework and is used to load dynamic content on storefronts.

Liquid uses a combination of tags, objects, and filters to load dynamic content. They are used inside the Mondido Hosted Window Payment Form to display information from the payment data and make the template dynamic for each customer or product.

The official documentation can be found here: https://github.com/Shopify/liquid/wiki/Liquid-for-Designers

Any information sent in to a Mondido Hosted Window Payment can be displayed in the Liquid tag format and can be displayed like this:

{{ transaction.amount }}
  {{ transaction.currency }}

All properties available in the Hosted Window are:

• Transactions
• Subscriptions
• Stored Card
• Plans
• Payment Details
• Merchants
• Refunds

{"eur":"10","sek":"100"}

{"eur":"0","sek":"0"}

Test Cards

To create test transactions you need to send in a test card number, and also a CVV code that can simulate different responses

When in test mode (test=true) you can use CVV codes to simulate different responses. Anything else will lead to Approved.

When in test mode (test=true) you can use specific expiry dates to simulate failed recurring card payments

Test customers

To create test invoice transactions you need to send in a test ssn number. Use different SSN numbers to simulate different responses.

• 1079304893
• 1818063073
• 1277188676

Supported Card Types

Accepted Currencies