How to accept payments in your Streamlit application

First here's a short demo of the AI Streamlit app and how it works with Stripe payments:

In this video, you will see how a user is prompted via your Streamlit app to first log into your app. Once logged in and authenticated, users without credits will be prompted to subscribe to your AI. You have the choice to set up different plan options, such as Free and Paid plan plans. Once a user has subscribed, they will be able to access your AI under the conditions you set via each plan’s plan prerequisites.

How to setup a Streamlit Payment Plan

The following is a step-by-step guide to creating your own Payment Plan for your Streamlit app. Please note that this product is still a work in progress, and we have not yet made the Stripe payment piece fully available in production. If you would like to use the production Stripe integration to get paid, please contact us on Discord or at info@nevermined.io.

Step 1 - Set up your Builder Account in Nevermined

• Navigate to Nevermined
• Click “Log in”

• Select your sign in method

• Once logged in, click the “New” button in the top right, then click the “Create a plan” button.

Step 2 - Set up Stripe

• This will prompt you to continue creating your profile, updating it with your designated payment(s) type (i.e. Stripe).

• If you’d like to use Stripe as your payment gateway, select the Stripe option and click the “Create Stripe account” button

• Now you will set up your Stripe account

  • First enter your email and verify your phone number

• Next, describe your business for Stripe, including your business and personal details. This will help Stripe onboard you into their system.
• Once you’ve navigated the set up details, click “Agree and submit” to finalize your account set up.

Congratulations! You’ve successfully set up your Stripe account. Now let’s create your first payment plan.

Step 3 - Create a Payment Plan

• Click the “New” button, then the “Create a plan” button

• Describe the type of payment plan you wish to create for your users. For example, you may want to create a payment plan that allows your users to buy a set number of access credits for a certain price that your users will use to redeem access to your Streamlit app.

• Next, choose the type of plan you want to enable for your users. Here you have the selection of allowing your users to access your app for a period of time, or by a set number of requests. We’ve also included a set of templates you can use, like Free, time period plans (i.e 1 month, 1 year, etc.), custom plans, etc.

  • Request based plan - you can choose from a number of options, or create your own Custom plan. You are able to edit:
    • Title - Give your plan a descriptive Plan title.
    • Price - Set the price for you credits based plan.
    • No. of Credits - Set the number of credits your users receive when they buy this plan.

• Time period based plan - you can choose from a number of options, or create your own Custom plan. You are able to edit:

  • Title - Give your plan a descriptive Plan title.

  • Price - Set the price for you credits based plan.

  • Duration - Set the duration of time that your users can access your app when they buy this plan. Options include:

    • Hours
    • Days
    • Weeks
    • Months
    • Years

• Now review the payment plan set up and confirm by clicking “Next”

Step 4 - Specify your AI Service

• Next, you need to link your AI service, like your OpenAI GPT API, to the plan in order to manage access to your AI service. To do this, click the “Create Content” button.

• You start by describing the AI service you want to control access to. To do this, provide a Title, Description and cover image for the AI service.

• Next, add your specific AI service information via your AI’s API information. For example, if your AI is a text-to-text AI using OpenAI’s completion capability, you will register the corresponding OpenAI POST: https://api.openai.com/v1/chat/completions. For other third party AI services, you can register a similar API call.

(Please note that we support the OpenAPI standard for API information. This means that you can also set how you’d like to expose your endpoints.)

• Now add what type of security mechanism you’d like to enforce for User Authentication to your AI app. The options include:

  • No authentication
  • Basic Authentication with a username and password
  • Bearer Token authentication with designated access token.

In the case that you are using a third party service, like OpenAI, use the Bearer Token option to register your OpenAI API Key (OPENAI_API_KEY). This can be found from the third party service provider.

(Please note that Nevermined fully encrypts the Bearer Token information that you submit so that this information is never disclosed to anyone but yourse

• Now select the Payment plan that you created earlier and attach your AI service to this plan. This will enable the controls you’ve set for your AI app using this service. In this step you can also set the number of credits needed for each user to make one request for this AI service.

• Lastly, review your AI-service setup and click “Create”.

• Once you’ve successfully created the AI service, you can see its widget by clicking the “See the asset” button.

Step 5 - Get your Streamlit Embeddable Widget

• To create your embeddable widget into your Streamlit app, you will need your unique payment plan identifier, or DID. You can get this by copying the URL for the AI API / webservice that you just created. To do this, first navigate to “My area → My assets”.

• Click the 3 vertical dots for your AI webservice, and select “See Asset”.

• From the AI webservice page, copy the URL to use in the next step.

Embedding the Widget into your Streamlit App

The full example can be found here

Start by adding the widget to your app with the did of your webservice (e.g. did:nv:5a06236a0bb1620c171a17a2e4d82935b1b63274011aeb1d9efcce87e83f0fee).

st.markdown('<iframe src="https://testing.nevermined.app/streamlit?did=did:nv:5a06236a0bb1620c171a17a2e4d82935b1b63274011aeb1d9efcce87e83f0fee" style="border-radius: 10px; width: 100%;" />', unsafe_allow_html=True)

Wait for the user authentication token and proxy url. This should be added at the end of the app not to block other elements from rendering

html("""
<script>
    parent.window.addEventListener('message', (e) => {
        if (e.data.type === 'streamlit:token') {
            parent.window.token = e.data;
        }
    },false);
</script>
""", height=0)

key = 0
while "nvm" not in st.session_state:
    key += 1
    token = st_javascript('parent.window.token', key=key)
    if token:
        st.session_state["nvm"] = {
            "jwt": token["data"]["jwtToken"]["accessToken"],
            "url": f'{token["data"]["proxyUrl"]}/ask'
        }
        break
    time.sleep(1)

Use the returned authentication token and proxy url to make calls to the service. For example:

token = st.session_state["nvm"]["jwt"]
url = st.session_state["nvm"]["url"]

data = {"payload": "payload to post to the service"}
headers = {"Authorization": f"Bearer {token}"}

response = requests.post(url, json=data, headers=headers)