Overview
PayPal Checkout is popular alternative or compliment to using a traditional credit card payment gateway. It acts like a gateway and is another option to help get you paid. Once enabled, customer's will be able to chose PayPal, PayPal Credit, or other enabled payment types as a payment option on the shopping cart or checkout page. When they click PayPal payment button, they'll login to PayPal's secure checkout form to complete the transaction. There, they can pay with a credit card or their PayPal account. Once finished, the customer will be redirected back to your Online Store.
PayPal Checkout can be enabled in AmeriCommerce Apps & Addons:
- Navigate to Settings > Payments > Payment Methods
- Click on the PayPal Login or Sign up button.
- Login PayPal by use your Primary User of your PayPal account or sign up a new account. If you need to confirm your primary email address, it can be found in your paypal settings. There is a screenshot in the troubleshooting section at the end of this guide.
- Click on the "Agree and Connect" button in PayPal.
- Click on the "Go back to your store" button, and you will be redirected back your store's PayPal Checkout page.
- If you sign up a new account, make sure you confirmed your email address with PayPal and your account is ready to accept payments.
- After you have connected your PayPal account, Click on "Enable PayPal Checkout" and customize the PayPal buttons and other settings for your store.
Paypal Account: (Read Only after setup) Your PayPal Account ID. To change this, you would have to disconnect the current account and reconnect with the new one.
Currency Code: Default is USD. List of currency code is available at here.
Button Layout: Vertical or Horizontal
Button Color: Choose the color of your button
Button Shape: Rectangle or Pill
Button Label: Choose the Paypal Label
Button Height: Can set a specific height value
Disabled Fundings: Separate disabled fundings with comma. For example credit,card. List of available fundings at here.
- If you want to use buyer's phone number in PayPal as billing and shipping phone number, go to your PayPal Account Settings -> Website Payments -> Website Preferences and turn on contract telephone number.
Review and Test Buttons
- Open an incognito/private browser window or logout of your Admin.
- Add some items to your cart.
- Go to your Shopping cart or Checkout page.
Click on one of the PayPal buttons. These will take you to the PayPal site and let you pay for your order.
Checkout page:
Pay in 4 from PayPal
*Legal disclosure: PayPal Pay in 4 and PayPal Credit are subject to consumer credit approval
Additional Settings:
Enable PayPal Credit Promotional Messages: Enable PayPal Credit promotional messages on Product detail and shopping cart page. You can also customize where to display the information by relocating the corresponding merge codes:
Product detail page merge code: ##PAYPALPRODUCTPROMOTION##
Cart merge code: ##PAYPALCARTPROMOTION##
The ##PAYPALCARTPROMOTION## merge code works on all pages. For example, if you wanted to display this on the one page checkout, You can simply add it to the theme page by going to Themes > Edit Theme > Pages > Select page type > HTML Editor. See the screenshots below for examples.
Product Details page:
Shopping Cart Page:
Troubleshooting
If you don't see PayPal buttons on your shopping cart or checkout page:
- Make sure you enabled PayPal Checkout for your store.
- Make sure you use an incognito browser window or logout of the Admin (Live design may hide PayPal buttons).
- Make sure the merge code is in your theme and bootstrap references in your head tags.
- Make sure the Express payment section is in the HTML of the Checkout page.
Shopping cart: $$PAYPALSMARTBUTTONS$$
One Page Checkout:
<div class="payment-method PayPalCommerce hide">
<div class="panel pad-20">
<div data-payment-name="PayPalCommerce" class="payment-name h4 bold">
<span>PayPal</span>
</div>
<div class="row">
</div>
</div>
</div>
One Page Checkout Express Payment area:
<!-- Express ChecktotalArea -->
<ac:visibilityarea id="ExpressPayArea">
$$EXPRESSPAYAREABEGIN$$
<div class="checkout-express mb-3">
<div class="checkout-express-header h3 fw-bold mb-2">Express Checkout</div>
<div class="checkout-express-body row row-cols-auto mobile-scroll m-0">
$$PAYWITHAMAZONBUTTON$$ $$APPLEPAYBUTTON$$ $$PAYPALSMARTBUTTONS$$
</div>
<div class="checkout-express-footer small text-muted pt-2">
Or continue to pay with a credit card below
</div>
</div>
$$EXPRESSPAYAREAEND$$
</ac:visibilityarea>
<!-- END Express Checkout -->
One Page Checkout:
Make sure you have bootstrap in your theme head tags:
<!-- Reference the theme's stylesheet after bootstrap to allow overriding -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
##INCLUDESCRIPTBOTTOM[//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js]##
Confirm your primary email account in your paypal settings:
Disconnect
If for any reason you need to disconnect the account, or use a different one, you can use the "Disconnect" button at the bottom of the app page.