add stylesheets

assets/stylesheets/common/discourse-patrons.scss

@@ -0,0 +1,57 @@
+
+.discourse-donations-section-columns {
+  display: flex;
+  justify-content: space-between;
+
+  @include breakpoint(medium) {
+    flex-direction: column;
+  }
+
+  .section-column {
+    min-width: calc(50% - 0.5em);
+    max-width: 100%;
+
+    &:last-child {
+      margin-left: 0.5em;
+    }
+
+    &:first-child {
+      margin-right: 0.5em;
+    }
+
+    @include breakpoint(medium) {
+      min-width: 100%;
+
+      &:last-child {
+        order: 2;
+      }
+
+      &:first-child {
+        order: 1;
+      }
+    }
+  }
+}
+
+#card-element{
+  padding: 20px 0;
+}
+
+.discourse-donations-section-columns {
+  margin: 20px;
+  padding: 20px;
+  border: 1px $primary-low-mid solid;
+  background-color: $primary-low;
+}
+
+#card-action {
+  margin: 20px 0;
+}
+
+.discourse-donations-confirmation {
+  width: 100%;
+
+  td {
+    padding: 10px;
+  }
+}

assets/stylesheets/mobile/discourse-donations.scss

@@ -0,0 +1,8 @@
+.donations-category-header .donations-category-metadata {
+  flex-flow: wrap;
+  padding: 0 10px;
+
+  div {
+    padding-bottom: 10px;
+  }
+}

plugin.rb

@@ -10,6 +10,9 @@ enabled_site_setting :discourse_patrons_enabled
 
 gem 'stripe', '5.1.1'
 
+register_asset "stylesheets/common/discourse-patrons.scss"
+register_asset "stylesheets/mobile/discourse-patrons.scss"
+
 register_html_builder('server:before-head-close') do
   "<script src='https://js.stripe.com/v3/'></script>"
 end
@@ -19,6 +22,9 @@ extend_content_security_policy(
 )
 
 after_initialize do
+  ::Stripe.api_version = "2019-08-14"
+  ::Stripe.set_app_info('Discourse Patrons', version: '1.0.0', url: 'https://github.com/rimian/discourse-patrons')
+
   load File.expand_path('../lib/discourse_patrons/engine.rb', __FILE__)
   load File.expand_path('../config/routes.rb', __FILE__)
   load File.expand_path('../app/controllers/patrons_controller.rb', __FILE__)