Payment Forms in Zephr are your out-of-the-box way to add a Paywall to your site. Choose your Product, select your Payment Options, and Zephr will do the heavy lifting to build a form for your end users to buy your products with.
As a prerequisite to this user guide, we recommend you read our Products guide and set up at least one product with a corresponding payment option before following this guide.
Creating a Payment Form
To create a payment form, navigate to the relevant Zephr Feature and select Add Outcome from the decision bar.
Scroll to the Components section, select Add a Component, then click the Add button below the Payment Form option.
This will take you to the Add Payment Form page. Along the top, you’ll see tabs for Payment Options and Custom CSS.
Custom CSS allows you to style your form to suit your brand. Payment Options is what we’ll focus on for this user guide.
First, complete the Details for your form, by giving it a Title and optional Description.
Select a Product
Next, select the product you want available for purchase on the form. If you haven’t set up any Products yet, take a look at our Products guide.
Select the Product you wish to associate with the form from the dropdown.
Below, you will see a section for Payment Options. Click Add a Payment Option and a modal will open.
Under the Select a Plan field you will see a list of payment options linked to the product you have selected on the previous page. Select an option, and write a description. This description will be shown to your end-users when they view and choose this payment plan.
Your payment option will now be available on the payment form screen. Repeat this process to add more payment options until you’re happy with the options available on your form.
The Recommended toggle will add a Recommended tag to each product it is checked against. For example, if you offer a monthly plan at $10 per month, and an annual payment option at $100 per year, you may wish to ‘Recommend’ the annual option as it is the best value for money.
Enable Promo Codes
If you are using Braintree as your payment provider, you may also be using Braintree Discount Codes. These can be set up as Promo Codes within Zephr by following out Braintree Integration Guide. Stripe also accepts Promo Codes. Details on this can be found here.
If you wish to use Promo Codes on your payment form, and have follow the integration to do so, toggle the Enable Promo Codes option to on.
Once complete, click Save.
When you’re happy with your Outcome, click Save, then drag the Paywall Outcome onto your rule canvas, connect it to your user journey, then save and publish your rule.
Once live, your payment form will look something like the above.