Omise.js

Omise.js is a JavaScript library which can be wired into your website to enable payments. This document will guide you through the steps in deploying an in-app checkout page and building your own credit card form using Omise.js

Payment API

setPublicKey(key)

Setup your public key to authenticate against Omise API.

Argument Value
key (required) key is the public keys that you can find in your dashboard once you're signed in.

createToken(type, object, callback)

Send the card object to Omise's server and create a one time use token that you can attach to a customer object or use to create a charge.

Argument Value
type (required) type of token you want to create. For now this value must be card.
object (required) a JavaScript object containing the 5 values required for a card: name, number, expiration_month, expiration_year, security_code. Parameters reference can be found here.
callback (required) a callback that will be triggered whenever the request with omise server is completed (for both error and success). Two arguments will be passed back into the callback. The first argument is HTTP status code; 200 for success or others for error such as 400. The second argument is the response from the Omise API.

Usage Sample

This demonstrates how to create a credit card form with omise.js.

Insert Omise.js into your page. You can select from either of our two CDNs.

Primary CDN (Singapore)

<script src="https://cdn.omise.co/omise.js.gz"></script>

Secondary CDN (Japan)

<script src="https://cdn2.omise.co/omise.js.gz"></script>

Set your public key in the script tag. Your public key can be found in your dashboard (Read more about authentication).

Omise.setPublicKey("pkey_test_4xpip92iqmehclz4a4d");

Your website is now ready with authentication for sending card information to Omise. Moving on, here’s how to create the credit card form.

HTML (index.html)

<div class="container">

  <form id="card-form" class="card-form">
    <div class="form-group">
      <label>Card Number</label>
      <input type="text" name="cardNumber" class="form-control" placeholder="••••••••••••••••" />
    </div>

    ...
    You can find the full version of this file at example like above.
    ...

    <div class="form-group">
      <button class="btn btn-primary">Checkout</button>
    </div>
  </form>


  <form id="checkout-form" action="/checkout.php" method="POST">
    <input type="hidden" name="token" />
    <!-- More information is you want -->
  </form>
</div>

Next, use Omise.js to send card data to Omise’s servers for Tokenization. Data is encoded before it’s sent off. This is to protect sensitive details from prying eyes. You can follow this example.

JavaScript (app.js)

(function() {

'use strict';

Omise.setPublicKey('YOUR_PUBLIC_KEY');

var cardForm     = document.getElementById('card-form');
var checkoutForm = document.getElementById('checkout-form')

cardForm.addEventListener('submit', submitHandler, false);

// Submit handler for checkout form.
function submitHandler(event) {
  event.preventDefault();

  var cardInformation = {
    name:             cardForm.nameOnCard.value,
    number:           cardForm.cardNumber.value,
    expiration_month: cardForm.expiryMonth.value,
    expiration_year:  cardForm.expiryYear.value,
    security_code:    cardForm.securityCode.value
  };

  Omise.createToken('card', cardInformation, function(statusCode, response) {
    if (statusCode === 200) {
      // Success: send back the TOKEN_ID to your server. The TOKEN_ID can be
      // found in `response.id`.
      checkoutForm.token.value = response.id;
      checkoutForm.submit();
    }
    else {
      // Error: display an error message. Note that `response.message` contains
      // a preformatted error message. Also note that `response.code` will be
      // "invalid_card" in case of validation error on the card.
    }
  });
}

})();

The source code for HTML and JavaScript can be found here.

PHP (checkout.php)

<?php

require_once dirname(__FILE__).'/omise-php/lib/Omise.php';
define('OMISE_API_VERSION', '2015-11-17');
// define('OMISE_PUBLIC_KEY', 'PUBLIC_KEY');
// define('OMISE_SECRET_KEY', 'SECRET_KEY');
define('OMISE_PUBLIC_KEY', 'pkey_test_52jyu0r8o4307z0zz00');
define('OMISE_SECRET_KEY', 'skey_test_52jyu0r8mim84ylp454');

$charge = OmiseCharge::create(array(
  'amount' => 10025,
  'currency' => 'thb',
  'card' => $_POST["omiseToken"]
));

if ($charge['status'] == 'successful') {
  echo 'Success';
} else {
  echo 'Fail';
}

print('<pre>');
print_r($charge);
print('</pre>');

