Webhook

Setting Up Subs Webhooks with Moralis or just listen

Webhooks offer a powerful way to automate reactions to specific events on the blockchain, enhancing the functionality and interactivity of applications. In the context of Subs, webhooks can be utilized to monitor subscription events and any custom actions that are pivotal to subscription management and analytics.

Blockchain webhook system

What are Webhooks ?

Webhooks, in essence, are automated messages sent from apps when something happens. They have URLs, making them web-accessible for receiving data immediately. Unlike typical APIs where you need to poll for data frequently, webhooks deliver data as it happens, ensuring real-time updates.

Why Use Webhooks with Subs ?

Integrating webhooks into your Subs-powered application allows for real-time monitoring and handling of subscription lifecycle events, payment confirmations, and any custom blockchain events that you define within your subscription logic. This enables automated workflows, such as:

• Notifications: Alerting users or administrators about subscription renewals, cancellations, or payment issues.

• Analytics: Gathering data on user interactions and subscription trends for better business insights.

• Compliance: Automatically tracking and reporting for regulatory compliance and auditing.

• Integration: Seamlessly connecting your Subs data with other tools and services for enhanced functionality.

Set Up Subs Webhooks with Subs Front

Just click on "Require users email address" and add your webhook url.

Subs webhook config

That's all. After each subscription, Subs will send you all the data relating to that subscription 🎉🎉🎉

Here is all type of events data Subs will sent after user subscription, cancellation or other actions.

Set Up your own Subs Webhooks with Moralis’ Web3 Streams API

The following sections will illustrate how to set up Subs webhooks using Moralis’ Streams API.

Moralis

You have two options for building your stream and receiving Subs webhooks on supported networks:

• Programmatically – The first alternative is to set up streams programmatically through the use of Moralis’ SDK or API - see an example here
• Via Moralis’ Admin Panel – The second alternative is to create streams using Moralis’ web UI. In this tutorial we will only use the second option

Via Moralis’ Admin Panel

Before start creating your stream, login on Moralis here

After login, create your stream :

Moralis stream page

After click on create stream, at the bottom of the page, you will have this view

1 - Events

Here, you'll need to choose what subs event you want to listen as webhook, most of the time it will be for new subscription on your app, but maybe also others. You can see all Subs events abis here. In this example we'll use the NewSubscription event, so copy and paste it in custom onglet. After that, click on NewSubscription and add your filter with your app ID. You can find your app ID on your app page here for testnet or mainnet.

We recommend you to create two apps on subs before testing your stream because sometimes the filter can have problems and your stream can end up listening to all the apps on Subs 😟. If you ever encounter this problem, edit your stream and at the bottom of the page, click on Swith to legacy, reconfigure your app in legacy mode, it should work normally.

Config Moralis with Subs event

2 - Add Stream tag

Tag is just a way for you to identify your stream. After adding your tag, click continue.

Add stream tag

3 - Add Subs Contract address

Here you will need to add Subs contract address, you can find Subs testnet contract addresses here and for mainnet here . Be sure to take your supported chain contract address. After copy and paste it, click to continue.

Paste Subs CA

4 - Choose chain

Choose the chains you have your subs apps on and continue

Choose chain

5 - Test your stream

Click on Live blocks and Launch Live Blocks , after that, subscribe to your app on Subs page to see if your stream work, if yes, you will have a response in the live playground if not, the playground will be empty. Don't forget to test your filter by testing a not filtered app and your filtered app.

Test the stream

6 - Deploy your stream

Recommend you to test it fast with webhook-site. Copy and paste your unique url. Click verify and after deploy your stream. After testing with webhook-site, you can edit the stream to change the webhook and work with yours.

Verify and deploy

Also notice that Moralis will send you two notifs per block, read more here

That's all, you've just set up your subs webhook with moralis 🎉🎉🎉

Just listen

Maybe you want to have your own in-house solution and not depend on a third-party service. You can just listen to the subs contract to see what's going on and make action. Here is an sample code to listen and make action when user subscribe to your app with ethersjs.

• Add your chain rpc url

• Add subs contract address

• Add the app ID for filter your app

import { ethers } from 'ethers';
// Event ABI
let eventABI = [
    {
        "name": "NewSubscription",
        "type": "event",
        "anonymous": false,
        "inputs": [
            {
                "type": "address",
                "name": "subscriber",
                "indexed": false
            },
            {
                "type": "uint256",
                "name": "appId",
                "indexed": true
            },
            {
                "type": "bytes32",
                "name": "subscriptionId",
                "indexed": false
            }
        ]
    }
];
// Build subs contract with ethersjs
const provider = new ethers.JsonRpcProvider("YOUR_CHAIN_RPC_URL");
const contract = new ethers.Contract(
    "SUBS_CONTRACT_ADDRESS",
    eventABI,
    provider
);
 // Add your filter to listen only your app
const filter = contract.filters.NewSubscription(null, YOUR_APP_ID, null)
// Listen
console.log("Listening for NewSubscription events...");
contract.on(filter, async (event, appId, subscriptionId, subscriber) => {
    let datas = {
        subscriber: event.args[0],
        appId: event.args[1],
        subscriptionId: event.args[2],
    };
    console.log("We got it", datas);
    // Your action

});

Thanks for your reading, see you 🎉🎉🎉