Build a Crowdfunding Platform with WePay


Overview

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.

Tip

To check out the various API calls used below, visit the API Reference.


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.


Embedded

Leverage the WePay user experience by using our embedded iframe as much as possible. This approach involves the following steps:

  1. Create accounts for your merchants
  2. Process payments
  3. Take payment information
  4. Create the prepproval object
  5. 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:

  • PHP
  • cURL
  • Ruby
  • Python

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.

  • PHP
  • cURL
  • Ruby
  • Python

Process payments

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

  • PHP
  • cURL
  • Ruby
  • Python

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.

  • PHP
  • cURL
  • Ruby
  • Python

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.


Custom

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:

  1. Securely obtain credit card info
  2. Complete checkout using a token
  3. Send your own emails to merchants and payers

Securely obtain credit card info

You can design your credit card acceptance form any way you wish, but you need to use WePay’s JavaScript library to securely send the credit card info directly to WePay’s servers. Do not accept credit card information onto your own server and then call WePay’s APIs.

WePay’s JavaScript library uses the /credit_card/create API call to store the payer’s credit card info securely on WePay’s servers, and returns your platform a token. This token can then be used in a /checkout/create call to complete a transaction without any further user interaction.

A minimal credit card form looks like this:

Name:
Email:
Credit Card Number:
Expiration Month:
Expiration Year:
CVV:
Zipcode:

And the HTML source is here:

The function chargeCard() is invoked when the user submits the checkout form. chargeCard extracts the credit card fields and maps them to WePay’s JavaScript call 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:

  • PHP
  • cURL
  • Ruby
  • Python

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.