Accessing and modifying value from one element to display in another

Wappler General How To
#1

Hello

I am using Paddle as my payment gateway/reseller
and on my “Plans” page i want to display pricing

I am able to retrieve the price from Paddle using

<p class="paddle-gross" data-product="241xx" id="paddleprice">
                        </p>

The Paddle script source in the header is

<header>
        <h1>Fancy display heading</h1>
        <script src="https://cdn.paddle.com/paddle/paddle.js"></script>
        <script type="text/javascript">
            Paddle.Environment.set('sandbox')
            Paddle.Setup({ 
                vendor: 804xx , 
                completeDetails : true
            });
        </script>
    </header>

The price gets dispayed in local currency for eg USD 9.00

I want to format it as USD 9 and display it in another button
Also want to display monthly price so USD 3 (USD 9 is for 3 months)

How do i do that?

Thanks

#2

Please can someone help with this
Thanks

#3

You probably can’t use that functionality directly

You have to do this instead:

Paddle.Product.Prices(12345, function(prices) {
  console.log(prices);
  dmx.global.set('product1_prices', prices)
});

And then you dmx-text or dmx-bind the variable product1_prices to the element

Let me know if it works, I probably need to do the same in the future

P.S.: Thought you would be using Fastspring! Why Paddle now? :slight_smile:

#4

Hi!
This worked :

<script>
            function myFunction() {
                Paddle.Product.Prices(12345, 1,function(prices) {
              console.log(prices);
             

             var prod6= prices.price.gross.replace('.00', '').replace(/\D/g,'');
            dmx.app.set('prod6', prod6);
                });
                
             }		
        </script>

I spoke to them and they confirmed that they always use .(dot) as the currency separator, even for currencies like Euro.

For the math part , like dividing a subscription cost by number of months to display monthly cost , they suggested Pricing API 2.0 . It works well , but i wanted to avoid api calls and the error handling that goes with it so for now i’ll keep it simple, maybe implement it later if needed

https://sandbox-checkout.paddle.com/api/2.0/prices ( just need to add query params here)

https://developer.paddle.com/api-reference/b3A6MzA4NjA4Mjc-get-prices

I tried Fastspring and 2checkout too before deciding on Paddle

If i wanted a atomatically renewing subscription , with upgrades and downgrades i would have gone with 2checkout. (readymade customer portal , live support 24hrs)
Fastspring looked easy at first , but there were unbelievable problems like cannot specify inclusive of tax price for US dollars !

For my model I went with Paddle One time purchases ( which i use as a subscription top up)
So for example 3 months pack is a one time purchase product. A person can choose to buy it again at which point his subscription will be topped up

Fastspring and 2checkout do not have such an option. They insist that one time purchases be used only for lifetime acces. And if you use their subscription model with renewals turned off , you cannot prevent overlapping periods ( you have to handle that in your own code)

So a person can purchase subscription for Apr to Jun multiple times and that looks so weird in the customer portal until you refund the customer

In paddle i can atleast show that the subscription was topped up , and then refund if the purchase was was not intended .

I’m making an educational product and the goal should be that users should use it for a limited time and move on to real world material. So i think renewals will be less. And those that renew, they will renew only once or twice. Didn’t want the hassle of upgrades , downgrades , card details being compulsorily store (2checkout does this, cannot turn it off) , accidental multiple subscriptions for same period.

Paddle turned out to be perfect. And the customer support while not live , is in my opinion the best (very friendly , detailed ).

1 Like