veritrans 2.1.3 → 2.2.0

data/example/rails/simplepay/Gemfile

@@ -0,0 +1,54 @@
+source 'https://rubygems.org'
+
+git_source(:github) do |repo_name|
+  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
+  "https://github.com/#{repo_name}.git"
+end
+
+
+# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
+gem 'rails', '~> 5.0.1'
+# Use sqlite3 as the database for Active Record
+gem 'sqlite3'
+# Use Puma as the app server
+gem 'puma', '~> 3.0'
+# Use SCSS for stylesheets
+gem 'sass-rails', '~> 5.0'
+# Use Uglifier as compressor for JavaScript assets
+gem 'uglifier', '>= 1.3.0'
+# Use CoffeeScript for .coffee assets and views
+gem 'coffee-rails', '~> 4.2'
+# See https://github.com/rails/execjs#readme for more supported runtimes
+# gem 'therubyracer', platforms: :ruby
+gem 'veritrans', '~> 2'
+
+# Use jquery as the JavaScript library
+gem 'jquery-rails'
+# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
+gem 'turbolinks', '~> 5'
+# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
+gem 'jbuilder', '~> 2.5'
+# Use Redis adapter to run Action Cable in production
+# gem 'redis', '~> 3.0'
+# Use ActiveModel has_secure_password
+# gem 'bcrypt', '~> 3.1.7'
+
+# Use Capistrano for deployment
+# gem 'capistrano-rails', group: :development
+
+group :development, :test do
+  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
+  gem 'byebug', platform: :mri
+end
+
+group :development do
+  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
+  gem 'web-console', '>= 3.3.0'
+  gem 'listen', '~> 3.0.5'
+  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
+  gem 'spring'
+  gem 'spring-watcher-listen', '~> 2.0.0'
+end
+
+# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
+gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

data/example/rails/simplepay/Gemfile.lock

