I've built something similar recently, and here are the steps I've followed:
- Collect beneficiary details from the user
This could be their Paypal email, bank account details or something else depending on the payment provider. If you go with Paypal or Payoneer, you'll need to ask the user to sign up for an account if they don't already have one.
- Validate that the information is in the correct format
Especially if you are collecting bank account details, doing a bit of validation up front could save you a lot of hassle later on.
- Saving the information securely
If you are collecting bank details, you need to decide whether you want to store the bank details in your own system, or if you prefer to only store them with the payment provider.
Storing the data in your own system allows you to review the information before passing it on to your payment provider. However you will need to make sure the information is managed securely.
- Setting up the payment
You now need to decide how you will initiate the payment. You could let the user request to be paid. You could also do the payments automatically based on some rules. E.g. weekly payments if amount is over a threshold. Whichever way you go, most providers give you the option to use their API or some file based system.
- Funding the payments
This will depend on your provider. Some allow you to fund the payments over API using a prefunded balance. Others require you to do final approval inside their system.
React component for collecting bank details
I needed to collect bank details that work with TransferWise for my own project, so I built <BankDeets/>
, a React component that's available on NPM. It supports 40+ currencies and collects all the data you need to make payments.
Example:
<BankDeets submitURL="bankdeets.co/save"/>
It's available via npm install bankdeets
(or https://github.com/321k/bankdeets) and comes with validation and translations. I'm the creator, so please ping me any questions about it.