Once the user submits the credit card information, the Omise.js credit card form will set the returned card token to omiseToken hidden input and will automatically submit your form.

Credit card form

Our pre-built credit card form is mobile, tablet and desktop responsive. Note: Previously, the credit card form was separated in a library called card.js. We recently made an update, and it is now part of Omise.js.

Credit Card form example

Data attributes

Name type default description
data-key string "" the public key which can be found on your dashboard.
data-amount number 0 the amount to be paid in the smallest unit of the currency, e.g. Satangs (100 Satangs = THB 1)
data-currency string "THB" the currency to be displayed in the payment window (THB, USD, JPY it can be lowercase).
data-image string "" the URI to your logo image. eg. http://example.com/logo.png.
data-frame-label string "Omise" the header text you want displayed in the credit card popup window.
data-frame-description string "" the description text will display below header text.
data-submit-label string "Checkout" the label to be displayed in the submit button in credit card popup window.
data-button-label string "Pay with Omise" the label to be displayed in the button that is embeded in your form.
data-location string "no" presence of this attribute with any non-blank value indicates that the popup will have the postal code and city fields included. (yes or no). This field will not appear if you defined both data-billing-name and data-billing-address
data-billing-name string "" billing name information to display at top of popup form. (Need to define together with data-billing-address)
data-billing-address string "" billing address information to display at top of popup form. Need to define together with data-billing-name)
data-card-locale string "en" language of credit card form. (en, ja, th)

Example

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <title>Example using `omise.js` credit card form</title>
</head>
<body>
<form class="checkout-form" name="checkoutForm" method="POST" action="/checkout">
  <script type="text/javascript" src="https://cdn.omise.co/omise.js"
          data-key="YOUR_PUCLIC_KEY"
          data-frame-label="Merchant site name"
          data-frame-description="Merchant site description"
          data-amount="10025"
          data-currency="usd">
  </script>
</form>

</body>
</html>

CSS

.checkout-form > button {
  display: inline-block;
  padding: 1em;
  border: 0;
  background-color: #1A53F0;
  color: white;
  outline: none;
  border-radius: 4px;
}

Omise.js renders a 'Pay with Omise' button on your payment form. The button will trigger a popup where the user enters their card information to complete payments.

The script will automatically render <input type="hidden" name="omiseToken"> when the form is submitted.

Credit card form customization

You can use omise.js credit card form JavaScript API via OmiseCard object. This allows different configurations to be made to specific buttons.

configure(config)

Set default configuration for every button that opens up the credit card form.

Name type default description
config object {} Default config for every button. Please see the configurations that are available below.

Examples

// Set default config.
OmiseCard.configure({
  publicKey:        'YOUR_PUBLIC_KEY',
  amount:           99500,
  currency:         'thb',
  image:            'YOUR_LOGO_URL',
  frameLabel:       'Merchant name',
  frameDescription: 'Merchant description',
  submitLabel:      'Pay',
  buttonLabel:      'Pay with Omise',
  location:         'no',
  billingName:      '',
  billingAddress:   '',
  submitFormTarget: null,
});

configureButton(selector, config)

Sets configuration for specific buttons. This is applicable when there are more than one button which triggers the credit card form.

Name type default description
selector string {} Selector for target button.
config object {} Configure for button. (You can using config same as default.)

Examples

// Default configure
OmiseCard.configure(/* ...config */);


// Button configure will merged and override with default configure.
// And has effect with this button only.
OmiseCard.configureButton('#checkout-button', {
  amount:           99500,
  currency:         'thb',
  image:            'YOUR_LOGO_URL',
  frameLabel:       'Merchant name',
  frameDescription: 'Merchant description',
  submitLabel:      'Pay',
  buttonLabel:      'Pay with Omise',
  location:         'no',
  billingName:      '',
  billingAddress:   '',
  submitFormTarget: null,
});

attach()

Attach configuration to all target buttons that have been configured using configureButton.

Examples

OmiseCard.configure({
  publicKey: 'YOUR_PUBLIC_KEY',
  amount: 99500
});

OmiseCard.configureButton('#checkout-button', {
  frameLabel: 'Merchant name',
  submitLabel: 'PAY RIGHT NOW !',
});

OmiseCard.attach();

Source code

We work in public and open source as much of our infrastructure as possible. Our libraries and docs are freely available on Github.