How to Integrate PayPal Credit/Debit Card Buttons in Shopify

Learn how to integrate PayPal smart buttons in your shopify store step by step.

You will have to follow the steps to add the paypal smart buttons in your shopify store. In the video you will get the complete integration of paypal credit debit card buttons, which will help you to know where to place the specific code in the cart-template.liquid file if you will have to add smart buttons on cart page of the shopify store. If you are interested to add paypal smart buttons on product page of your shopify store then you need to follow this video which will help you with the complete integration of the smart buttons.

1. Add below script to the top of cart-template.liquid file.

<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script> 

2. Add below script to the end of HTML code of same file.

<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: {{ cart.total_price | divided_by: 100.0 }}
                    }
                }]
            });
        },

        // 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> 

3. Add below div tag above checkout button.

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

4. Replace your client ID

Replace “sb” from step 1 code with the live client ID of your paypal account. Check this video How to find client ID of PayPal account.

Leave a Reply