Vorbly Code | WIX PAYPAL INTEGRATION - ONLINE PAYMENTS

Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX PAYPAL INTEGRATION - ONLINE PAYMENTS

Starting an eCommerce website? This tutorial will show you how to integrate PayPal Payment APIs into your Wix website using Wix Code. Customers will be able to purchase directly from your online store. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/5

THE ELEMENTS

The Page

HTML iframe: #html1 (PayPal button)

User Input: #quantity

Text Elements:

  • Unit Price: #UnitPrice

  • Total Price: #FinalPrice

PayPal Client IDs

Go to www.paypal.com and retrieve your client IDs

  • Sandbox ID (testing)

  • Production ID

THE CODE

Page Code

export function quantity_change(event, $w) {

        let price = Number($w('#UnitPrice').text);

        let selectedQuantity = Number(event.target.value); // Gets selected quantity from input //

             $w('#FinalPrice').text = String(selectedQuantity * price); // Quantity X Price //

             $w("#html1").postMessage(Number($w('#FinalPrice').text)); // Sends price to button //

}

HTML iframe

<!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',

    locale: 'en_US',

    style: {
        size: 'medium',
        color: 'gold',
        shape: 'rect',
        label: 'checkout'
    },

 

            env: 'sandbox', // sandbox or production // 

           

           // PayPal Client IDs - Go to PayPal.com and create your own client IDs //
            client: {
                sandbox: 'YOUR_SANDBOX_ID',
                production: 'YOUR_PRODUCTION_ID'
            },


            commit: true,

 
            payment: function(data, actions) {

               

                // Payment Amount // 
                return actions.payment.create({
                    payment: {
                        transactions: [
                            {
                                amount: { total: `${AMOUNT}`, currency: 'USD' }
                            }
                        ]
                    }
                });
            },

           
            onAuthorize: function(data, actions) {


                return actions.payment.execute().then(function() {
                    window.alert('Payment Complete!');
                });
            }

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

    </script>
</body>

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP