Pre-filling a payment page with form details
Payment pages, one of our Paystack-hosted tools, are one of the simplest and most versatile ways to receive payments with Paystack. Once you've created and published your live page, you share the link with your customers for them to pay you.
To make it easier for your customers, you can pre-fill the fields on the page; all they have to do is complete payment. This should be used in cases where you already know some of your customer's details, like their name, email address and phone number.
Use cases
A good use for this is when sending a donation request to your customers via email. You can send the link to your pre-filled page with the relevant donor information and payment amounts.
If you're in the lending industry, you can use pre-filled payment pages for your customers to repay their loans in cases where their stored cards failed. They'll also have to complete the payment process here without entering their names or email addresses.
Schools and colleges can also use pre-filled payment pages to send reminders for due fees. The page can be pre-filled with the student details to make it more transparent.
Pre-filling your payment page
To pre-fill a page with your customer's details, all you need to do is pass the values as URL parameters. The table below shows the possible URL parameters that can be used to create payment pages.
Name | URL parameter | Values |
Email address | ada@test.com | |
First name | first_name | Ada |
Last name | last_name | Lovelace |
Amount to charge | amount | 3000 |
Read-only | read-only | email, first_name,last_name,amount |
Here's the link to the payment page created with the values shown in the table above.
Here's a link to the same page, but pre-filled with another customer's information.
Making fields read-only
You probably noticed that in the previous examples, the customer could still edit the fields in the form. This could be a problem, as we may not want our customers to change some of the information on the page. To prevent this, we list the fields that we want to be unchangeable in the read-only parameter.
Tech-savvy customers may still notice that they can change values from the URL. To prevent this, you could you set a fixed amount when creating the payment page.
In the link, we added email and amount fields to the read-only parameter to prevent your customer from making changes.
We can also make all the fields static by passing all the fields to the read-only parameter, as shown here below:
If you have any more questions, please contact us at support@paystack.com or via our contact form.