Now that you have installed Paymattic, activated your license, and linked your Stripe and/or PayPal accounts, you are ready to go. Let’s build your first payment form with the Paymattic plugin.
In this article, we’re using Stripe Test Mode and PayPal Sandbox Mode to explain how the plugin works. Make sure that your payment confirmation pages are not cached.
In this post, we will have a look at how to build a simple one-time payment form that comes with a few fields, including credit card payment information. Please visit our demo site to learn more about the different types of available form configurations.
- First, log in to your WordPress admin panel and then go to Paymattic.
- Click the Add New Form button in the upper right corner.
- Now, select the Advanced Editor option or Simple Form Templates as per your needs.
- Here we select the Advanced Editor option to show you how to start from the root.
- Now, you will get some Form Templates and a New Blank Form.
- You can select your preferred templates later, but for now, select New Blank Form.
- Now, you will be landed on a form fields tab.
- Type ” / ” to insert fields or you can click on the + icon to see the fields section.
Here, you will find 3 different form field sections -General Fields, Donation & Product Fields, and Payment Method Fields.
General Fields section #
Then, under the General Fields area, select the Customer Name, Single Line Text, and Customer Email input fields. You may add these input fields with a single click or by dragging and dropping.
Customize the Single Line Text input field by clicking on the down arrow symbol on the right side of the field.
Fill in the Field Label and the placeholder with text, then make this field mandatory if you want. You can also set the input field default value. To complete the customization, click the Update button.
You can also check out this documentation to know more about General Fields.
Product Fields section #
Now, scroll down and you will find Donation & Product Fields area, for instance, Payment Item, Subscription Payment, etc fields.
Check out this documentation to know more.
I am adding the Payment Item for demonstration purposes.
You will find choices to change the product label, name, and price here. You can also add multiple items to your list or activate the image if necessary.
- You must first provide the Field Label with text (for example, Football), after which you can enable or disable the required field.
- Then, from the Payment Selection Option, select Single Item.
- Now, set the price of your product in the One Time Payment Amount field.
- Check the Show Item Title and Price option to display the product name and price in the form.
- Click on the Update button to save the fields.
Payment Method Fields #
You must now specify the payment method for this form. Go to the Payment Method Fields area on the right sidebar. Then select Card Elements (Stripe) from the list of payment options. Stripe accepts any credit card or debit card for payment. A payment panel section will be added to the form after you click it.
Then, to extend the payment panel portion, click the down arrow symbol. Multiple customization options are available; you can specify a new field label or use the present one.
Next, select a checkout display style. Select Stripe Hosted Checkout to take users to the Stripe hosted page during checkout. Select Embedded Checkout Field to display the checkout option as a pop-up.
You can also verify zip/postal code by enabling the Verify Zip/Postal Code option. Now press the Update button.
Keep in mind that pressing the update button will just update the field. To save the entire form as well as the fields, click the Save button.
Now, check the preview of the payment form you have developed on your website.
Once you’ve made your initial payment form, you must publish it on your website so that your customers can pay you for the products or services you sell.
Adding payment form to your website and accept payments with Paymattic #
To publish the payment form on your website and accept payments, you must place it on a specific page. To do so, you must embed the shortcode of the form on that specific page.
- Go to Paymattic → All Forms from your WordPress dashboard.
- Copy the ShortCode and paste it onto the specific text area of your webpage.
You may now use the form to accept payments with Paymattic from your customers for your products and services.
This is how you can easily create your first payment form with the Paymattic WordPress plugin.
