API Monetization with Apigee and Moesif Developer Portal

In this guide, you will learn how to monetize your Apigee API using Moesif. This guide also demonstrates how to leverage Moesif Developer Portal to offer a secure and extensible developer portal to developers that contains a rich set of tools from the Moesif platform for API monetization and productization.

For API access control, the tutorial uses JWTs (JSON Web Token).

Background

Apigee, as one of the most mature API management solutions available, offers robust features like traffic management, analytics, and developer app management. However, while Apigee monetization provides the foundation for API pricing models, it can impose limitations when your monetization strategy demands finer-grained billing, event-level usage tracking, or a self-service developer experience.

Moesif fills those gaps by providing API analytics, metered billing, and a fully customizable open-source developer portal. Together, Apigee and Moesif enable API providers to log detailed API usage data, bill based on flexible monetization models for better revenue generation, and offer developers a checkout flow for real-time subscription and access provisioning.

This tutorial demonstrates how to combine Apigee and Moesif Developer Portal to build a production-ready monetized API platform with self-serving onboarding, fine-grained billing, and visibility into customer behavior.

Objectives

  • Instrument Apigee to log API calls to Moesif using JavaScript policies.
  • Use Moesif Developer Portal for provisioning JWT-based API keys.
  • Configure Apigee to verify JWTs and allow end users access to services they’ve subscribed to.
  • Use Moesif to track and meter application usage, analyze usage patterns, and inform pricing strategies.
  • Use Stripe as the billing provider to monetize APIs based on the usage Moesif tracks and meters.

By the end, you will have a working prototype of a monetized API platform built on Apigee and Moesif. This will allow you to:

  • Support developer onboarding.
  • Generate revenue from your API services through more effective API monetization efforts.

Before You Start

This guide assumes you already have the following:

  • An Apigee deployment with API proxies configured
  • Familiarity with Apigee policies, particularly JavaScript
  • A Moesif account
  • A Stripe account
  • Basic knowledge of JWTs (JSON Web Tokens)
  • Node.js and npm installed to run the Moesif Developer Portal locally or in production.

Make sure you have cloned the Moesif Developer Portal.

You also need your Moesif Application ID and Management API key.

Set Up Moesif Developer Portal

Set Moesif Credentials

Set the following environment variables in my-dev-portal-api/.env:

  • MOESIF_APPLICATION_ID
  • MOESIF_MANAGEMENT_TOKEN

When you set the Management Token, make sure you omit the Bearer prefix.

Obtain Your Moesif Application ID

During the onboarding process when you sign up, Moesif shows you your Application ID. You can always obtain your Application ID by following these steps any time:

  1. Log into Moesif Portal.
  2. Select the account icon to bring up the settings menu.
  3. Select Installation or API Keys.
  4. Copy your Moesif Application ID from the Collector Application ID field.

Obtain a Moesif Management API Key

To generate a Management API key, follow these steps:

  1. In Moesif Portal, select the account icon to bring up the settings menu.
  2. Select API Keys.
  3. From the Management API Key section, select the necessary scopes and optionally set the key’s expiration time.
  4. Select Generate Token.

Make sure to at least select the Read scopes for the monetization, analytics, and dashboards resources. This allows you to view your plans, prices, subscriptions, and embedded workspaces in the developer portal frontend.

Set up Auth0

Moesif Developer Portal generates the JWT keys that you must use to make authorized requests to your Apigee API. However, you still need to use Auth0 to sign into the Developer Portal; the developer uses Auth0 to secure the front-end application and control access. This allows only authorized users to access APIs through the developer portal.

After you have created an Auth0 application, follow these steps to add Auth0-specific details in the developer portal:

Set Environment Variables in Dev Portal Frontend

Set the following environment variables in the my-dev-portal/.env file:

REACT_APP_AUTH_PROVIDER=”Auth0”
REACT_APP_AUTH0_DOMAIN=
REACT_APP_AUTH0_CLIENT_ID=

