Need notifications for ORDER ID in my paypal dashborad and to buyer email

[Abdel_Aziz]

I integrated paypal-smart-buttons.liquid snippet but there are two issues when testing it in my Shopify store and I want help to solve them:

1- The order id not sent to my PayPal account.

2- the buyer does not receive any notification about the payment process.

Here is the code I integrated into my store:

{% endcomment %}

{% assign store_currency = "USD" %}
{% assign paypal_live_client_id = "Ae9Nk[Removed. Phone #s not permitted]kEy1ngPcdB-vCObHwQEPAk5oVGX_Fqtu" %}

<style>
#paypal-button-container {
margin-top: 10px;
}
#clearbtn,
#smartbtn-popup-link {
display: none;
}
.quantity__button {
pointer-events: none !important;
}
/* Media query for desktop viewport */
@media screen and (max-width: 800px) {
#paypal-button-container {
max-width: 83%;
margin: auto;
margin-top: 10px;
}
}
#smartbtn-popup.overlay {
position: fixed;
z-index: 9;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
#smartbtn-popup.overlay:target {
visibility: visible;
opacity: 1;
}
#smartbtn-popup .popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 25%;
position: relative;
transition: all 5s ease-in-out;
}
#smartbtn-popup .popup h2 {
margin-top: 0;
color: #333;
}
#smartbtn-popup .popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
#smartbtn-popup .popup .close:hover {
color: #06d85f;
}
#smartbtn-popup .popup .content {
text-align: center;
max-height: 30%;
overflow: auto;
font-family: system-ui;
}
#smartbtn-popup .orderid {
font-size: 20px;
}
#smartbtn-popup .order-confirm {
font-size: 17px;
}
@media screen and (max-width: 700px) {
#smartbtn-popup .popup {
width: 93%;
}
}
</style>

<div id="paypal-button-container"></div>
<a id="clearbtn" class="cartitems" href="/cart/clear">Empty cart</a>

<a id="smartbtn-popup-link" class="button" href="#smartbtn-popup">popup</a>
<div id="smartbtn-popup" class="overlay">
<div class="popup">
<a class="close" href="#">&times;</a>
<div class="content">
<p class="orderid">Order: #<span id="orderval"></span></p>
<h2>Thank you <span id="customer-name"></span>!</h2>
<p class="order-confirm">
Your order is confirmed. Order will be delivered soon.
</p>
</div>
</div>
</div>

<script src="https://www.paypal.com/sdk/js?client-id={{ paypal_live_client_id }}&locale=en_US&currency={{ store_currency }}"></script>
<script>
var cart_data = {{ cart.items | json }};
var totalProdPrice = {{ cart.total_price | divided_by: 100.00 }}
var currency = '{{ store_currency }}'
var itemsArr = []

cart_data.forEach(function (cartItem) {
var prodTitle = cartItem.title;
var prodPrice = cartItem.price/100.00;
var prodQuantity = cartItem.quantity;
var prodObj = {
name: prodTitle,
unit_amount: {
currency_code: currency,
value: prodPrice
},
quantity: prodQuantity
}
itemsArr.push(prodObj)
});

// Render the PayPal button into #paypal-button-container
var FUNDING_SOURCES = [paypal.FUNDING.PAYPAL, paypal.FUNDING.CREDIT, paypal.FUNDING.CARD];

FUNDING_SOURCES.forEach(function (fundingSource) {
paypal
.Buttons({

// Set up the transaction
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [
{
amount: {
currency_code: currency,
value: totalProdPrice,
breakdown: {
item_total: { currency_code:currency, value:totalProdPrice},
}
},
items: itemsArr,
}
]
});
},

// Finalize the transaction
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
var orderId = details.id;
var customerName = details.payer.name.given_name;
document.getElementById('orderval').innerHTML = orderId;
document.getElementById('customer-name').innerHTML = customerName;
document.getElementById('smartbtn-popup-link').click();
setTimeout(() => {
document.getElementById('clearbtn').click();
}, 6000);
});
},
onCancel: function(data) {
// payment cancelled
alert("Payment cancelled");
},
onError: function(err) {
alert("Something went wrong.")
},
fundingSource: fundingSource,
})
.render("#paypal-button-container");
});
</script>

[angelleye]

For the order number you can add the invoice_id parameter in your request.

The payment doesn't actually occur until you complete the Capture Order request.  Buyers won't receive any notice until this is done.

It sounds like you are completing the Create Order step, but you aren't finalizing it with Capture Order..??

[Abdel_Aziz]

Thanks angelleye, but can you please tell me what is the exact pieces of code to add as I am not a coder.

[angelleye]

In your code you have the following:

// Set up the transaction
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [
{
amount: {
currency_code: currency,
value: totalProdPrice,
breakdown: {
item_total: { currency_code:currency, value:totalProdPrice},
}

Notice the "purchase_units" section contains parameters like amount, currency_code, value, etc.

When looking at the PayPal API reference specific to this purchase units section we can see all of the other parameters that are available, which includes the `invoice_id` parameter.  So we just need to add that to the list the same way the other params are being used there:

// Set up the transaction
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [
{
amount: {
currency_code: currency,
value: totalProdPrice,
invoice_id: invoiceID,
breakdown: {
item_total: { currency_code:currency, value:totalProdPrice},
}

This assumes you have a variable called `invoiceID` ready to pass into the request the same way you're using `currency` and `totalProdPrice`, for example.

While reviewing that list in the PayPal doc you'll probably find lots of other params you would like to make use of, and you can add those the same way.

Hope that helps!

[Abdel_Aziz]

I did these steps but also the order ID and the EMAIL notifications not appear.