WePay Developer

Iframe Checkout

If you want to have the entire checkout process on your own site with no redirect to WePay you can use the iframe checkout system. The iframe checkout lets you embed an iframe on your own site that will contain the WePay checkout system.

Step #1: Create a checkout object

You will need to make the /checkout/create call like you normally would, but pass the "mode" parameter as "iframe". You will then receive the checkout_uri and checkout_id like normal.

Step #2: Load our JavaScript library to create the iframe

You copy the following code just above the </body> tag:

<script type="text/javascript" src="https://www.wepay.com/js/iframe.wepay.js">
</script>

<script type="text/javascript">
	WePay.iframe_checkout("checkout_div_id", "checkout_uri");
</script>

The checkout_div_id is the ID of the element you want to put the checkout iframe in. The checkout_uri is the checkout_uri that you are given when you call /checkout/create.

Step #3: You are good to go!

Now that you've done the above two steps, you should see the iframe checkout on your page.

Iframe example

Iframe Pre-approvals

We also support the iframe for our pre-approved payments. The iframe for pre-approvals works exactly the same way; just set the mode to "iframe" and use the WePay.iframe_checkout function to build the iframe on your page.