@@ -0,0 +1,178 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    actioncable (5.0.1)
+      actionpack (= 5.0.1)
+      nio4r (~> 1.2)
+      websocket-driver (~> 0.6.1)
+    actionmailer (5.0.1)
+      actionpack (= 5.0.1)
+      actionview (= 5.0.1)
+      activejob (= 5.0.1)
+      mail (~> 2.5, >= 2.5.4)
+      rails-dom-testing (~> 2.0)
+    actionpack (5.0.1)
+      actionview (= 5.0.1)
+      activesupport (= 5.0.1)
+      rack (~> 2.0)
+      rack-test (~> 0.6.3)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.0.2)
+    actionview (5.0.1)
+      activesupport (= 5.0.1)
+      builder (~> 3.1)
+      erubis (~> 2.7.0)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.0.2)
+    activejob (5.0.1)
+      activesupport (= 5.0.1)
+      globalid (>= 0.3.6)
+    activemodel (5.0.1)
+      activesupport (= 5.0.1)
+    activerecord (5.0.1)
+      activemodel (= 5.0.1)
+      activesupport (= 5.0.1)
+      arel (~> 7.0)
+    activesupport (5.0.1)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (~> 0.7)
+      minitest (~> 5.1)
+      tzinfo (~> 1.1)
+    arel (7.1.4)
+    builder (3.2.2)
+    byebug (9.0.6)
+    coffee-rails (4.2.1)
+      coffee-script (>= 2.2.0)
+      railties (>= 4.0.0, < 5.2.x)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.12.2)
+    concurrent-ruby (1.0.3)
+    debug_inspector (0.0.2)
+    erubis (2.7.0)
+    excon (0.54.0)
+    execjs (2.7.0)
+    ffi (1.9.14)
+    globalid (0.3.7)
+      activesupport (>= 4.1.0)
+    i18n (0.7.0)
+    jbuilder (2.6.1)
+      activesupport (>= 3.0.0, < 5.1)
+      multi_json (~> 1.2)
+    jquery-rails (4.2.1)
+      rails-dom-testing (>= 1, < 3)
+      railties (>= 4.2.0)
+      thor (>= 0.14, < 2.0)
+    listen (3.0.8)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    loofah (2.0.3)
+      nokogiri (>= 1.5.9)
+    mail (2.6.4)
+      mime-types (>= 1.16, < 4)
+    method_source (0.8.2)
+    mime-types (3.1)
+      mime-types-data (~> 3.2015)
+    mime-types-data (3.2016.0521)
+    mini_portile2 (2.1.0)
+    minitest (5.10.1)
+    multi_json (1.12.1)
+    nio4r (1.2.1)
+    nokogiri (1.6.8.1)
+      mini_portile2 (~> 2.1.0)
+    puma (3.6.2)
+    rack (2.0.1)
+    rack-test (0.6.3)
+      rack (>= 1.0)
+    rails (5.0.1)
+      actioncable (= 5.0.1)
+      actionmailer (= 5.0.1)
+      actionpack (= 5.0.1)
+      actionview (= 5.0.1)
+      activejob (= 5.0.1)
+      activemodel (= 5.0.1)
+      activerecord (= 5.0.1)
+      activesupport (= 5.0.1)
+      bundler (>= 1.3.0, < 2.0)
+      railties (= 5.0.1)
+      sprockets-rails (>= 2.0.0)
+    rails-dom-testing (2.0.1)
+      activesupport (>= 4.2.0, < 6.0)
+      nokogiri (~> 1.6.0)
+    rails-html-sanitizer (1.0.3)
+      loofah (~> 2.0)
+    railties (5.0.1)
+      actionpack (= 5.0.1)
+      activesupport (= 5.0.1)
+      method_source
+      rake (>= 0.8.7)
+      thor (>= 0.18.1, < 2.0)
+    rake (12.0.0)
+    rb-fsevent (0.9.8)
+    rb-inotify (0.9.7)
+      ffi (>= 0.5.0)
+    sass (3.4.23)
+    sass-rails (5.0.6)
+      railties (>= 4.0.0, < 6)
+      sass (~> 3.1)
+      sprockets (>= 2.8, < 4.0)
+      sprockets-rails (>= 2.0, < 4.0)
+      tilt (>= 1.1, < 3)
+    spring (2.0.0)
+      activesupport (>= 4.2)
+    spring-watcher-listen (2.0.1)
+      listen (>= 2.7, < 4.0)
+      spring (>= 1.2, < 3.0)
+    sprockets (3.7.1)
+      concurrent-ruby (~> 1.0)
+      rack (> 1, < 3)
+    sprockets-rails (3.2.0)
+      actionpack (>= 4.0)
+      activesupport (>= 4.0)
+      sprockets (>= 3.0.0)
+    sqlite3 (1.3.12)
+    thor (0.19.4)
+    thread_safe (0.3.5)
+    tilt (2.0.5)
+    turbolinks (5.0.1)
+      turbolinks-source (~> 5)
+    turbolinks-source (5.0.0)
+    tzinfo (1.2.2)
+      thread_safe (~> 0.1)
+    uglifier (3.0.4)
+      execjs (>= 0.3.0, < 3)
+    veritrans (2.1.3)
+      excon (~> 0.20)
+    web-console (3.4.0)
+      actionview (>= 5.0)
+      activemodel (>= 5.0)
+      debug_inspector
+      railties (>= 5.0)
+    websocket-driver (0.6.4)
+      websocket-extensions (>= 0.1.0)
+    websocket-extensions (0.1.2)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  byebug
+  coffee-rails (~> 4.2)
+  jbuilder (~> 2.5)
+  jquery-rails
+  listen (~> 3.0.5)
+  puma (~> 3.0)
+  rails (~> 5.0.1)
+  sass-rails (~> 5.0)
+  spring
+  spring-watcher-listen (~> 2.0.0)
+  sqlite3
+  turbolinks (~> 5)
+  tzinfo-data
+  uglifier (>= 1.3.0)
+  veritrans (~> 2)
+  web-console (>= 3.3.0)
+
+BUNDLED WITH
+   1.13.1