Set Environment Variables in Dev Portal API

Set the following environment variables in the my-dev-portal-api/.env file:

AUTH_PROVIDER=”Auth0”
AUTH0_DOMAIN=

Set up Stripe

This tutorial uses Stripe as the billing provider. Moesif tracks and meters the product usage according to a billing meter, and sends those details to Stripe. Stripe then charges the customer.

To configure Stripe for this tutorial, follow the instructions in Configure Stripe for Checkout.

Integrate Stripe with Moesif

  1. Log into Moesif Portal.
  2. Select the account icon to bring up the settings menu.
  3. Select Extensions .
  4. Search for Stripe and then follow the instructions.

Important: Make sure you select the Extension Enabled toggle on.

Add Stripe in Developer Portal

  1. Set the following environment variables in the my-dev-portal-api/.env file:

     APP_PAYMENT_PROVIDER="stripe"
 STRIPE_API_KEY=

  2. Set the following environment variables in the my-dev-portal/.env file:

     REACT_APP_STRIPE_PUBLISHABLE_KEY=
 REACT_APP_STRIPE_MANAGEMENT_URL=

To get the Stripe API keys, see Reveal secret or restricted API keys.

The other environment variable specifies the Stripe customer portal URL. For instructions on how to set up the customer portal, see Activate the no-code customer portal.

Create Product in Stripe

In Moesif, Stripe Products map to Plans. In the Developer Portal, you can see the existing Plans and choose to subscribe to the ones you want. If you don’t have any existing Products in Stripe, follow these instructions to create them.

You can also create products and prices in Moesif using Product Catalog and they automatically sync to Stripe Product Catalog in real time.

Set up Billing Meter in Moesif

Billing meters in Moesif performs two important tasks in API monetization process:

  • Track usage based on specific criteria.
  • Report that usage to the billing provider.

To create a Billing Meter, follow the instructions in Creating Meters.

The following shows an example billing meter for a GenAI API that meters on input token consumption.

A billing meter in Moesif for a GenAI API.

Set Up JWT

This tutorial uses JWT-based authorization to allow authorized access to APIs. The Developer Portal provisions the JWT that you must include in an HTTP request header for each API call to your Apigee API. Apigee verifies the token to allow or deny access to the API resources.

Setting up JWT in the Developer Portal involves providing it with the following information:

  • The secret or private key to sign the JWT with.
  • The claims that you expect the JWT to contain.
  • The key ID value of a JWT that uniquely identifies the JWT in a JWKS (JSON Web Key Set).
  • The expiration period of a JWT.

To set up JWT in Moesif Developer Portal, set the following environment variables in the my-dev-portal-api/.env file:

PLUGIN_APIM_PROVIDER="JWT"
PLUGIN_JWT_ALGORITHM=
PLUGIN_JWT_SECRET=
PLUGIN_JWT_KID=
PLUGIN_JWT_USER_ID_FIELD="sub"
PLUGIN_JWT_COMPANY_ID_FIELD="org_id"
PLUGIN_JWT_EXPIRES_IN=

These variables specify the necessary details so the Developer Portal can provision API keys—for example, the secret to sign the JWT with and the expiration period for the JWT token. By default, the Developer Portal uses the HS256 algorithm for JWTs. If you want to use RS256, set the PLUGIN_JWT_ALGORITHM variable to RS256.

Set up Apigee with Moesif

Integrate Moesif with Apigee

Integrating Moesif with Apigee involves three simple steps to add a JavaScript policy in the Apigee UI in Cloud console:

Step 1: Add the JavaScript Policy

  1. Open the Apigee UI Cloud console.
  2. Select API proxies from Proxy development.
  3. Select the proxy in which you want to add the policy.
  4. Select Develop.
  5. Select the plus + icon next to the Policies folder.
  6. Select the Extensible policies policy type.
  7. From the policy list dropdown, select JavaScript.
  8. In the JavaScript file list, select CREATE NEW RESOURCE.
  9. Select Import file in Source and upload the JavaScript file moesif-api-analytics.js.

