Skip to content

Customer Portal APIs (0.0.1)

Comprehensive API documentation for the customer-facing subscription portal. These APIs enable customers to manage their subscriptions, update billing information, modify delivery schedules, and access their account details through your storefront.

Important: These APIs must be called from your shop's domain (e.g., https://www.myshop.com/apps/subscriptions/cp/api/**) and require customer authentication. Unauthenticated requests will return a 401 Unauthorized error.

Languages
Servers
https://www.myshop.com/apps

Customer Portal

Core customer portal APIs for managing customer account settings, authentication, and portal configurations.

Operations

Get currently logged-in customer ID

Request

Returns the customer ID of the currently authenticated customer from their Shopify session. This endpoint is used by the customer portal UI to identify which customer is logged in.

Use Cases:

  • Customer portal initialization - determine who's logged in
  • Fetch customer-specific data (subscriptions, orders, settings)
  • Validate customer session before displaying sensitive information
  • Personalize customer portal UI with customer name/email

How it works:

  • Customer must be logged in to their Shopify customer account
  • Session is validated via Shopify App Proxy
  • Returns Shopify customer ID (numeric)

Important Notes:

  • This endpoint only works when called from the shop domain (via Shopify App Proxy)
  • Customer must be logged in to Shopify
  • Returns null if customer is not authenticated
  • Do not use this for external API integrations - use External APIs with explicit customer ID instead

Authentication: Requires active Shopify customer session (browser-based)

curl -i -X GET \
  https://www.myshop.com/apps/subscriptions/cp/api/logged-in-customer

Responses

Customer ID retrieved successfully

Bodyapplication/json
integer(int64)
Response
application/json
6548267876558

Get custom CSS for customer portal

Request

Retrieves the custom CSS styling configuration for the customer portal. This endpoint returns all custom CSS rules that have been configured to customize the appearance, layout, and branding of the subscription customer portal.

What is Custom CSS? Custom CSS allows merchants to fully customize the visual appearance of their customer portal beyond the basic theme settings. This enables complete brand alignment and creates a seamless experience that matches the merchant's main store design.

Custom CSS Capabilities:

  • Layout Customization:

    • Modify page layouts and spacing
    • Adjust grid and flexbox configurations
    • Control responsive breakpoints
    • Customize navigation and sidebars
  • Typography:

    • Custom fonts and font families
    • Font sizes, weights, and line heights
    • Letter spacing and text transforms
    • Heading and paragraph styles
  • Colors and Branding:

    • Brand color palette application
    • Custom background colors and gradients
    • Button and link styling
    • Hover and focus states
    • Border colors and shadows
  • Component Styling:

    • Subscription card appearances
    • Form input styling
    • Button designs and interactions
    • Modal and dialog boxes
    • Navigation menus
    • Product images and thumbnails
  • Advanced Features:

    • CSS animations and transitions
    • Media queries for responsive design
    • Pseudo-elements and pseudo-classes
    • Custom icons using CSS
    • Transform and filter effects

CSS Structure: The returned CSS includes:

  • Global styles for portal-wide consistency
  • Component-specific styles
  • Responsive design rules
  • Theme overrides
  • Custom animations
  • Print styles (optional)

Common CSS Selectors Available:

/* Portal container */
.subscription-portal { }

/* Subscription cards */
.subscription-card { }
.subscription-card-header { }
.subscription-card-body { }

/* Buttons */
.btn-primary { }
.btn-secondary { }
.btn-cancel { }

/* Forms */
.form-control { }
.form-group { }
.form-label { }

/* Navigation */
.portal-nav { }
.nav-item { }

/* Product displays */
.product-item { }
.product-image { }
.product-title { }

Use Cases:

  • Apply custom branding to match main store design
  • Create unique visual experiences for different customer segments
  • Implement seasonal or promotional themes
  • Enhance mobile responsiveness
  • Add accessibility improvements (high contrast, larger fonts)
  • A/B test different portal designs
  • Integrate with design systems
  • Implement dark mode or theme switching

Important Notes:

  • CSS is sanitized for security (XSS prevention)
  • Certain properties may be restricted for security reasons
  • External resources (fonts, images) must use HTTPS
  • CSS is cached for performance - changes may take a few minutes to propagate
  • Invalid CSS syntax is automatically filtered out
  • Some core portal elements have !important styles that cannot be overridden

Best Practices:

  • Use specific selectors to avoid conflicts
  • Test across different browsers and devices
  • Keep CSS organized with comments
  • Use CSS variables for maintainability
  • Minify CSS for production performance
  • Consider accessibility in color choices (WCAG compliance)
  • Provide fallbacks for advanced CSS features

Security Considerations:

  • CSS is sanitized to prevent code injection
  • External URLs are validated
  • JavaScript in CSS is blocked (e.g., expression(), behavior())
  • Data URIs are validated for malicious content

Authentication: Requires valid X-API-Key header

Path
idinteger(int64)required
curl -i -X GET \
  'https://www.myshop.com/apps/subscriptions/cp/api/subscription-custom-csses/{id}'

