I am in the process of integrating PayPal order buttons into my Vue.js component.
I have been referencing the official documentation which outlines three key steps:
- Import the PayPal SDK script
- Create a
<div>element where the buttons will be displayed - Add JavaScript code to configure callbacks and render the buttons using the
paypalvariable
Below is an example implementation in a basic HTML file:
<!-- 1 -->
<script src="https://www.paypal.com/sdk/js?&client-id=xxx"></script>
<!-- 2 -->
<div id="paypal-button-container"></div>
<!-- 3 -->
<script>
paypal.Buttons({
createOrder: function (data, actions) {
return fetch('http://localhost:8081/api/v1/pay-pal/create-order', {
method: 'POST'
}).then(function(res) {
return res.json();
}).then(function(data) {
return data.id;
});
},
onApprove: function (data, actions) {
return fetch('http://localhost:8081/api/v1/pay-pal/capture-order/' + data.orderID, {
method: 'POST'
}).then(function(res) {
if (!res.ok) {
alert('Something went wrong');
}
});
}
}).render('#paypal-button-container');
</script>
The above code functions correctly. However, I am struggling with implementing this within a Vue.js component.
For step 1, I utilized the mounted() lifecycle hook as follows:
mounted() {
let payPalSdk = document.createElement('script')
payPalSdk.setAttribute('src', 'https://www.paypal.com/sdk/js?&client-id=xxx')
document.head.appendChild(payPalSdk)
}
Step 2 was straightforward, by adding the div element to the template.
My challenge lies in deciding where to place the JavaScript code for step 3.
I attempted to include it in an external js file and load it within the mounted() method like so:
mounted() {
let payPalSdk = document.createElement('script')
payPalSdk.setAttribute('src', 'https://www.paypal.com/sdk/js?&client-id=xxx')
document.head.appendChild(payPalSdk)
let payPalScript = document.createElement('script')
payPalScript.setAttribute('src', '/js/paypal.js')
document.head.appendChild(payPalScript)
}
Here is the content of paypal.js:
paypal.Buttons({
createOrder: function (data, actions) {
return fetch('http://localhost:8081/api/v1/pay-pal/create-order', {
method: 'POST'
}).then(function(res) {
return res.json();
}).then(function(data) {
return data.id;
});
},
onApprove: function (data, actions) {
return fetch('http://localhost:8081/api/v1/pay-pal/capture-order/' + data.orderID, {
method: 'POST'
}).then(function(res) {
if (!res.ok) {
alert('Something went wrong');
}
});
}
}).render('#paypal-button-container');
While the buttons are rendering, the console presents an error message:
buttons?style.layout…re&commit=true:1182 unhandled_error
{err: "Error: Invalid json: .↵ at XMLHttpRequest.<anon…rrency=USD&intent=capture&commit=true:1182:22901)", timestamp: "1605367583366", referer: "www.sandbox.paypal.com", sdkCorrelationID: "7d650f42fd450", sessionID: "09b33213cd_mtu6mjy6mja", …}
buttonCorrelationID: "72135879fd67d"
buttonSessionID: "473d7ab57f_mtu6mjy6mja"
env: "sandbox"
...
(Truncated due to character limit)
Additionally, placing the code directly inside the mounted() hook led to issues as the paypal variable was undefined in that context.