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 ACM 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

Figure 1 shows how the properties are displayed in the Drop-In Storefront. Use the following properties to customize the component display:

  • Max Cards to Display. 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. Use this property to select an icon uploaded to Salesforce CMS and display it in the designed space.

  • Anypoint Instance Type to Display: this allows you to filter the types of APIs displayed in this component (public, private, or both)

  • Latest Anypoint Version to Display: by default, Revenium's storefront will always display the latest version of your API. This box allows you to choose whether it is the latest public version, the latest private version, or the latest version between both types.

  • Product Description Template

Product Details Template is one of the most important fields in this component as it pulls product information dynamically from Revenium to display to your subscribers.

This allows any updates to product pricing, description, quotas, etc. in Revenium to be displayed dynamically to portal subscribers without any code changes required in ACM.

Use the Product Details Template Field to configure the Product Description shown in the carousel. You can access Revenium Product properties using the syntax $propertyName. For example, the string $baseCost per $transactionType will result in $100.00 per subscription. Additional properties that can be input as variables can be found in our API documentation. To display a catalog with the same information that is displayed in Figure 1, you can use the following description template:

// <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 that the Drop-In Storefront intelligently replaces certain variables in the storefront so that lines with no information are not displayed (i.e. if a plan does not have a free trial, this line will be intelligently suppressed from the product whereas the free-trial duration will be displayed on products that do include a trial).

If you use images in any of the 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.

  • Show Buttons. Check this property if you want to show the Product Details and Request Access buttons.

  • Description Align. Controls the Product Description text alignment.

  • Description Text Size. Controls the Product Description text size.

  • Button Variant. Controls the Product Details Button style, based on the Lightning Design System directives (this only has an effect if the Show Buttons property is checked).

  • Production Details Button Label. Label shown in the Product Details Button . i.e. if you want the button to say "Product Information" instead of "Product Details" you would change that text here.

  • Button Align. Controls the text alignment within the buttons.

  • Mulesoft Organization ID. The products displayed in the Carousel depend on the organization linked via this field so ensure that this matches your linked Anypoint ID for proper linking of product catalogs between systems.

  • Environment Filter: This will list all environments in the linked MuleSoft environment (i.e. Sandbox & Production). Choosing from this filter will limit the API Groups shown to those in the selected environment.

  • Request Access Button Variant. Controls the Request Access button style, based on the Lightning Design System directives (this only has an effect if the Show Buttons property is checked).

  • Request Access Button Label: Label shown in the Request Access Button (this only has an effect if the Show Buttons property is checked). i.e. if you want the button to say "Purchase Now" instead of "Request Access" you would change that text here.

  • Show Cancel Subscription Button: checking this box will display a cancel button that will allow end subscribers to cancel their own subscriptions in the developer portal. If this box is not checked, no cancel button will be displayed and end subscribers will not be able to cancel their own subscriptions. In this scenario, Revenium administrative subscribers can manage & cancel subscriptions on customer's behalf in the Revenium application.

  • Collect VAT Info: if this box is checked, the VAT input is displayed for products linked to a payment configuration with tax enabled, see Customer VAT ID Support for more details.

  • Revenium Organization Filter: If you wish to only display products from a specific Revenium organization in your tenant, you can do so using this filter. Remember that 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.

  • Show Product Description, Pricing, Subscription, User Credentials Tabs: If checked, the corresponding tab will be shown to the user on the product details page.

  • Show Pricing Tab: If checked, the pricing tab will be shown to the user on the product details page.

  • Pricing Model Title: Specifies the title of the pricing model in the pricing tab.

  • Preview Ribbon: The Preview Ribbon storefront parameter allows you to display a customizable ribbon on product cards, with options to position it in the upper-left, upper-right, lower-left, or lower-right; refer to section 5 for more details about the preview ribbon setup.

  • Show Assets Carousel: If checked, the API carousel will be displayed on the product details page.

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.

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.

Last updated

© Revenium - www.revenium.io