Responses

Custom CSS successfully retrieved

Bodyapplication/json
idinteger(int64)
shopstringrequired
customCssstring
customerPoratlCSSstring
bundlingCSSstring
bundlingIframeCSSstring
Response
application/json
"{\n \"id\": 12345,\n \"shop\": \"example-shop.myshopify.com\",\n \"customCss\": \"/* Global Portal Styles */\\n\" +\n \".subscription-portal {\\n\" +\n \" font-family: 'Helvetica Neue', Arial, sans-serif;\\n\" +\n \" background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\\n\" +\n \" min-height: 100vh;\\n\" +\n \"}\\n\\n\" +\n \"/* Subscription Cards */\\n\" +\n \".subscription-card {\\n\" +\n \" border-radius: 12px;\\n\" +\n \" box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\\n\" +\n \" background: white;\\n\" +\n \" padding: 24px;\\n\" +\n \" margin-bottom: 16px;\\n\" +\n \" transition: transform 0.2s ease, box-shadow 0.2s ease;\\n\" +\n \"}\\n\\n\" +\n \".subscription-card:hover {\\n\" +\n \" transform: translateY(-2px);\\n\" +\n \" box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\\n\" +\n \"}\\n\\n\" +\n \"/* Primary Button Styling */\\n\" +\n \".btn-primary {\\n\" +\n \" background-color: #4A90E2;\\n\" +\n \" border-color: #4A90E2;\\n\" +\n \" color: white;\\n\" +\n \" font-weight: 600;\\n\" +\n \" padding: 12px 24px;\\n\" +\n \" border-radius: 6px;\\n\" +\n \" transition: all 0.3s ease;\\n\" +\n \"}\\n\\n\" +\n \".btn-primary:hover {\\n\" +\n \" background-color: #357ABD;\\n\" +\n \" border-color: #357ABD;\\n\" +\n \" transform: scale(1.02);\\n\" +\n \"}\\n\\n\" +\n \"/* Form Inputs */\\n\" +\n \".form-control {\\n\" +\n \" border: 2px solid #E0E0E0;\\n\" +\n \" border-radius: 6px;\\n\" +\n \" padding: 10px 14px;\\n\" +\n \" font-size: 14px;\\n\" +\n \"}\\n\\n\" +\n \".form-control:focus {\\n\" +\n \" border-color: #4A90E2;\\n\" +\n \" box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);\\n\" +\n \" outline: none;\\n\" +\n \"}\\n\\n\" +\n \"/* Responsive Design */\\n\" +\n \"@media (max-width: 768px) {\\n\" +\n \" .subscription-card {\\n\" +\n \" padding: 16px;\\n\" +\n \" }\\n\" +\n \" .btn-primary {\\n\" +\n \" width: 100%;\\n\" +\n \" }\\n\" +\n \"}\",\n \"enabled\": true,\n \"version\": 2,\n \"lastModified\": \"2024-02-20T14:45:00Z\",\n \"createdAt\": \"2024-01-15T10:30:00Z\",\n \"updatedAt\": \"2024-02-20T14:45:00Z\"\n}"

Calculate refund amount preview

Request

Calculates the refund amount that would be issued if a specific subscription order fulfillment were refunded. This provides a preview without actually processing the refund.

What it calculates:

  • Total refund amount (order amount minus processing fees)
  • Restocking fees (if applicable)
  • Gateway fees that cannot be refunded
  • Net refund amount customer will receive

Use Cases:

  • Show customer how much they'll get back before confirming refund
  • Display refund breakdown in customer portal
  • Validate refund eligibility

Important Notes:

  • This is a preview only - does not process refund
  • Refund amount may vary based on payment gateway
  • Some gateways don't refund processing fees
  • Refunds can only be issued for fulfilled orders

Authentication: Customer must be logged in and own the subscription

Path
idinteger(int64)required

Billing attempt ID

Query
subscriptionContractIdinteger(int64)

Subscription contract ID for validation

curl -i -X GET \
  'https://www.myshop.com/apps/subscriptions/cp/api/subscription-billing-attempts/refund-preview/{id}?subscriptionContractId=0'

Responses

Refund preview calculated successfully

Bodyapplication/json
Response
application/json
{ "orderAmount": 45.99, "processingFees": 1.5, "restockingFee": 0, "refundAmount": 44.49, "currency": "USD" }

Subscription Management

APIs for customers to view and manage their subscription contracts including status updates, frequency changes, and cancellations.

Operations

Billing & Payments

APIs for managing payment methods, billing information, and processing subscription payments.

Operations

Product Catalog

APIs for retrieving product information, selling plans, variant data, and subscription-enabled products available to customers.

Operations

Delivery & Shipping

APIs for managing delivery schedules, shipping addresses, delivery methods, and tracking order status.

Customer Retention

APIs for handling subscription cancellations, retention activities, and customer feedback management.

Loyalty Integration

APIs for integrating loyalty programs with subscriptions including points redemption and earning options.

Customization

APIs for accessing portal customization settings, translations, and theme configurations.