Drop-In Storefront

The Drop-In Storefront displays multiple Revenium products within ACM and allows an integrated registration and checkout experience between Anypoint and Revenium.

1. Overview

The Drop-In Storefront is the recommended Salesforce Lightning Web Component for most scenarios involving MuleSoft API monetization.

Utilizing this component enables a checkout process that is fully-integrated with MuleSoft's "request access" functionality to create new API contracts between the logged in subscriber and the API gateway. The checkout process can automatically invoke a credit card payment requests for products configured with an external payment provider, or it provides for self-service registration for companies who are enabling API commerce with traditional "offline" contracts for API subscriptions.

Regardless of which payment method is used, Revenium metering is automatically enabled for contracts & API credentials created with this component.

The Drop-In Storefront can utilize synchronization with Anypoint API groups if desired. This allows for additional automation of the process for a product manager to create products that are automatically sync'd to Anypoint, though this is not required if you do not intend to automate the product creation process in Anypoint Exchange.

2. Component Properties

The following properties are available in the Drop-In Storefront component. Use these properties to customize the component display in Experience Builder.

Display Configuration

Property	Type	Default	Description
Max Cards To Display	String	4	Controls the number of Product Cards displayed in the Carousel at one time. Horizontal scroll bars will be displayed to allow additional products to be viewed by the subscriber.
Product Icon	ContentReference	-	Use this property to select an icon uploaded to Salesforce CMS and display it in the designated space.
Anypoint Instance Type to Display	String	both	Allows you to filter the types of APIs displayed in this component (public, private, or both).
Latest Anypoint Version to Display	String	public-or-private	By default, Revenium's storefront displays the latest version of your API. Choose whether to show the latest public version, the latest private version, or the latest version between both types.
Description Align	String	left	Controls the Product Description text alignment (left, center, right).
Description Text Size	String	normal	Controls the Product Description text size (normal or small).
Conditional Login Message	String	-	Custom message displayed after the product description when the product is not in preview mode.
Preview Login Message	String	-	Custom message displayed after the product description when the product is in preview mode.

Product Description Template

Property	Type	Default	Description
Product Description Template	String	$shortDescription	Pulls product information dynamically from Revenium. Use the syntax $propertyName to access Revenium Product properties. Updates to product pricing, description, quotas, etc. in Revenium are displayed dynamically without code changes.

Syntax: Use $propertyName to access Revenium Product properties.

Example: The string $baseCost per $transactionType will result in $100.00 per subscription.

Sample Template for Full Product Display:

<b>$transactionType Plan</b><br>
<b>Base Cost:</b> $baseCost<br>
<b>Free Trial Period:</b> $trialPeriodCount $trialPeriod<br><br>
<b>Billed</b>: per $settlementPeriod<br>
$pricingDescription<br>
$description

Note: The Drop-In Storefront intelligently replaces certain variables so that lines with no information are not displayed (e.g., if a plan does not have a free trial, this line will be suppressed).

Important: If you use images in any product description fields that accept markdown syntax, you need to add the image hosting domain to the Trusted URLs with the "Allow site for img-src" configuration enabled.

Additional properties that can be input as variables can be found in the Revenium API documentation.

Button Configuration

Property	Type	Default	Description
Show Buttons	Boolean	false	Check this property to show the Product Details and Request Access buttons.
Product Details Button Variant	String	neutral	Controls the Product Details Button style, based on Lightning Design System directives (only has effect if Show Buttons is checked).
Product Details Button Label	String	Product Details	Label shown in the Product Details Button. Change this if you want the button to say "Product Information" instead of "Product Details".
Button Align	String	left	Controls the text alignment within the buttons.
Request Access Button Variant	String	brand	Controls the Request Access button style, based on Lightning Design System directives (only has effect if Show Buttons is checked).
Request Access Button Label	String	Request Access	Label shown in the Request Access Button. Change this if you want the button to say "Purchase Now" instead of "Request Access".

Organization & Environment

Property	Type	Default	Description
Mulesoft Organization ID	String	-	The products displayed in the Carousel depend on the organization linked via this field. Ensure this matches your linked Anypoint ID for proper linking of product catalogs between systems.
Mulesoft Environment Filter	String	-	Lists all environments in the linked MuleSoft environment (e.g., Sandbox & Production). Choosing from this filter will limit the API Groups shown to those in the selected environment.
Revenium Organization Filter	String	-	If you wish to only display products from a specific Revenium organization in your tenant, use this filter. Both subscriptions and their authentication details will be generated within the scope of your selected organization. If no organization is selected, they will be created in the organization that generated the API key used for calls.

Product Details Page Tabs

Property	Type	Default	Description
Show Title on Details Page	Boolean	true	If checked, the title will be shown to the user on the product details page.
Show Product Details Tab	Boolean	true	If checked, the product details tab will be shown to the user on the product details page.
Show Pricing Tab	Boolean	true	If checked, the pricing tab will be shown to the user on the product details page.
Pricing Model Title	String	Pricing Model	Specifies the title of the pricing model in the pricing tab.
Show Subscription Tab	Boolean	true	If checked, the subscription tab will be shown to the user on the product details page.
Show User Credentials Tab	Boolean	true	If checked, the user credentials tab will be shown to the user on the product details page.
Show Historical Usage Tab	Boolean	false	If checked, the historical usage tab will be shown to subscribed users. This tab displays usage metrics and analytics for the product.

