Integrating Paddle with Streamlit

Using Streamlit
, ,
1

I’m trying to integrate paddle(https://www.paddle.com/) with streamlit for my app for adding payment functionality. Paddle uses paddle.js(Build an overlay checkout - Paddle Developer) for communication between the app and the paddle dashboard. I have added the html code with javascript in the components.html.

components.html(html_with_js_in_scripttags, height=740)

When I try the overlay in codepen(https://codepen.io/iammanish/pen/wvbvKoJ), it works perfectly fine and accepts payments, but when I use it in my streamlit app, i get something wrong as the error on the overlay. Is it possible to integrate paddle with streamlit or do i have to try something else? Do I have to create a bidirectional streamlit component?

2

Hey @ManishAradwad,

Thanks for sharing this question! Can you share a runnable code snippet so we can try to help debug?

3

Hi @Caroline, here’s a snippet you can try:

import streamlit as st
import streamlit.components.v1 as components

st.title("Buy Credits!")
components.html(
    """
    <!DOCTYPE html>
    <html lang="en" color-mode="user">

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
    <style>
    .pricing-page-container {
        max-width: 900px;
        margin: auto;
        text-align: center;
        margin-top: 2em;
        padding-left: 1em;
        padding-right: 1em;
    }

    .pricing-grid {
        display: block;
        margin-bottom: 1em;
    }

    .pricing-grid .starter-plan {
        background-color: AliceBlue;
    }

    .pricing-grid .pro-plan {
        background-color: HoneyDew;
    }

    .pricing-grid .enterprise-plan {
        background-color: LavenderBlush;
    }

    .pricing-grid>* {
        padding: 1rem;
    }

    @media (min-width: 768px) {
        .pricing-grid {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr;
        }
    }
    </style>
    <script>
    Paddle.Environment.set("sandbox");
    Paddle.Initialize({
        token: "test_c323cc27d717156b4dba434a77d",
        // prints events to console for debugging
        eventCallback: function(data) {
        console.log(data);
        }
    });
    // open checkout
    function openCheckout(items, customer) {
        Paddle.Checkout.open({
        items: items,
        customer: customer
        });
    }
    </script>
    </head>

    <body>
    <div class="pricing-page-container">
    <div class="pricing-grid">
        <div class="starter-plan">
        <h3>Starter</h3>
        <p>20 Credits</p>
        <p id="starter-price">$1</p>
        <p><small>$0.05 per credit</small></p>
        <button class="paddle_button" data-theme="dark" data-items='[{"priceId": "pri_01hx3qtpsef8fvkfa34q4vs32c","quantity": 1}]' data-customer-email="sam@example.com" data-customer-address-country-code="US" data-customer-address-postal-code="10021" href="#">Sign up now</button>
        </div>
        <div class="pro-plan">
        <h3>Pro<sup>save 15%</sup></h3>
        <p>100 Credits</p>
        <p id="pro-price">$4.5</p>
        <p><small>$0.045 per credit</small></p>
        <button class="paddle_button" data-theme="dark" data-items='[{"priceId": "pri_01hx3qtpsef8fvkfa34q4vs32c","quantity": 1}]' data-customer-email="sam@example.com" data-customer-address-country-code="US" data-customer-address-postal-code="10021" href="#">Sign up now</button>
        </div>
        <div class="enterprise-plan">
        <h3>Advanced<sup>save 25%</sup></h3>
        <p>200 Credits</p>
        <p id="pro-price">$8</p>
        <p><small>$0.04 per credit</small></p>
        <button class="paddle_button" data-theme="dark" data-items='[{"priceId": "pri_01hx3qtpsef8fvkfa34q4vs32c","quantity": 1}]' data-customer-email="sam@example.com" data-customer-address-country-code="US" data-customer-address-postal-code="10021" href="#">Sign up now</button>
        </div>
    </div>
    </div>
    </body>

    </html>
    """,
    height=740,
)

the same html code above is present in the codepen link i sent in the original post. the overlay works in the codepen as expected but in streamlit it gives the something wrong error.

4

Hi,

In the console I get this after clicking on “Sign up now” button:

{type: 'checkout.error', code: 'validation', detail: 'Something went wrong | API Error: The source page must be a valid URL.', documentation_url: 'https://developer.paddle.com/api-reference'}

it looks like when I click on “Sign up now” button, it tries to add a new iframe to the html code but since it doesn’t have a direct access to the html code, it gives Source page must be a valid URL as the error.