I'm trying to save a user's PayPal for off-session transactions. I'm following the docs here (https://developer.paypal.com/docs/checkout/save-payment-methods/purchase-later/js-sdk/paypal/).
I'm using the docs as closely as possible, though I have to modify the client code to work in node.
I'm getting the token ID from my server, but that doesn't seem to be the format or kind of input required.
I'm stuck on step 6. I'm getting smart_api_vault_ectoken_contingency_error
buttonCorrelationID
:
"f10601934aa66"
buttonSessionID
:
"uid_f9dd725eba_mjm6mtk6mjy"
clientID
:
"AdvBzA3XST3GAEp5MdTk5PqRDjVXZYON0jNyaQfs7P90BQcQqMiIS9HMEjRe3qrehxVArMvE1LnaHVqH"
env
:
"sandbox"
referer
:
"www.sandbox.paypal.com"
sdkCorrelationID
:
"0819775552895"
sessionID
:
"uid_8c172cf2fe_mjm6mdy6mzu"
timestamp
:
"1701991169324"
token
:
null
Here is my next.js component:
import React, { useEffect, useState } from 'react';
const PayPalButton = () => {
const [scriptLoaded, setScriptLoaded] = useState(false);
useEffect(() => {
// Function to fetch token and load PayPal script
const fetchTokenAndLoadScript = async () => {
try {
const headers = {
'Content-Type': 'application/x-www-form-urlencoded',
Authorization:
'Basic ' +
Buffer.from(
process.env.NEXT_PUBLIC_CLIENT_ID +
':' +
process.env.NEXT_PUBLIC_CLIENT_SECRET
).toString('base64'),
};
const body = new URLSearchParams();
body.append('grant_type', 'client_credentials');
body.append('response_type', 'id_token');
// Replace with your token fetch request
const tokenResponse = await fetch(
'https://api-m.sandbox.paypal.com/v1/oauth2/token',
{
method: 'POST',
headers: headers,
body: body,
}
);
const tokenData = await tokenResponse.json();
const userToken = tokenData.id_token; // Adjust according to the actual response structure
console.log('User token:', userToken);
// Construct the script URL
const srcUrl = `https://www.paypal.com/sdk/js?client-id=${process.env.NEXT_PUBLIC_CLIENT_ID}&merchant-id=${process.env.NEXT_PUBLIC_MERCHANT_ID}`;
console.log('Script URL:', srcUrl);
// Check if the script is already present
if (!document.querySelector(`script[src="${srcUrl}"]`)) {
console.log('Script already loaded once...');
const script = document.createElement('script');
script.src=srcUrl;
script.setAttribute('data-user-id-token', userToken); // Add the 'data-user-id-token' property
script.addEventListener('load', () => {
setScriptLoaded(true);
});
document.body.appendChild(script);
}
} catch (error) {
console.error(
'Error fetching token or loading PayPal script:',
error
);
}
};
fetchTokenAndLoadScript();
}, []);
useEffect(() => {
if (scriptLoaded) {
console.log("The script's loaded, let's render the button!");
window.paypal
.Buttons({
createVaultSetupToken: async () => {
// Call your server API to generate a setup token
// and return it here as a string
const response = await fetch(
'http://localhost:3000/api/v1/paypal/create-setup-token',
{
method: 'POST',
credentials: 'include',
}
);
const result = await response.json();
console.log('Made it here.');
console.log(`Token here be: ${result.id}`);
return result.id;
},
onApprove: async ({ vaultSetupToken }) => {
return fetch(
'http://localhost:3000/api/v1/paypal/create-payment-token',
{
body: JSON.stringify({ vaultSetupToken }),
}
);
},
onError: (error) => {
console.log('An error occurred: ', error);
},
})
.render('#paypal-buttons-container');
}
}, [scriptLoaded]);
return <div id="paypal-buttons-container"></div>;
};
export default PayPalButton;
And here is my backend in express.js:
import 'dotenv/config';
import express from 'express';
const { PORT = 3011, ACCESS_TOKEN } = process.env;
const app = express();
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.post('/api/v1/paypal/create-user-token', async (req, res) => {
console.log('Creating user token...');
res.status(200).json({ message: 'User token created' });
});
// Create setup token
app.post('/api/v1/paypal/create-setup-token', async (req, res) => {
console.log(ACCESS_TOKEN);
console.log('Creating setup token...');
try {
// Use your access token to securely generate a setup token
// with an empty payment_source
const vaultResponse = await fetch(
'https://api-m.sandbox.paypal.com/v3/vault/setup-tokens',
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${ACCESS_TOKEN}`,
'PayPal-Request-Id': Date.now(),
},
body: JSON.stringify({
payment_source: {
paypal: {},
},
}),
}
);
const result = await vaultResponse.json();
res.json(result);
} catch (err) {
console.log('Error creating setup token:', err);
res.status(500).send(err.message);
}
});
// Create payment token from a setup token
app.post('/api/v1/paypal/create-payment-token/', async (req, res) => {
try {
const paymentTokenResult = await fetch(
'https://api-m.sandbox.paypal.com/v3/vault/payment-tokens',
{
method: 'POST',
body: {
payment_source: {
token: {
id: req.body.vaultSetupToken,
type: 'SETUP_TOKEN',
},
},
},
headers: {
Authorization: 'Bearer ${ACCESS-TOKEN}',
'PayPal-Request-Id': Date.now(),
},
}
);
const paymentMethodToken = paymentTokenResult.id;
const customerId = paymentTokenResult.customer.id;
await save(paymentMethodToken, customerId);
res.json(captureData);
} catch (err) {
res.status(500).send(err.message);
}
});
const save = async function (paymentMethodToken, customerId) {
// Specify where to save the payment method token
};
app.listen(PORT, () => {
console.log(`Server listening at http://localhost:${PORT}/`);
});
