Passing product price to Payment Buttons for products with multiple variants and different prices

Highlighted
New Member
1 0 0

Hi everyone,

I have integrated Paypal Payment Buttons with my Shopify store on both the cart page and the product page. Paypal's smart buttons code as you may know looks like this.

 

<script>
        // Render the PayPal button into #paypal-button-container
        paypal.Buttons({

            // Set up the transaction
            createOrder: function(data, actions) {
                return actions.order.create({
                    purchase_units: [{
                        amount: 
                            value: {{ product.price | money_without_currency }}
                        }
                    }]
                });
            },

            // Finalize the transaction
            onApprove: function(data, actions) {
                return actions.order.capture().then(function(details) {
                    // Show a success message to the buyer
                    alert('Transaction completed by ' + details.payer.name.given_name + '!');
                });
            }


        }).render('#paypal-button-container');
    </script>

 

 

The issue I have is within the product page, so basically, in the code above I have to pass the product price through (value: ). for the cart page I used the tag "cart.total_price" and it worked as it should be. but for the product page, I don't know what should I put in there. I tried "product.price" but it only passes the default price. So for example when there is a product with multiple variants, each variant with a different price. this tag only passes the default price even if there is a price change when the customer selects a different variant rather than just the default one.

For example, variant A costs $10 and variant B costs $15 and let's say variant A is the default. When the customer selects variant B and clicks the Paypal Payment button the value he will be paying will be $10 instead of $15.

BTW, the theme I'm using is the free version of Brooklyn theme.

0 Likes