Step 2: Configure the Policy

Within the XML definition for the JavaScript you just added, define the following properties and add your Moesif Application ID:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Javascript continueOnError="true" enabled="true" timeLimit="200" name="JS-MOESIF">
  <DisplayName>JS-MOESIF-API-ANALYTICS</DisplayName>
  <Properties>
    <Property name="applicationId">YOUR_MOESIF_APPLICATION_ID</Property>
    <Property name="logBody">true</Property>
    <Property name="debug">false</Property>
  </Properties>
  <ResourceURL>jsc://moesif-api-analytics.js</ResourceURL>
</Javascript>

Step 4: Enable the Policy

In the Proxy Endoints folder of the proxy you just added the policy in, attach the Moesif policy to the APIs you want Moesif to monitor.

Set Up JWT in Apigee

Let’s set up a simple HS256 algorithm-based JWT authorization in Apigee with these steps:

  1. Adding the JWT secret in Apigee using key-value maps (KVM).
  2. Add a policy that retrieves the JWT secret from the key-value map.
  3. Add a policy that verifies the JWT in the request

Add JWT Secret in KVM

To add the JWT secret in a KVM entry in Apigee, follow these steps:

  1. Use glcoud auth print-access-token to get an access token. This allows you to access the Apigee Management API to create a KVM and add an entry in the KVM to store the JWT secret.

  2. Add a new KVM:

     curl -X POST "https://apigee.googleapis.com/v1/organizations/ORG_ID/environments/ENV/keyvaluemaps" \
 -H "Authorization: Bearer ACCESS_TOKEN" \
 -H "Content-Type: application/json" \
 -d '{
 "name": "KVM_NAME",
 "encrypted": true
 }'

    Replace the following:

    • ORG_ID: your Apigee organization name
    • ENV: your Apigee environment name
    • ACCESS_TOKEN: your access token
    • KVM_NAME: the name of the KVM you want to create

  3. Add the JWT secret in the KVM entry. Make sure you add the same JWT secret value you added in the developer portal environment variable PLUGIN_JWT_SECRET.
    The following command adds the JWT secret in a KVM entry named JwtSecret with the key name Secret.

     curl -X POST "https://apigee.googleapis.com/v1/organizations/glorious-project-1234/environments/prod-env/keyvaluemaps/JwtSecret/entries" \
 -H "Authorization: Bearer ylSkZIjbdWybfs4fUQe9BqP0LH5Z" \
 -H "Content-Type: application/json" \
 -d '{
 "name": "Secret",
 "value": "bfd00aacf932139538aec7b9ae54b61459e33e12234177df4e2fe4947a5a71b1"
 }'

Add a Policy to Retrieve JWT Secret from KVM

  1. Open the Apigee UI Cloud console.
  2. Select API proxies from Proxy development.
  3. Select the proxy in which you want to add the policy.
  4. Select Develop.
  5. Select the plus + icon next to the Policies folder.
  6. Select the Extensible policies policy type.
  7. From the policy list dropdown, select Key Value Map Operations.
  8. Fill in the details of the policy and then select Create.
  9. Edit the policy as necessary to retrieve the JWT secret from KVM. The following policy looks at the KVM entry JwtSecret, retrieves the JWT secret value from the Secret key, and assigns the JWT secret value to the jwt_secret private flow variable: 
     <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <KeyValueMapOperations mapIdentifier="JwtSecret" async="false" continueOnError="false" enabled="true" name="GetJwtSecret">
 <DisplayName>GetJwtSecret</DisplayName>
 <ExpiryTimeInSecs>86400</ExpiryTimeInSecs>
 <Scope>environment</Scope>
 <Get assignTo="private.jwt_secret">
     <Key>
     <Parameter>Secret</Parameter>
     </Key>
 </Get>
 </KeyValueMapOperations>

  10. Attach the policy to a step in the PreFlow flow of your proxy endpoint:
    a. Select PreFlow in the relevant proxy endpoint in the Proxy endpoints folder—for example Proxy endpoints > default > PreFlow.

    b. Select the plus icon + in the Request pane.

    c. Select the policy you want to attach and then select Add.

