ATTENTION: THIS IS OUR OLD SITE. TO SEE OUR NEW WEBSITE, CLICK HERE.
Learn how to integrate custom payment values via PayPal using HTML iFrame and test whether a successful payment has been made. This is the PayPal payment functionality used throughout WixCodeBank.com to unlock pages of code.
The first step is to create an account with PayPal. Thereafter, add an HTML iFrame to a page on your website. Give it an id reference, such as HTMLPayPal and add an onMessage event listener as shown in the screenshot below. The HTML iFrame is set to hide onReady in this example using $w("#htmlPayPal").hide(); .
Insert the code below into the HTML iFrame - it creates a PayPal container which will receive the payment amount via code from your website. The sandbox and production keys are provided by PayPal after you create an App following the steps given here:
The line of code starting with 'env:' toggles between sandbox (for testing) and production (for taking actual payments). If the payment is successful, the PayPal container will send back a message of "1" to the page code - which will be used to verify and record the payment in the Customer collection data.
In this example, we will create a button called #btnBuy and an event listener called btnBuy_click with the following code to pass the price to the HTML iFrame using postMessage. The price of the current item is received from a dataset called #dbCodeBank. It will also hide the button and show the HTML iFrame.
The following code is executed after the page code receives a message from the PayPal container (the HTML iFrame) that the payment is successful. For this example, we record which product is purchased (citing a reference code string concatenation) and a running total of the customers spend. Both these fields need to be initialised on the Customer collection with a starting value when the customer record is created. The Customer dataset called #dbCustomers should be set to read and write access, with the permissions on the Customer collection allowing for members to update their data.
Please login or sign-up (it's free!) to view our code. Refresh the page if already logged in.
Disclaimer: To the best of our knowledge, this code works for its stipulated purpose. If you find an error in our code, or know of a better way to achieve the same result - please contact us! We will help where we can, however please be aware that the code is provided 'as is' and without a promise of support in using or implementing it.