Online payments

Overview

With online payments, the user will will be redirected to the provider application to make their payment.

The following services are supported:

  • PayPay Online
  • Alipay Online
  • Alipay Plus Online
  • WeChat Pay Online

Online payments can only be used for regular charges (one-time tokens). Subscriptions and recurring tokens are not supported.
Also depending on the user’s device and the service, some payment methods might not be available.

Payment flow

Upon entering our EC checkout and filling up their basic information, the users will be redirected to the service provider screen, where they can log in or move to an app to make their payments.

PayPay Online

With a computer

  • The user logs in to the service via the browser and receives a one-time code by text message that they will have to enter to make the payment
  • A QR is displayed, which the user can read with their mobile device to make the payment

With a mobile device

  • The user opens the mobile application to make the payment
  • The user logs in to the service via the browser and receives a one-time code by text message that they will have to enter to make the payment

Alipay Online

With a computer

  • The user enters their Alipay account info and payment password to make the payment

With a mobile device

  • The user opens the mobile application to make the payment
  • The user enters their Alipay account info and payment password to make the payment

Alipay Plus Online

With a computer

  • A QR is displayed, which the user can read with their mobile device to make the payment

With a mobile device

  • The user selects the wallet to pay with and opens the relevant app on their device to make the payment

WeChat Pay Online

With a computer

  • Not supported

With a mobile device

  • The user opens our checkout form via the mobile browser (outside of the app). After entering their details, they will be redirected to the Wechat Pay app to make the payment. (Not possible with the EC link form)
  • The user opens our checkout form in the app and make the payment directly in the app

Widget & EC link form

EC link form
For more details, please check the API reference.
The following options are not available for online payments with the EC link forms:

  • Card registration (recurring token)
  • CVV auth
  • Subscriptions
  • Auth/Capture
  • Installments

To pay with WeChat in the EC link form, users will have to open the payment form through their WeChat app.
If Alipay or Alipay Plus are selected as payment method but the payment form is open through the WeChat app, the payment process will fail, so please access and process the payment from an external browser.

Widget
For more details, please check the API reference.
Widget HTML example:

<script src="https://widget.univapay.com/client/checkout.js"></script>
<form action="<optional URL>">
 <span data-app-id="<App token ID>"
  data-checkout="payment"
  data-amount="1000"
  data-currency="jpy"
  data-payment-types="paypay_online,we_chat_online,alipay_online,alipay_olus_online"
 ></span>
</form>

If you want all available payment methods to be displayed on the widget, remove the ‘data-payment-types’ line.

API

The information below is for merchants using their own checkouts and process payments via our API.

The flow for calling the payment page on the QR operator’s side in API processing is as follows.

1. Create a transaction token

A token is created based on the information entered by the user.
Different payment methods require different information and the values specified depend on the execution method requested by each client, e.g. http_get, http_post, etc.

Request body example:

{
  "payment_type" : "bank_transfer",
  "type" : "one_time",
  "email" : "demo@univapay.com",
  "data" : {
    "brand" : "alipay_plus_online",
    "call_method" : "http_get"
  },
  "metadata": {
    "memberid" : "12345"
  },
}

2. Create a charge

Create a charge based on the token information created in 1.
The charge amount, redirect URL after payment is completed and any metadata are also specified here.

Request body example:

{
"transaction_token_id": "9c3b37f8-1851-11e7-9b58-8b8ddbe8f1d1",
"amount": 1000,
"currency": "JPY",
"metadata": {
    "order_id": 12345,
    "shipping_details": "Customer wants it now"
  },
"redirect": {
    "endpoint": "https://test.url/path?additionalParams=paramValue"
  }
}

3. Charge details

Obtain the charge ID created in 2.
It can be obtained from the response to Charge: CREATE or from Charge: GET.
The charge status must be “awaiting”.

Response body example:

{
  "id": "0fe1e42a-1845-11e7-9b1f-d3bd0c055a99",
  "store_id": "af857264-180c-11e7-9be2-276aea4fed28",
  "transaction_token_id": "9c3b37f8-1851-11e7-9b58-8b8ddbe8f1d1",
  "transaction_token_type": "one_time",
  "subscription_id": null,
  "requested_amount": 1000,
  "requested_currency": "JPY",
  "requested_amount_formatted": 1000,
  "charged_amount": 1000,
  "charged_currency": "JPY",
  "charged_amount_formatted": 1000,
  "status": "awaiting",
  "error": null,
  "metadata": {
    "customer_id": 12345,
    "shipping_details": "Customer wants it now"
  },
  "mode": "test",
  "created_on": "2018-07-13T02:55:00.07367Z"
}

4. Issuer token

The payment screen on the QR operator’s side is called up based on the charge ID obtained in 3.
The URL for payment at each payment provider is issued in the response, so if the URL is displayed on the consumer side, the payment proceeds.
In test mode, the actual URL is not issued and the response "issuer_token": "test" is returned.

Response body example:

{
  "issuer_token": "test",
  "call_method": "http_get"
}