Card.js

Getting Started

Card.js is deprecated and will not be updated to support new browsers or payment APIs. Please refer to Omise.js for the payment form.

Card.js is built on top of Omise.js allows you to easily integrate a payment form into your website, tablet or mobile device. Card.js builds a credit card payment form window and creates a card token that you can use to create a charge with another Omise API client library (ruby, .net, ...) or with Omise Rest API.

Integration

Card.js is hosted on Omise CDN https://cdn.omise.co/card.js. In order to use Card.js below are what you need to have

  • HTML page which contains the checkout form that will post to your server to create a charge
  • Server side script for processing posted data. Omise provides numbers of API libraries (ruby, .net, ...) which you can use to implement on your server.

Example

Html Form

<html>
...
<body>
<form name="checkoutForm" method="POST" action="checkout">
    <input type="hidden" name="description" value="Product order ฿100.25" />
    <script type="text/javascript" src="https://cdn.omise.co/card.js"
      data-key="YOUR_PUBLIC_KEY"
      data-image="PATH_TO_LOGO_IMAGE"
      data-frame-label="Merchant site name"
      data-button-label="Pay now"
      data-submit-label="Submit"
      data-location="yes"
      data-amount="10025"
      data-currency="thb"
      >
    </script>
    <!--the script will render <input type="hidden" name="omiseToken"> for you automatically-->
</form>
</body>
</html>

Card.js renders a 'Pay now' button on your form. The button triggers a popup window which user can enter credit card information.

If you inspect the element in the HTML debugger tool, you will see an additional <input type="hidden" name="omiseToken"> element generated by the script. This will be used to handle the token returns from Omise.js.

Arguments

Argument Value
data-key (required) the public key that you can find in your dashboard once you're signed in.
data-image (optional) the URI to your logo image. eg. http://example.com/logo.png
data-frame-label (optional) the header text you want to show in the credit card popup window
data-button-label (optional) the label to be displayed in the button that is embeded in your form
data-submit-label (optional) the label to be displayed in the submit button in credit card popup window
data-location (optional) presence of this attribute with any non-blank value indicates that the popup will have the Postal code and City fields included.
data-amount (required) the amount to be paid in the smallest unit of the currency, e.g. Satangs (100 Satangs = 1 THB)
data-currency (required) the currency to be displayed in the payment window

Server side script (using Omise Ruby library)


def checkout

 token = params[:omiseToken]
 checkout_description = params[:description]
 checkout_amount = 10025

 charge = Omise::Charge.create({
  return_uri: "https://example.com/orders/384/complete",
  amount: checkout_amount,
  currency: "thb",
  description: checkout_description,
  ip: "127.0.0.1",
  card: token
})

end

Upon user submits the credit card information, the Card.js will set the returned card token to 'omiseToken' hidden input and then submit your form automatically.

Styling the 'Pay now' button

There is no style attached to the generated button. This allows you to freely style it the way you want.