Adding a Payment (or Donation) Component to a Form
The new Payment component (which can also be used for donations) is available in the CMS Form Builder. It is meant to replace the Donation Forms which will be retired in the future.
The Payment component requires a third-party payment processor. Current processors supported are Paypal or Stripe or Authorize.net. Hence, you must have an account with one of them to use and have access to obtaining a Client ID and Secret Key:
Authorize.net accepts payments both via credit card and electronic check.
How to obtain the PayPal Client ID and Secret Key
- Log in to your PayPal account.
- Go to PayPal Developer Applications.
- Go to Rest API apps and click the "Create App" button.
- Enter an App Name.
- Click "Create App."
- Click on the "Live" tab to view the live API Credentials.
- Scroll down and click "Show" under Secret.
How to obtain the Stripe Client ID and Secret Key
Refer to their documentation at https://support.stripe.com/questions/locate-api-keys-in-the-dashboard.
The Client ID is referred to here as : publishable key
The secret id is referred to here as secret key
Go to CMS / Add Ons / Custom Forms / Form Builder / Add Form
In the form, on the left side are the fields and components you can use in a form. In the "Extras" section choose the component "Payment Component". Click on it and it will be inserted into the form
Go to the field characterics on the RIght and set the following:
1. Choose your payment processor≥. You can choose Paypal or Stripe
2. Choose Currency Type
3. Choose a Payment Processing Mode:
- Sandbox (For Testing) - Uses generic testing credentials so you can test the form. No credentials are required. When first creating the form, you may want to choose this option so you can look at the form without making an actual donation.
- Production - choose this to enter your credentials for your donor site.
- Custom Sandbox for Testing - If you have established a sandbox with your donation vendor, they will give you credentials to use their sandbox.
Configuring for Payment Processor Mode = Production
Insert the Client ID and Secret ID into the settings.
Choose whether to allow the skipping of donations and if you prefer to use "Pay" instead of the word "Donate"
For each Donation Amount you wish to add, give it a label, and an Amount. You can choose to hide the label.
If you want the user to be able to name their own amount - Set "Allow other amount?" to Yes.
Click on 'Add Amount" for each Amount you wish to add to the form.
If you wish to map the donation to an object in Salesforce (for example "Opportunity") you can specify which fields in the Opportunity Record you wish the donation to be mapped to.
You may wish to create custom fields in the object you are mapping to, that are specific to your donation record keeping process.
Save the Field you've created.
Go to Advanced Options and indicate which page you'd like the form to display on.
Save the Form (after adding any other text or fields you wish in the form)
Your form will look something like this.
When submitting at authorize.net you can select between credit card and bank account for making your donation
Form not showing up? Double check these things:
- Is the form enabled?
- Did you indicate which page the form should appear on? Does the page actually exist?
- Make sure that the region for the form is set to an appropriate region on an internal page (or on the home page if that's where the form is going to appear).