UI Features & Display

Property	Type	Default	Description
Show Cancel Subscription Button	Boolean	false	If checked, a cancel button will be displayed allowing end subscribers to cancel their own subscriptions. If unchecked, subscribers must contact you to cancel and Revenium administrators can manage subscriptions on their behalf.
Show Invoice History	Boolean	true	If checked, a history of invoices will be shown to the user on the product details page.
Show Subscription Details Button	Boolean	true	If checked, a summary of an active subscription is displayed to users at the top of the product details page.
Show Product Instance	Boolean	true	If checked, a drop-down showing Anypoint's product instance is shown in the request access form.
Show Product Limiting Rate	Boolean	true	If checked, the product limiting rate (SLA) is shown in the request access form.
Show Assets Carousel	Boolean	true	If checked, the API carousel will be displayed on the product details page.
Show Source Column	Boolean	true	If checked, the asset's source column will be visible on the user credentials tab of the product details page.
Preview Ribbon	String	lower-left	Allows you to display a customizable ribbon on product cards, with options: upper-left, upper-right, lower-left, or lower-right.

Advanced Features

Property	Type	Default	Description
Use Revenium Logos	Boolean	true	If checked, product and asset logos are pulled from Revenium. If unchecked, they are pulled from Salesforce static resources instead.
Collect VAT Info	Boolean	false	If checked, the VAT input is displayed for products linked to a payment configuration with tax enabled.
Show Unencrypted API Credentials	Boolean	false	If checked, client secret keys are shown unencrypted in the User Credentials tab.
Use Defined Link on API Details	Boolean	false	If checked, the API Details button will redirect the user to the link defined in Revenium.

Grid Configuration

Property	Type	Default	Description
Default Display Mode	String	carousel	Choose the default display mode for products (carousel or grid).
Items Per Page (Grid)	String	12	Number of products to display per page when using grid view (6, 12, 18, 24, or 30).
Grid Columns	String	4	Number of columns to display in grid view (2, 3, 4, or 6). The layout will automatically adjust for different screen sizes.

Filter Configuration

Property	Type	Default	Description
Organization Filter Label	String	Owning Business Groups	Custom label for the organization filter section.
Categories Filter Label	String	Service Categories	Custom label for the categories filter section.
Filters Default Expanded	Boolean	false	If checked, filter sections will be expanded by default.
Hide Filters	Boolean	false	If checked, the filter panel (Owning Business Groups and Service Categories) will be hidden. The search bar will remain visible.

3. Requesting Access to an API Product

The Request Access Button automatically determines the product checkout workflow depending on whether a payment configuration option is set up for the product in Revenium.

• If a credit card payment configuration is set up for the product, then end subscribers will be asked to supply credit card information before access to the product is granted and Mulesoft credentials (client ID and secret) are created.

• If no credit card option is selected for the product, then the product is set up for 'offline' contracting (meaning paper / PDF contracts are established between you and your end subscriber). In this checkout method, access is granted for new applications without the need to supply a credit card during checkout.

• In either case, once the checkout process is completed, Anypoint credentials will be visible in the "My Applications" section of ACM, and those credentials are automatically linked in the background to a valid Revenium subscriptions so that metering will properly occur whenever the Mulesoft credentials are used to access an API within the product bundle purchased.

Note that products will only be displayed in the product carousel if the "Publish to Commerce" portal option is selected for the product configuration in Revenium.

Revenium will always use the latest API Group version published to Exchange.

You can review the Anypoint API Group Synchronization documentation for more information about this.

Figure 1. Drop-In Storefront example

4. Guest Subscriber configuration

In order for the Drop-In Storefront to work properly with the guest subscriber (public access), the Subscriber field Current_RM_Org__c should be properly populated with the Revenium's Organization Id you are employing. To to this, after inserting the Drop-In Storefront in your site's UI you need to the following steps:

1. Enter the Developer Console inside your Salesforce organization.

2. Go to the Query Editor.

3. Query the following: SELECT Name, Current_HC_Org__c FROM User WHERE Name LIKE '%Guest User%'

4. Make sure that for all the guest Subscribers you are planning to use, the field Current_HC_Org__c is properly populated with your Revenium's Organization Id.

5. Setting Up the Preview Ribbon in the Revenium UI

To configure the Preview Ribbon in the Revenium UI, follow these steps:

1. Enable the Ribbon Display

   • Navigate to the drop-in storefront configuration panel while creating or updating a product in the Revenium UI.

   • Check the Add highlight ribbon box. This action will reveal a text entry field where you can define the content of the ribbon, such as "Coming Soon" or "On Sale."

   • Note: If this field is left blank while the checkbox is selected, the ribbon text will default to "Coming Soon".

2. Customize Ribbon Placement

   • Locate the Preview Ribbon dropdown menu in the drop-in storefront builder settings.

   • Select one of the four possible ribbon positions:

     • upper-left

     • upper-right

     • lower-left

     • lower-right

3. Preview Your Configuration

   • After defining the ribbon content and placement, review the displayed product cards to ensure the ribbon appears as expected.