Has anyone put both Stripe and PayPal onto the same checkout page? I currently have Stripe working fine but want to give the customer the option of PayPal instead. I have buttons to show/hide the two options - so if they click Credit Card then the Stripe button shows but it’s a submit button and I have this js on the form to take them to Stripe Checkout:
The PayPal Checkout (https://developer.paypal.com/docs/checkout/integrate/) buttons are in place and working nicely but following the successful payment (a popup opens where they log into PayPal or enter their card details and once payment is made the popup closes and shows an alert) I want to change the page to show the ‘complete order’ button which then does the actual completing of the order (database updates, email confirmation, etc.) but the complete order button will submit the same form which will trigger the Stripe process.
Does that make sense?
I’m thinking I just need to tweak my Stripe code slightly so it only runs if that method has been selected.
Is this for your UKpaint website? Could you not place the PayPal checkout button on your cart page instead of the Checkout page? PayPal does a reasonable job of collecting the order details and I believe you need to actually ship the order to the PayPal address anyway to be covered by seller protection.
Other than that I would look at duplicating the Stripe server action and have one called PayPal that could be triggered by
Your suggestion is a good one and something I’d not considered. However, I think Stripe is the preferred method of payment (much lower fees) so putting PayPal on the cart page would mean most people won’t even know about the option for Stripe so I’d rather run it as planned where I will show two buttons - ‘Pay by Credit/Debit Card’ and ‘Pay with PayPal’ and let them choose.
How can I change that to also check for the value of a variable? My thinking is to store a value (varPaymentMethod) with the possible values of ‘none’ (they haven’t chosen yet), ‘ccard’ or ‘paypal’ and improve my line above to also check varPaymentMethod == 'ccard' but my javascript isn’t that great!
Ok I understand. So if you had two buttons on the checkout page (Pay with card/Pay with PayPal) then each of those buttons would have a different dmx-on:success event. One would be runStripe and the other would be runPayPal.
I really wouldn’t use the same server action for both PayPal and Stripe. Although technically possible by using conditions, I think for maintenance and future updates it would be easier to have one for stripe and another for PayPal.
I haven’t yet dived into the PayPal api but it looks like you’ll need to use the orders rest api
Create two buttons, “Checkout with Card” ( varCartMethod =1) and “Checkout with PayPal” ( varCartMethod = 2)
Create 2 containers (or rows) to contain the code for Stripe and PayPal
Initially hide both containers with show() attribute set to varCartMethod = 1 or 2 respectively
The use the dynamic click event of the buttons to change the value of varCartMethod to 1 or 2 appropriately
So user can simply click either button (always visible) to show/ hide the two checkout types
Thanks Brian. That’s exactly what I’ve already put in place. The issue is the form action has the line of javascript to run the Stripe code which I only want to happen if it’s Stripe that’s been selected.
PayPal Checkout seems to show a popup where the customer log into their PayPal account and makes the payment. It then closes the popup and sends something back which the page can then use in order to complete the order knowing the payment was successful. I’m working through that at the moment.
can it be added to the static events of the final checkout button?
Not used PP for a while but it I used to use the IPN feature. When the checkout completed it automatically calls a page on your server which can then process the appropriate actions. Used to be an AJAX call, guess there is an API equivilent now?