data/example/rails/simplepay/README.md

@@ -0,0 +1,30 @@
+# Simplepay
+
+Example of checkout page using Midtrans Snap. A quick way to accept payment with
+a beautiful user interface done for you.
+
+This is a very simple, very minimalist example to demonstrate integrating
+Midtrans Snap with Ruby on Rails. To start:
+
+1. Install Ruby and Ruby on Rails
+2. Clone the repository
+3. `bundle install` on the directory
+4. Run `rake db:drop db:create db:migrate`
+5. Run `rails s`, and you are done. You can visit it at `http://127.0.0.1:3000`
+
+The Midtrans configuration is located at `config/initializers/veritrans.rb`. 
+
+## PaysController
+
+PaysController handle the notification from Midtrans. As each payment is processed
+asynchronously (you don't want your system to do nothing/wait when Midtrans system
+is also channeling your charge request to the bank/payment providers), all merchant
+need to implement the notification mechanism.
+
+The notification mechanism on your part allow Midtrans to callback your system
+and informing if the payment is really successful, or if the payment is rejected
+due to some reasons. Therefore, payment notification is an integral part to
+have a successful integration with Midtrans.
+
+The notification infrastructure in the client's part is implemented on
+`PaysController` which handle the callbacks from Midtrans (the `notify` action).

data/example/rails/simplepay/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require_relative 'config/application'
+
+Rails.application.load_tasks

data/example/rails/simplepay/app/assets/config/manifest.js

@@ -0,0 +1,3 @@
+//= link_tree ../images
+//= link_directory ../javascripts .js
+//= link_directory ../stylesheets .css

data/example/rails/simplepay/app/assets/javascripts/application.js

@@ -0,0 +1,16 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require jquery
+//= require jquery_ujs
+//= require turbolinks
+//= require_tree .

data/example/rails/simplepay/app/assets/javascripts/cable.js

@@ -0,0 +1,13 @@
+// Action Cable provides the framework to deal with WebSockets in Rails.
+// You can generate new channels where WebSocket features live using the rails generate channel command.
+//
+//= require action_cable
+//= require_self
+//= require_tree ./channels
+
+(function() {
+  this.App || (this.App = {});
+
+  App.cable = ActionCable.createConsumer();
+
+}).call(this);

data/example/rails/simplepay/app/assets/javascripts/pay.js

@@ -0,0 +1,18 @@
+jQuery(document).ready(function() {
+    var token = jQuery("#snap_token").val();
+
+    jQuery('.checkout-button').on('click', function() {
+        snap.pay(token, {
+            onSuccess: function(res) {
+                console.log("SUCCESS", res);
+                alert("Payment accepted!");
+            },
+            onPending: function(res) {
+                console.log("PENDING", res);
+            },
+            onError: function(res) {
+                console.log("ERROR", res);
+            }
+        })
+    })
+});

data/example/rails/simplepay/app/assets/stylesheets/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/example/rails/simplepay/app/assets/stylesheets/style.css

