Tips and Tricks HQ Support Portal › Forums › WP eStore Forum › WP eStore General Questions › How to get all of PayPal’s Payment Options To Appear On My Checkout Page
Tagged: Payment Option Buttons
- This topic has 2 replies, 2 voices, and was last updated 2 years, 5 months ago by RebeccaRohman.
-
AuthorPosts
-
June 20, 2022 at 10:36 am #84465RebeccaRohmanParticipant
Hello Administrator,
I’ve already purchased your product and installed it on my websites and it works to perfection.
However, I would like ALL the PayPal Payment options stacked buttons to show up on my page i.e. PayPal, Pay Later and Pay with debit or credit cards. I was able to get some html code from PayPal and got the buttons to show up on my website but it does not replace the original checkout button and the new buttons do not function. I’m a little overwhelmed. Can you please help?
Warm Wishes,
June 20, 2022 at 7:07 pm #84468wzpModeratorWhen the buyer clicks the checkout button; control should transfer to PayPal, and the appropriately available options should appear. This of course assumes, that the buyer is logging into their PayPal account, when they are transferred to PayPal.
June 20, 2022 at 10:39 pm #84472RebeccaRohmanParticipantHello,
Thank you for your response.
I understand what you are saying but when I test this the only other alternative is to pay with a debit or credit card. In WP Express checkout the buttons I want are there but it does not have the functionality that I need for my business so I got this plugin (Customers may purchase more than one item at a time which is why the Express Checkout does not work).
I’d like my customers to know once they get to the checkout page that they have the option to use Pay Later, Venmo, etc. and the buttons should have the functions that go with the various options. This is how I need it to show up using the WP eStore plugin. The HTML is below. Can you help? Thank you so much.
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
</head>
<body>
<!– Replace “test” with your own sandbox Business account app client ID –>
<script src=”https://www.paypal.com/sdk/js?client-id=test¤cy=USD”></script>
<!– Set up a container element for the button –>
<div id=”paypal-button-container”></div>
<script>
paypal.Buttons({
// Order is created on the server and the order id is returned
createOrder: (data, actions) => {
return fetch(“/api/orders”, {
method: “post”,
// use the “body” param to optionally pass additional order information
// like product ids or amount
})
.then((response) => response.json())
.then((order) => order.id);
},
// Finalize the transaction on the server after payer approval
onApprove: (data, actions) => {
return fetch(/api/orders/${data.orderID}/capture
, {
method: “post”,
})
.then((response) => response.json())
.then((orderData) => {
// Successful capture! For dev/demo purposes:
console.log(‘Capture result’, orderData, JSON.stringify(orderData, null, 2));
const transaction = orderData.purchase_units[0].payments.captures[0];
alert(Transaction ${transaction.status}: ${transaction.id}\n\nSee console for all available details
);
// When ready to go live, remove the alert and show a success message within this page. For example:
// const element = document.getElementById(‘paypal-button-container’);
// element.innerHTML = ‘<h3>Thank you for your payment!</h3>’;
// Or go to another URL: actions.redirect(‘thank_you.html’);
});
}
}).render(‘#paypal-button-container’);
</script>
</body>
</html> -
AuthorPosts
- You must be logged in to reply to this topic.