Build a Marketplace Platform with WePay
WePay makes it easy to integrate payments into a marketplace. In this section, you’ll see how to:
- 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.
Your site is focused on buying and selling baseball cards. Sellers register with your site and list items for sale. Buyers search and browse, and buy individual items for sale. Your site makes money by charging a transaction fee. You are considering offering premium services for a fixed monthly fee.
At WePay, your sellers are the merchants, and the buyers are the payers, and 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
- Post-checkout processing
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. “ABC Baseball Card Trading”. The description is variable and up to you.
Let’s assume the following:
- For the first version your site just needs to handle simple checkout. A single call is all you need, and your site will never touch sensitive payer information.
- WePay will send emails to both your merchant and the payer. You can inject a message including embedded HTML. A good use for this is to summarize the purchase. Letting WePay send the email means you’ll only get an email if the payer successfully checks out.
- Your merchant has decided on a flat $1.00 shipping charge per order. Your platform will instruct WePay to ask for shipping info as part of the checkout process.
- Your site is charging your merchants 5% of the total amount, and your merchants will pay this as a fee (not the payer).
- Finally, set the redirect URI to your platform’s “Congratulations” page. As a side effect, catching this URI will let your platform know that the checkout completed successfully.
Call /checkout/create with these arguments:
The /checkout/create call will return a
checkout_id and a URI for the payment page.
The easiest way to know when the payer completes checkout is by waiting for the
callback_uri. Before showing the congrats page, get the shipping address from the checkout object:
This will return a great deal of information, including the
That’s it - your platform is doing everything it needs to do for a simple marketplace.
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 you in turning off specific emails.