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?