Ninja Forms with Square Payment Gateway

1.Introduction #

Ninja Forms Square plugin is a WordPress plugin that allows customers to pay for their form using Square payment Gateway.
This extension will help you to create your form and add your Square payment settings so users will be able to pay via Square, so any product purchased through ninja form will have an option for users to pay via credit card data and this payment will integrate with Square transactions.

2.Plugin Description #

  • This plugin will provide you an option to add Square payment settings and specify price per each ninja form.
  • Add Square Credit Card pricing field per selected form.
Required Plugins
  • Ninja Form Plugin.
  • Page which will contains form must be https:// .

3.Connect Ninja Forms With Square #

Announcement: In Version 1.0.7 we have improved Sandbox support with the latest version of SQUARE V2 API in order to see test transactions in Square Dashboard.

TEST MODE PROCESS

Once you got access in Square then go to https://connect.squareup.com/apps  and follow these steps for Sandbox API:

Square Dashboard -> Apps -> My App -> Go to Developer Portal -> Click on New Application

Now enter a name for your application and Create App. The application dashboard displays your new app’s credentials. One of these credentials is the personal access token. This token gives your application full access to your own Square account.

Copy These credentials from Square Dashboard As Shown in Screenshot below -> Access token -> Application id -> Location ID

Once you Enable test mode then place above sandbox credentials in Plugin Setting Page and Click on save changes button.

LIVE MODE PROCESS

Go to the Admin panel settings and Click on Connect with Square button

Insert your Square Account credentials to logins.

Once your login permission page will appear. Kindly click on the “Allow” button to proceed further.

You have an authenticated Square account and will land on API Experts page, here you have the option to get a redirect yourself back to the website.

Finally, once you click on redirect me button which will bring you back on your website. Kindly select the location of your Square application and click Save changes.

4.Ninja Forms Settings with Square #

Add Square payment settings

  • Select the Square payment settings will be added from (Ninja forms→ Square).
  •  

     

  • Add Square Payment settings. (Add testing and live payment settings for Square payment account)
  • Add Square application settings to integrate with ninja form (Token – Application ID – Location ID)
  • Add square application test mode settings. Testing credit card must be processed using the following data.
  •  
    Test Card:
    Card Number: 4532 7597 3454 5858
    Card CVV: 111

    Add Ninja Form Square payment option.

  • Add Ninja form Square Payment option.
  •  

     

     

     

    Add Ninja Form Square pricing field

  • Add Ninja form Square Payment pricing field (Select Square payment→ Add price)
  • Note: Must fill Price in backend to accept Payment.

     

     

     

     

     

     

    View Ninja Form paid transaction via Square.

  • View paid Square transaction ID tracking number same number in Square.
  •  

     

     

     

    Form preview in front end

     

     

5.Conditional Payments #

  • You can also make conditional payments.
  • Below is an example of the addition of a number and radio fields, you also add number fields only.
  • Add a number field and radio list field in your form.

  • Enter values for the radio list. 

  • Also, add an HTML field.

  • Now go to the Advanced tab, then Calculations.

  • Here you need to add number and radio field tags for addition.

  • After adding the tags add a + for addition, between the field tags as shown below.
  • Also, enter the variable name.
  • Click Done.

  • Now go to HTML field settings and add the calculations tag.
  • Publish the form.

Frontend Form

  • Enter the credentials
  • Make a payment.

  • Square transaction

Help Guide Powered by Documentor
Suggest Edit

Leave a Reply

Scroll to Top