Simple PayPal Store with HTML and Email Script

Let’s create a minimalistic online shop without setting up a backend server? This guide will show you how to use HTML, PayPal’s JavaScript SDK, and Google Apps Script to create a simple shop and receive email notifications for every purchase.

This lightweight solution is perfect for small shops, single-product sales, or testing payment workflows. While it may not replace a full-fledged e-commerce platform, it’s a quick, reliable way to get started with online payments.

No PHP. No complex setups. Just pure HTML and some creativity!

Benefits of This Setup

Serverless: No need for backend servers; it’s all handled in the cloud.
Simple: Easy to set up for small-scale projects.
Scalable: PayPal and Google’s infrastructure can handle large transaction volumes.

Why Use PayPal and Google Apps Script?

PayPal JavaScript SDK: Allows you to integrate payment buttons directly into your website using JavaScript. No server-side integration is needed.

Google Apps Script: Enables you to send email notifications via Gmail for every transaction.

What You’ll Need

A PayPal Business account.
Your PayPal Client ID (you can get it from the PayPal Developer Dashboard).
A Google account to set up Google Apps Script.

Here you go.

STEP 1 : YOUR HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PayPal Shop</title>
    <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>
</head>
<body>
    <h1>Welcome to Paypal Shop</h1>
    <p>Buy your favorite items securely with PayPal!</p>

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

    <script>
        paypal.Buttons({
            createOrder: function(data, actions) {
                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: '10.00' // Set the price here
                        }
                    }]
                });
            },
            onApprove: function(data, actions) {
                return actions.order.capture().then(function(details) {
                    alert('Transaction completed by ' + details.payer.name.given_name);

                    // Send email notification
                    sendEmail(details);
                });
            }
        }).render('#paypal-button-container');

        function sendEmail(details) {
            const url = 'YOUR_GOOGLE_APPS_SCRIPT_URL'; // Replace with your Apps Script URL
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(details)
            })
            .then(response => response.text())
            .then(data => console.log('Success:', data))
            .catch(error => console.error('Error:', error));
        }
    </script>
</body>
</html>

STEP 2 : Set up your GOOGLE APPS SCRIPT

1. Create a New Script:

Go to Google Apps Script.
Create a new project.

2: Write the Email Notification Script:

function doPost(request) {
    var details = JSON.parse(request.postData.contents);
    var email = "[email protected]"; // Replace with your Gmail address
    var subject = "New Purchase Notification";
    var message = `
        A new purchase has been made!

        Buyer Name: ${details.payer.name.given_name} ${details.payer.name.surname}
        Email: ${details.payer.email_address}
        Amount Paid: ${details.purchase_units[0].amount.value} ${details.purchase_units[0].amount.currency_code}
        Transaction ID: ${details.id}
    `;
    MailApp.sendEmail(email, subject, message);

    return ContentService.createTextOutput("Email sent").setMimeType(ContentService.MimeType.TEXT);
}

3. Deploy the Script as a Web App:

Click on Deploy > New Deployment.
Choose Web App.
Set Execute as to Me, and Who has access to Anyone.
Deploy and copy the deployment URL.

Step 4: Test Your Shop

Open the HTML file in your browser.
Click the PayPal button to simulate a payment.
Check your Gmail inbox for the notification!

How It Works

User Payment:
- When a user clicks the PayPal button and completes a transaction, PayPal’s onApprove callback captures the transaction details.
Email Notification:
- The sendEmail function sends these details to the Google Apps Script via a POST request.
- The Apps Script processes the data and sends you an email using Gmail.

Applebyte

Applebyte

5