Add a Policy to Verify JWT

  1. Open the Apigee UI Cloud console.
  2. Select API proxies from Proxy development.
  3. Select the proxy in which you want to add the policy.
  4. Select Develop.
  5. Select the plus + icon next to the Policies folder.
  6. Select the Standard policies policy type.
  7. From the policy list dropdown, select Verify JWT.
  8. Fill in the details of the policy and then select Create.
  9. Edit the policy as necessary to verify the JWT. For example, the following policy reads the JWT token from the Authorization request header and verifies it using secret from the jwt_secret private flow variable: 
     <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <VerifyJWT async="false" continueOnError="false" enabled="true" name="Verify-JWT-HS256">
 <DisplayName>Verify HS256 JWT from Authorization Header</DisplayName>
 <Properties/>
 <Algorithm>HS256</Algorithm>
 <Source>request.header.Authorization</Source>
 <SecretKey>
     <Value ref="private.jwt_secret"/>
     <Algorithm>HS256</Algorithm>
 </SecretKey>
 </VerifyJWT>

  10. Attach the policy to a step in the PreFlow flow of your proxy endpoint. Make sure this policy is positioned after the previous policy that retrieves the JWT secret.
    a. Select PreFlow in the relevant proxy endpoint in the Proxy endpoints folder—for example Proxy endpoints > default > PreFlow.

    b. Select the plus icon + in the Request pane.

    c. Select the policy you want to attach and then select Add. 

Save Changes and Deploy

Select Save to save your changes and then select Deploy.

Now without a Authorization header, your request results in a 401 Unauthorized error:

{
  "fault": {
    "faultstring": "Failed to Resolve Variable : policy(Verify-JWT-HS256) variable(request.header.Authorization)",
    "detail": {
      "errorcode": "steps.jwt.FailedToResolveVariable"
    }
  }
}

Run the Developer Portal

Start the Developer Portal API

  1. Enter the ./my-dev-portal-api directory.
  2. Install the dependencies by running npm install in your terminal
  3. Run node app.js to start the backend of the developer portal:

Start the Developer Portal Frontend

  1. Enter the ./my-dev-portal directory.
  2. Install the dependencies by running npm install in your terminal.
  3. Run npm start to start the developer portal frontend.

The browser opens up the Developer Portal on http://127.0.0.1:4000. If not, you can manually enter the address your terminal shows after running npm start.

To verify that the components are working properly, follow the instructions in Testing the Developer Portal.

Subscribe

After logging in, go to the Plans page of the developer portal to see the Stripe products you’ve created earlier. To simulate a real-world scenario, the Developer Portal only generates an API key after you’ve subscribed to a product.

'Plans' page in Moesif Developer Portal.

Get the JWT API Key

After subscribing to a plan, go to the API Keys page and select Create Key. Copy the key and send a request to your API with the Authorization HTTP request header set to the JWT you just generated:

curl -X GET -H "Authorization: JWT_KEY" https://my-api-product.io

Wrapping up

Combining Apigee with Moesif gives you the missing parts of the Apigee monetization equation—event and customer visibility, flexible billing, and a self-service developer portal. You now possess everything you need to build, price, and launch monetized API products that actually scale with customer value.

Don’t wait until your API usage grows faster than your billing infrastructure can handle. You can start with a single product, connect it to Stripe and Moesif, and ship a basic monetized Apigee API in a short amount of time and effort. From there, you can experiment with different API monetization models to further align your API business model for sustainable and predictable revenue.

Next Steps

Updated: