Receive Dynamic Payments via PayPal

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.

<!DOCTYPE html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>

<body>
    <div id="paypal-button-container"></div>

    <script type="text/javascript">
    
		let AMOUNT = 0;
		window.onmessage = (event) => {
        	if (event.data > 0) {
			AMOUNT = event.data;
        	}
      	}

        paypal.Button.render({

            env: 'production', // sandbox | production toggle

            // PayPal Client IDs - replace with your own
            client: {
                sandbox:    '123456789',
                production: '123456789'
            },

            // Show the buyer a 'Pay Now' button in the checkout flow
            commit: true,

            // payment() is called when the button is clicked
            payment: function(data, actions) {

                // Make a call to the REST api to create the payment
                return actions.payment.create({
                    payment: {
                        transactions: [
                            {
                                amount: { total: `${AMOUNT}`, currency: 'USD' }
                            }
                        ]
                    }
                });
            },

            // onAuthorize() is called when the buyer approves the payment
            onAuthorize: function(data, actions) {

                // Make a call to the REST api to execute the payment
                return actions.payment.execute().then(function() {
                    window.alert('Payment Complete!');		    

			// Post message if payment successful
			function respond() {
				window.parent.postMessage("1","*");
			}
			respond();

                });
            }

        }, '#paypal-button-container');

	
    </script>
</body>

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.

export function btnBuy_click(event) {

	const currentCodeItem = $w("#dbCodeBank").getCurrentItem();
	$w("#htmlPayPal").show();
	$w("#btnBuy").hide(); $w("#btnBuy").disable();
  	$w("#htmlPayPal").postMessage(currentCodeItem.price); // pass the price to 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.

export function htmlPayPal_message(event, $w) {
  
  // check if the payment was successful
  if(event.data === "1"){

	const currentCodeItem = $w("#dbCodeBank").getCurrentItem();
	const currentCustItem = $w("#dbCustomers").getCurrentItem();
	
	// record the purchased item code along with any previously purchased items on the customer collection
	let newRefCode = currentCustItem.refCode + ' - ' + currentCodeItem.refCode;
	newRefCode = newRefCode.toString();
	$w("#dbCustomers").setFieldValue("refCode", newRefCode );

	// keep tally of customers total spend on the customer collection
	let newTotalSpend = currentItem.totalSpend + currentCodeItem.price;
	$w("#dbCustomers").setFieldValue("totalSpend", newTotalSpend );

	$w("#dbCustomers").save()  
		.then( (item) => {
		
	$w("#htmlPayPal").hide();
    	$w("#btnBuy").hide(); $w("#btnBuy").disable();

    	});

  }

}

Unlock

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.

Browse More Code

VeloCodeBank

take your Wix website to the next level

<Welcome>

Receive Dynamic Payments via PayPal

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.

Please login or sign-up (it's free!) to view our code. Refresh the page if already logged in.

Receive Dynamic Payments via PayPal

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.

​

​

Please login or sign-up (it's free!) to view our code. Refresh the page if already logged in.