How To Customize Wix Pricing Plans for Subscriptions, Membership Fees, and Offline Payments Using Velo API

Welcome back to NewForm, your ultimate destination for honing your web design craft, finding market opportunities, and connecting with industry leaders. At NewForm, we're about more than just design—we're building a community of like-minded creatives ready to take their skills to new heights. After today's post, don't miss the chance to explore our design challenges, skill-building events, and exclusive sessions with top professionals over at NewForm Community!

So, let's jump into today's blog post, where we'll explore the fascinating world of customizing Wix pricing plans with code using the Velo API. Whether you're venturing into subscriptions, membership fees, or offering offline payment options, we've got you covered.

Introducing Wix Pricing Plans

If you've been working with Wix, you might be familiar with its versatile pricing plans feature—a fantastic tool for offering subscriptions and memberships on your website. But what if you want to push the boundaries and truly own the layout, design, and functionality? That's where using Wix elements combined with a touch of code magic comes in!

Getting Started: Setting Up Your Site

Before diving headlong into coding, let's set the stage:

1. Install the Paid Plans App: First, head to Wix's App Market and add the Paid Plans app to your site. This step sets up pages and backend functionalities essential for pricing plans.

2. Publish Your Site: To work with real plans, you'll need to publish your site. This ensures any plans you create in the backend are recognized and ready for customization.

Frontend and Backend Harmony

With setup out of the way, we turn our attention to customizing the pricing plans using Wix's Velo API:

Displaying Custom Plans

Step 1: Fetch Plans with Backend Magic

In Wix, data operations frequently take place in the backend for performance and security reasons. Start by querying the `plans` collection using `WixData` to fetch your plans, then return them to the frontend for display.

Step 2: Create a Stunning Repeater

Use a repeater on your page to display each pricing plan dynamically. This element can replicate a stylish design for each plan seamlessly.

javascript

$w.onReady(function() {

// Fetch plans and bind to the repeater

fetchPlans().then(plans => {

$w('#plansRepeater').data = plans;

});

});

Handling Plan Purchases

Step 3: Start Online Purchase

To enable subscribers to purchase plans, use `Checkout.startOnlinePurchase`. This handles the payment process conveniently via Wix's built-in payment system.

Offline Payments and Third-Party Integrations

Step 4: Crafting Offline Orders

Sometimes, you might want to take payments off-platform, be it cash, direct bank transfers, or third-party APIs like Stripe or PayPal. For these scenarios, use `createOfflineOrder` on the backend.

Step 5: Securely Mark Orders as Paid

Once an offline payment is confirmed, mark orders as paid securely from your webpage's backend. A webhook from your third-party payment provider can trigger this process automatically.

The Power of CSS and JavaScript

The beauty of integrating design with code lies in the flexibility it offers. Once you've implemented the logic, customize the appearance:

- CSS Styling: Craft attractive offers and intuitive UI elements using CSS.

- JavaScript Interactivity: Enhance user interaction with dynamic visuals and elegant animations.

Final Thoughts

Mastering the art of utilizing Wix's pricing plans with code unlocks a new realm of possibilities for your websites. Whether it's subscriptions, memberships, or offline payments, you can craft experiences that stand out with functionality tailored to your vision.

As fellow creators, we at NewForm know the thrill of building cool things online. If you're eager to learn directly from the best, discover invaluable resources, and participate in exciting web design challenges, we invite you to join us at NewForm. Our vibrant community is here to support your journey of relentless learning and creativity.

So why wait? Dive into our community today, explore boundless opportunities, and let's create incredible digital experiences together!

---

Thanks for reading—now go forth and create with confidence, armed with the secrets of customizing Wix pricing plans through the power of code and creativity.

By keeping the tone casual and educational, this post not only aids users in customizing Wix plans but also encourages them to engage with the NewForm community to further enhance their skills and professional connections.