@@ -0,0 +1,254 @@
+* {
+  -moz-transition: all 0.3s;
+  -o-transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+body {
+  background: #ecece6;
+}
+
+@-webkit-keyframes $animation_name {
+  from {
+    -moz-transform: rotate(45deg) translate(-80px, 40px);
+    -ms-transform: rotate(45deg) translate(-80px, 40px);
+    -webkit-transform: rotate(45deg) translate(-80px, 40px);
+    transform: rotate(45deg) translate(-80px, 40px);
+  }
+  to {
+    -moz-transform: rotate(0deg) translate(0px, 0);
+    -ms-transform: rotate(0deg) translate(0px, 0);
+    -webkit-transform: rotate(0deg) translate(0px, 0);
+    transform: rotate(0deg) translate(0px, 0);
+  }
+}
+@-moz-keyframes $animation_name {
+  from {
+    -moz-transform: rotate(45deg) translate(-80px, 40px);
+    -ms-transform: rotate(45deg) translate(-80px, 40px);
+    -webkit-transform: rotate(45deg) translate(-80px, 40px);
+    transform: rotate(45deg) translate(-80px, 40px);
+  }
+  to {
+    -moz-transform: rotate(0deg) translate(0px, 0);
+    -ms-transform: rotate(0deg) translate(0px, 0);
+    -webkit-transform: rotate(0deg) translate(0px, 0);
+    transform: rotate(0deg) translate(0px, 0);
+  }
+}
+@-o-keyframes $animation_name {
+  from {
+    -moz-transform: rotate(45deg) translate(-80px, 40px);
+    -ms-transform: rotate(45deg) translate(-80px, 40px);
+    -webkit-transform: rotate(45deg) translate(-80px, 40px);
+    transform: rotate(45deg) translate(-80px, 40px);
+  }
+  to {
+    -moz-transform: rotate(0deg) translate(0px, 0);
+    -ms-transform: rotate(0deg) translate(0px, 0);
+    -webkit-transform: rotate(0deg) translate(0px, 0);
+    transform: rotate(0deg) translate(0px, 0);
+  }
+}
+@keyframes $animation_name {
+  from {
+    -moz-transform: rotate(45deg) translate(-80px, 40px);
+    -ms-transform: rotate(45deg) translate(-80px, 40px);
+    -webkit-transform: rotate(45deg) translate(-80px, 40px);
+    transform: rotate(45deg) translate(-80px, 40px);
+  }
+  to {
+    -moz-transform: rotate(0deg) translate(0px, 0);
+    -ms-transform: rotate(0deg) translate(0px, 0);
+    -webkit-transform: rotate(0deg) translate(0px, 0);
+    transform: rotate(0deg) translate(0px, 0);
+  }
+}
+/* button style */
+.cart {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  margin: 0;
+  margin-top: 100px;
+  position: absolute;
+  left: 50%;
+  margin-left: -20px;
+  -moz-border-radius: 9999em;
+  -webkit-border-radius: 9999em;
+  border-radius: 9999em;
+  border: none;
+  background: #e54040;
+  cursor: pointer;
+}
+.cart:hover {
+  -moz-box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);
+  box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.5);
+}
+.cart:hover .popup {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+  -webkit-animation-duration: 200ms;
+  -webkit-animation-name: show-popup;
+  -webkit-animation-direction: normal;
+  -webkit-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
+  -moz-animation-duration: 200ms;
+  -moz-animation-name: show-popup;
+  -moz-animation-direction: normal;
+  -moz-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
+  -o-animation-duration: 200ms;
+  -o-animation-name: show-popup;
+  -o-animation-direction: normal;
+  -o-animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
+  animation-duration: 200ms;
+  animation-name: show-popup;
+  animation-direction: normal;
+  animation-timing-function: cubic-bezier(1, 0.18, 1, 0.93);
+}
+
+/* popup window style */
+.popup {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 100%;
+  width: 250px;
+  margin-left: -105px;
+  margin-top: 20px;
+  background: #ffffff;
+  border: 1px solid #cbcbcb;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
+}
+.popup:after {
+  position: absolute;
+  content: ' ';
+  top: -30px;
+  height: 30px;
+  width: 100%;
+}
+.popup:before {
+  position: absolute;
+  content: ' ';
+  left: 117px;
+  top: -9px;
+  width: 16px;
+  height: 16px;
+  border-top: 1px solid #cbcbcb;
+  border-right: 1px solid #cbcbcb;
+  background: #ffffff;
+  -moz-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 1px -1px 1px 0 rgba(0, 0, 0, 0.2);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+/* data rows */
+.row {
+  padding: 15px 20px;
+  overflow: hidden;
+}
+.row.header {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U3ZTdlNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e7e7e7));
+  background-image: -moz-linear-gradient(top, #ffffff 0%, #e7e7e7 100%);
+  background-image: -webkit-linear-gradient(top, #ffffff 0%, #e7e7e7 100%);
+  background-image: linear-gradient(to bottom, #ffffff 0%, #e7e7e7 100%);
+  background-image: -ms-linear-gradient(top, #ffffff 0%, #e7e7e7 100%);
+  -moz-box-shadow: 0 1px 0 0 rgba(203, 203, 203, 0.75);
+  -webkit-box-shadow: 0 1px 0 0 rgba(203, 203, 203, 0.75);
+  box-shadow: 0 1px 0 0 rgba(203, 203, 203, 0.75);
+  -moz-border-radius: 5px 5px 0 0;
+  -webkit-border-radius: 5px;
+  border-radius: 5px 5px 0 0;
+  color: #747474;
+  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.75);
+  font: bold 11px Arial;
+}
+.row.items {
+  color: #e54040;
+  font: bold 18px Arial;
+  position: relative;
+}
+.row.items span:first-child {
+  color: #000000;
+}
+.row.items:after {
+  content: '';
+  position: absolute;
+  height: 1px;
+  width: 100%;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ffffff), color-stop(50%, #dddddd), color-stop(100%, #ffffff));
+  background-image: -moz-linear-gradient(left, #ffffff 0%, #dddddd 50%, #ffffff 100%);
+  background-image: -webkit-linear-gradient(left, #ffffff 0%, #dddddd 50%, #ffffff 100%);
+  background-image: linear-gradient(to right, #ffffff 0%, #dddddd 50%, #ffffff 100%);
+  left: 0;
+  top: 97%;
+}
+.row.checkout {
+  font: normal 12px Arial;
+}
+.row.checkout span:first-child {
+  padding: 3px 0;
+}
+.row.checkout a {
+  color: #e54040;
+  text-decoration: none;
+}
+.row.checkout a:hover {
+  text-decoration: underline;
+}
+.row span:first-child {
+  float: left;
+}
+.row span:last-child {
+  float: right;
+}
+
+.checkout-button {
+  padding: 3px 5px;
+  background: #e54040;
+  -moz-box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);
+  -webkit-box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);
+  box-shadow: inset 0 2px 7px 0 rgba(255, 255, 255, 0.3);
+  border: 1px solid #e06b6b;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  color: #ffffff;
+}
+.checkout-button:hover {
+  background: #e54040;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.checkout-button:active {
+  background: #e54040;
+  -moz-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+}
+
+.cart {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAAAGPSURBVHjajNNNi85RGAbw3zwzI/XMmEHeFYmSvJRSYsOWfAHZ+wAWakp8AAs+A5ImKzujUfKapQnZzIaVxzCYGcMzXRbuydO/Wcxdd+ecq3Ouc67rvk9fkqcY8T8mcA3frSIGcLKBfcMaq4wWpjCNjwi2o71aggGcQT92YBybcLTIZ7ABX7G+xlF8qvWgJMs5kuRFksUkDypPJLmd5FSSW0lOJ7lT+GSSt70E7SQ38i+eJDmSZE+SA0n21bi35heTdJMstnrkzOMlfmELhnEVQxjDOlzBDxwv2c/7kvR6sh+Py8QLeFde9GMJ3arQw/JqrNUwtVMVaWMbFnC51pfwGQfrhR1MNgnm8LpuPVsNdr0236xKncdgyZ0eaBD8xhss4hyOlea1hQ1ha0mZwM8mwRKe4VVJ6K9Daj6PD9V0j7DUNBH6sLNcn8efOtytp7cxW82U3j5Yzs1J7ieZSnI3yXDho0nGC7+XZGMSKxEcSjJbDdVJsrvwww18VxKtFf7HTH2wObwvGfClgS/A3wEAjJAlBBKFdqAAAAAASUVORK5CYII=);
+  background-repeat: no-repeat;
+  background-position: center;
+}