Embedded Checkout Using Iframe
What is Embedded Checkout?
The Embedded Checkout payment flow uses a co-branded iframe and is a simple, embeddable way to collect payment information and charge payers. You can embed the iframe on your site and then let the payer enter their payment information and complete the payment.
In other words, the iframe payment flow takes care of both collecting the payer’s payment information and charging their payment method. Using an iframe, you can minimize your PCI compliance responsibilities.
A marketplace site wants to let users find freelancers and pay them on their site. They don’t want users to have to redirect away from their site during the payment process. They can embed the iframe in their payment flow to take care of collecting the payment information (credit card or bank account details) and charge the user.
At WePay, the freelancers are merchants and the users are payers and we’ll use those terms below.
How does it work?
There are 3 steps to using the iframe:
- Make the /checkout/create call to get a
- Embed the
checkout_uriin an iframe on your site.
- Handle the confirmation page the payer ends up on after paying.
To get started, you will create a checkout with the /checkout/create call. The checkout object represents a single payment. You’ll pass in the account_id and access_token you got when you created the merchant’s payment account. The redirect_uri that you set is where the payer will end up after they finish the payment flow (typically a confirmation page on your site).
In response you will get a
checkout_uri which you will use in step 2.
Now that you have a
checkout_uri, you should embed it in an iframe on your site. Here is some sample code that will let you do that:
The payer will see the payment flow inside the iframe and will be able to enter their payment info and confirm the payment.
Once the payer has confirmed their payment, their payment method will be charged and they will be sent to whatever
redirect_uri you specified in step 1. The
checkout_id will be appended as a GET parameter so you can look up the payment details.
Note that if you don’t specify a
redirect_uri, the payer will not be redirected and will instead see a confirmation page inside the iframe.
Now that you’ve successfully charged a payer, your merchant will have money in their WePay payment account. The next step is to let the merchant verify their identity and link their bank account.