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¤cy=USD"></script> 2. Add below script to the end of HTML code of same file.
<script>
var cart_data = {{ cart.items | json }};
var custom_item = "";
cart_data.forEach(function(entry) {
custom_item = custom_item + "Item:" + entry.product_title.slice(0, 28);
custom_item = custom_item + "|Quantity:" + entry.quantity;
custom_item = custom_item + "|Variant:" + entry.variant_title + "|";
});
// 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.00 }}
},
description: custom_item
}]
});
},
// 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 above this line: {% if additional_checkout_buttons %}
<div id="paypal-button-container"></div> 4. Style Your Buttons
<style>
#paypal-button-container {
width: 250px;
margin: auto;
margin-right: 0;
margin-top: 10px;
}
.additional-checkout-buttons {
display: none;
}
button[name=checkout] {
display: none;
}
input[name=update] {
display: none;
}
@media screen and (max-width: 800px) {
#paypal-button-container {
width: 100%;
}
}
</style> 5. 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.