I’m trying to figure out how to use Paypal’s javascript SDK to allow a customer to go on paypal website (or by filling in the payment form) so that I can get the credentials needed to process a payment using their backend api, but their example doesn’t explain things well. This is the code I used so far:
<!DOCTYPE HTML>
<html>
<head>
<title>.</title>
<meta charset="utf-8">
</head>
<body>
<h1>Test</h1><div ID="paypal-button-container"></div>
<script src="https://sandbox.paypal.com/sdk/js?client-id=myid&intent=authorize&commit=false&components=buttons,marks,messages,applepay¤cy=CAD"></script>
<script>
paypal.Buttons({
style: {
layout: 'vertical',
color: 'blue',
shape: 'rect',
label: 'paypal'
}
}).render('#paypal-button-container');
paypal.Buttons({
async createOrder() {
const response = await fetch("/my-server/create-paypal-order", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
cart: [
{
sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
quantity: "YOUR_PRODUCT_QUANTITY",
},
],
}),
});
const data = await response.json();
return data.id;
},
async onApprove(data) {
// Capture the funds from the transaction.
const response = await fetch("/my-server/capture-paypal-order", {
method: "POST",
body: JSON.stringify({
orderID: data.orderID
})
})
const details = await response.json();
// Show success message to buyer
alert(`Transaction completed by ${details.payer.name.given_name}`);
}
}).render('#paypal-button-container');
</script>
</body>
</html>
What it does is it displays the same payment choices twice but one paypal button in gold color and one in blue colour.
I have also tried:
<!DOCTYPE HTML>
<html>
<head>
<title>.</title>
<meta charset="utf-8">
</head>
<body>
<h1>Test</h1><div ID="paypal-button-container"></div>
<script src="https://sandbox.paypal.com/sdk/js?client-id=myid&intent=authorize&commit=false&components=buttons,marks,messages,applepay¤cy=CAD"></script>
<script>
paypal.Buttons({
style: {
layout: 'vertical',
color: 'blue',
shape: 'rect',
label: 'paypal'
},
async createOrder() {
const response = await fetch("/my-server/create-paypal-order", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
cart: [
{
sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
quantity: "YOUR_PRODUCT_QUANTITY",
},
],
}),
});
const data = await response.json();
return data.id;
},
async onApprove(data) {
// Capture the funds from the transaction.
const response = await fetch("/my-server/capture-paypal-order", {
method: "POST",
body: JSON.stringify({
orderID: data.orderID
})
})
const details = await response.json();
// Show success message to buyer
alert(`Transaction completed by ${details.payer.name.given_name}`);
}
}).render('#paypal-button-container');
</script>
</body>
</html>
but no success there either.
I have used the correct client ID but for the code here I put in myid for easier readability.
What am I doing wrong?