For those who can’t use Stripe, FastSpring is one of the best choices of adding payment system into your SaaS. The doc of FastSpring is so confusing, so I’d like to share how I set up two different recurring payment in my SaaS. I will use React as the example, but it won’t do too much with the React.
1. Create Subscriptions In FastSpring
Login to your FastSpring dashboard, click Products in the menu and select Subscriptions in the submenu. Create a new subscription and set a unique Product Path and remember it because we need to use it after.
After saving the new subscription, select the new subscription on the dashboard, click the Pricing and you can set the charge interval and price for each interval.
2. Create Storefront In FastSpring
I was confused about the relationship between StoreFront and Product. StoreFront is only about the style, and the Product(Subscriptions) is the content which put inside the StoreFront.
So here we create a new Popup Storefront, set the color, pick a logo to display. That’s it. We don’t have to select which subscription to display in this popup storefront at the moment because we can insert subscription content into the popup storefront dynamically in our code.
3. Import FastSpring Script
After creating a new storefront on FastSpring, click PLACE ON YOUR WEBSITE , copy past it into your HTML<head> . I added data-popup-webhook-received to the script as the webhook to receive the notification after a successful payment.
4. Setup Webhook For Successful Payment
I pointed paymentReceived as the the function to be called after receiving successful payment(see above), so I need to define window.paymentReceived in advance. In React, I define it when the SPA start.
5. Display Popup StoreFront With Specific Subscription
We’ve already imported FastSpring script so we can call window.fastspring directly and make our popup storefront to display different subscription by giving it different params.
Say we defined 2 subscriptions in FastSpring, path myproduct-monthly for monthly subscription and path myproduct-yearly for yearly subscription, and then we can call popup storefront with different subscription content as the following:
That’s it. I spent too much time on setting it up because of lacking doc and experience sharing, so I hope this article can help.
You may also need to take care of letting user cancel the subscription or syncing the subscription info which can easily found in FastSpring API doc.
About Yet
Yet is an online tool which helps people to build one-page business website without any code and design required.
