Build a Crowdfunding Platform with WePay
WePay makes it easy to integrate payments into a crowdfunding site. In this section, you’ll see how to integrate payments on your platform with either:
- Embedded: Get a simple eCommerce platform integrated with a few calls using an embedded iframe.
- Custom: Take more control of the user experience using custom integration.
Scenario & Key Requirements
Your site is focused on teachers raising money for educational projects. Teachers post the projects they want to fund and the minimum amount of funding they need to proceed. Your site signs up teachers, creates and hosts pages for each project, and allows donors to contribute. Now, you want to use WePay to handle the payments.
One of your key requirements is that fundraising be open for a month or more for a project. Your site will need to use WePay’s conditional payments capability so that money doesn’t change hands until a “tipping point” in the fundraising is reached for each project.
At WePay, your teachers are the merchants and the donors are the payers. We’ll use those terms in this guide.
Leverage the WePay user experience by using our embedded iframe as much as possible. This approach involves the following steps:
- Create accounts for your merchants
- Process payments
- Take payment information
- Create the prepproval object
- Charge the card
Create accounts for your merchants
Each of your merchants receives their own WePay payment account. This keeps all the money management with WePay. Your site will facilitate creating this account and will receive an access token that your site saves. This access token allows your site to handle checkout, get status, etc.
Set up a merchant using OAuth2
The easiest approach is to redirect to WePay’s OAuth2 authorization URI. Your merchant will see a popup where they can set up their login.
?client_id=[your client id] &redirect_uri=[your redirect uri ex. 'http://example.com/wepay'] &scope=[the permissions you want ex. manage_accounts,collect_payments]
When merchants complete this, follow up with the /oauth2/token call to receive an access token for this merchant:
Create a payment account
Now that your site has an access token, the first order of business is to create a payment account. Although there are many optional arguments, all you need to provide for US merchants are the name of the account and a description. The name is typically based on your site’s name, e.g. “Education Fundraising”. The description is variable and up to you.
Payment processing will require two calls, one at the time a payer donates, and another when the tipping point is reached and it’s time to actually process the payments.
There are some choices you need to make for payment processing - here’s what we’ll use in this example:
- You are charging a 5% fee and it will be taken out of the gross proceeds.
- The WePay fee will also be taken out of the gross proceeds.
Take payment information
Your platform will use a preapproval object to get payment information and validate the charge. This lets your site use WePay’s popup window, so you don’t have to think about the checkout UI or any security concerns.
Create the preapproval object
Your platform will know if the customer completed the transaction when WePay redirects to your callback URI. Save the preapproval ID returned in the response for use in the next step.
Charge the card
When the fundraising is over and the tipping point is met, use /checkout/create passing in the preapproval ID obtained before. Since the payer has already agreed to the charge, there is no further UI required and the credit card can be charged in background.
Even though a preapproval was obtained, there are some reasons a checkout from a preapproval can fail. Your platform still needs to look at the response and take action, e.g. re-engage the payer to have them resubmit their info.
A Note of Security
WePay minimizes the scope of security requirements for your platform. Using the approach in this section raises your platform’s responsibility compared with the approach in the previous section. Please read our security page for more information.com/general/api-call).
Instead of using WePay’s embedded iframe or pop-up window, as we did in the above example, your platform can completely own the checkout experience with the following steps:
- Securely obtain credit card info
- Complete checkout using a token
- Send your own emails to merchants and payers
Securely obtain credit card info
A minimal credit card form looks like this:
|Credit Card Number:|
And the HTML source is here:
WePay.credit_card_create. In this way, the sensitive information is passed directly to WePay’s servers, and your platform receives a token for later use.
Your chargeCard function can take the data response and call your own server’s APIs to store the token.
Complete checkout using a token
When it’s time to charge the credit card, follow the /checkout/create example shown before, but this time add these parameters:
Because your platform already has the card info, this usage of /checkout/create will immediately charge the card with no user interaction.
Send your own emails to merchants and payers
Another way your platform can take more control of the user experience is to generate your own emails to merchants and payers during checkout. Your WePay account manager can assist in turning off specific emails.
Your platform should send a confirmation email when you first tokenize the card successfully and then to at least the payer when you actually charge the card. Your application probably already sends an email when a project reaches its tipping point so that you can include notice that you are charging the card as part of this email.