Skip to main content

App Assets

App assets are CSS, JavaScript, images, and other static files used by apps. This guide covers asset management for apps.

Asset Overview​

App assets are stored in the assets/ directory within each app:

app-name/
  assets/
    app.css
    app.js
    images/
      logo.png
      icon.svg

Asset Types​

CSS Files​

Stylesheets for app styling:

/* assets/app.css */
.razorpay-offer {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 4px;
}

.razorpay-offer .offer-text {
  font-weight: bold;
  color: #000;
}

JavaScript Files​

Client-side functionality:

// assets/app.js
(function() {
  const RazorpayApp = {
    init: function() {
      this.bindEvents();
    },
    
    bindEvents: function() {
      document.addEventListener('click', (e) => {
        if (e.target.matches('.apply-razorpay-offer')) {
          this.applyOffer();
        }
      });
    },
    
    applyOffer: function() {
      // Apply Razorpay offer logic
    }
  };
  
  RazorpayApp.init();
})();

Images​

Images used by the app:

  • Logos
  • Icons
  • Background images
  • Product images

Asset URLs​

Assets are served via the app asset URL pattern:

/apps/{tenant-id}/{app-id}/assets/{asset-name}

Example:

/apps/tenant123/razorpay-app/assets/app.js
/apps/tenant123/razorpay-app/assets/logo.png

Referencing Assets​

In Hook Snippets​

Reference assets in Liquid snippets:

{% comment %}
  Hook: theme_head
  Load app CSS
{% endcomment %}

<link rel="stylesheet" href="/apps/{{ tenant.id }}/{{ app.id }}/assets/app.css">
{% comment %}
  Hook: theme_body_end
  Load app JavaScript
{% endcomment %}

<script src="/apps/{{ tenant.id }}/{{ app.id }}/assets/app.js"></script>

In HTML​

Reference images:

<img src="/apps/{{ tenant.id }}/{{ app.id }}/assets/logo.png" alt="App Logo">

Asset Registration​

Register assets in app.json:

{
  "id": "razorpay-app",
  "name": "Razorpay App",
  "assets": [
    "app.css",
    "app.js",
    "images/logo.png"
  ]
}

Asset Loading​

Conditional Loading​

Load assets conditionally:

{% if settings.enable_app %}
  <link rel="stylesheet" href="/apps/{{ tenant.id }}/{{ app.id }}/assets/app.css">
{% endif %}

Async Loading​

Load JavaScript asynchronously:

<script src="/apps/{{ tenant.id }}/{{ app.id }}/assets/app.js" defer></script>

Lazy Loading​

Lazy load non-critical assets:

<script>
  window.addEventListener('load', function() {
    const script = document.createElement('script');
    script.src = '/apps/{{ tenant.id }}/{{ app.id }}/assets/analytics.js';
    document.head.appendChild(script);
  });
</script>

Asset Organization​

Organize assets logically:

assets/
  css/
    app.css
    components.css
  js/
    app.js
    utils.js
  images/
    logo.png
    icons/
      icon-1.svg
      icon-2.svg
  fonts/
    custom-font.woff2

Asset Best Practices​

1. Minimize Asset Size​

  • Minify CSS and JavaScript
  • Compress images
  • Remove unused code

2. Use Appropriate Formats​

  • SVG for icons and logos
  • WebP/PNG for images
  • WOFF2 for fonts

3. Namespace CSS​

Prefix CSS classes to avoid conflicts:

/* Good: Namespaced */
.razorpay-app-offer { }
.razorpay-app-button { }

/* Bad: Generic */
.offer { }
.button { }

4. Avoid Global Variables​

Use module pattern for JavaScript:

// Good: Namespaced
const RazorpayApp = {
  init: function() { },
  process: function() { }
};

// Bad: Global
function init() { }
function process() { }

5. Version Assets​

Include version in asset URLs for cache busting:

<script src="/apps/{{ tenant.id }}/{{ app.id }}/assets/app.js?v={{ app.version }}"></script>

Asset Dependencies​

External Dependencies​

Load external libraries if needed:

<link rel="stylesheet" href="https://cdn.example.com/library.css">
<script src="https://cdn.example.com/library.js"></script>

Internal Dependencies​

Load app assets in order:

<!-- Load CSS first -->
<link rel="stylesheet" href="/apps/{{ tenant.id }}/{{ app.id }}/assets/app.css">

<!-- Then JavaScript -->
<script src="/apps/{{ tenant.id }}/{{ app.id }}/assets/app.js"></script>

Asset Caching​

Assets are cached by the browser. Use versioning to force updates:

<script src="/apps/{{ tenant.id }}/{{ app.id }}/assets/app.js?v=1.0.0"></script>

Asset Security​

Content Security Policy​

Ensure assets comply with CSP:

{% comment %}
  Add CSP-compatible assets only
{% endcomment %}

No Inline Scripts​

Avoid inline scripts in assets:

{% comment %} Bad: Inline script {% endcomment %}
<script>
  // Inline code
</script>

{% comment %} Good: External file {% endcomment %}
<script src="/apps/{{ tenant.id }}/{{ app.id }}/assets/app.js"></script>

Asset Testing​

Test assets in different scenarios:

  1. Different Themes: Ensure assets work with all themes
  2. Responsive Design: Test on mobile, tablet, desktop
  3. Browser Compatibility: Test in different browsers
  4. Performance: Check asset loading performance

Asset Checklist​

  • All assets registered in app.json
  • CSS classes are namespaced
  • JavaScript uses module pattern
  • Images optimized and compressed
  • Assets load conditionally when needed
  • No inline scripts or styles
  • Assets work across themes
  • Performance optimized

Next Steps​