Step 1: Obtain PayPal API Credentials:
- Log in to the PayPal Developer Dashboard.
- Navigate to "My Apps & Credentials".
- Under the REST API apps section, either select an existing app or create a new one to get your sandbox and live API credentials.
Step 2: Add the PayPal SDK to Your Theme
- Go to Shopify Admin > Online Store > Themes.
- Find your theme and click "Actions" > "Edit code".
- Open theme.liquid found under the "Layout" folder.
- Add the PayPal SDK script on the line before </head>, replacing "YOUR_SANDBOX_CLIENT_ID" with your actual sandbox client ID.
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>
Step 3: Insert the PayPal Button Container
- In main-cart.liquid, locate the code for the checkout button.
- Directly below this button, insert the container for the PayPal button:
<div id="paypal-button-container"></div>
Step 4: Add JavaScript to Render the PayPal Button
Still in main-cart.liquid, below the SDK script, add the JavaScript to render the PayPal button and handle payment. Additionally, ensure it captures the total cart amount:
<script>
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
paypal.Buttons({
style: {
shape: 'rect',
color: 'blue',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: (cart.total_price / 100).toFixed(2) // Converts to dollars and cents
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
// Implement further actions here, such as redirecting to a thank-you page
});
},
onError: function(err) {
console.error('PayPal button error:', err);
alert('An error occurred with the PayPal transaction. Please try again.');
}
}).render('#paypal-button-container');
}).catch(error => console.error('Error fetching cart:', error));
</script>
Step 5: Test the Integration
- Save your changes in main-cart.liquid.
- Visit your cart page on your Shopify site to see the PayPal button.
- Conduct a test transaction using your sandbox account to ensure everything works as expected.
Step 6: Prepare for Going Live
- Replace the sandbox client ID in the SDK script with your live client ID.
- Test the integration with a real transaction to confirm everything works in live mode.
- Monitor transactions and user feedback for any issues that might arise.
Step 7: Final Checks
- Ensure mobile responsiveness.
- Verify that the PayPal payment option does not interfere with other payment methods.
- Check the user experience for smoothness and clarity.
Please note that I have just implemented these steps after 5 hours of figuring them out. I have applied them only to the cart page for now, not the product page. I will integrate them into the product page soon and will send you updates on how I manage it if it succeeds.
