Add PayPals Buy now pay later function "Paypal Pay In 4"

Add PayPals Buy now pay later function "Paypal Pay In 4"

meeko
Excursionist
36 0 4

Hi everyone!

 

I'm just needing help in adding the "PayPal Pay in 4" function at checkout.

 

I've found the integration manual on PayPal's developer website, but I am not able to follow it for my shopify store (I'm not that tech savvy)

 

https://developer.paypal.com/docs/checkout/standard/integrate/

 

Does someone have an easy step by step how to enable this in my shopify store?

 

My store: https://meeko-8476.myshopify.com

Password: Meeko

Theme: Dawn

Location: Australia

 

Thank you for all your help!

Replies 2 (2)

LitCommerce
Astronaut
2860 684 751

Hi @meeko,

You can refer https://help.shopify.com/en/manual/payments/paypal/set-up-paypal

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

DigitalHelper
Visitor
2 0 0

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.