Skip to content

Commit dcd953d

Browse files
gregjopagregjopa
authored
Use double quotes to match the guides (#67)
1 parent d84f10c commit dcd953d

File tree

4 files changed

+102
-102
lines changed

4 files changed

+102
-102
lines changed

‎advanced-integration/public/app.js‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
async function createOrderCallback() {
22
try {
3-
const response = await fetch('/api/orders', {
4-
method: 'POST',
3+
const response = await fetch("/api/orders", {
4+
method: "POST",
55
headers: {
6-
'Content-Type': 'application/json',
6+
"Content-Type": "application/json",
77
},
88
// use the "body" param to optionally pass additional order information
99
// like product ids and quantities
1010
body: JSON.stringify({
1111
cart: [
1212
{
13-
id: 'YOUR_PRODUCT_ID',
14-
quantity: 'YOUR_PRODUCT_QUANTITY',
13+
id: "YOUR_PRODUCT_ID",
14+
quantity: "YOUR_PRODUCT_QUANTITY",
1515
},
1616
],
1717
}),
@@ -38,9 +38,9 @@ async function createOrderCallback() {
3838
async function onApproveCallback(data, actions) {
3939
try {
4040
const response = await fetch(`/api/orders/${data.orderID}/capture`, {
41-
method: 'POST',
41+
method: "POST",
4242
headers: {
43-
'Content-Type': 'application/json',
43+
"Content-Type": "application/json",
4444
},
4545
});
4646

@@ -55,11 +55,11 @@ async function onApproveCallback(data, actions) {
5555
orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];
5656
const errorDetail = orderData?.details?.[0];
5757

58-
const isHostedFieldsComponent = typeof data.card === 'object';
58+
const isHostedFieldsComponent = typeof data.card === "object";
5959

6060
// this actions.restart() behavior only applies to the Buttons component
6161
if (
62-
errorDetail?.issue === 'INSTRUMENT_DECLINED' &&
62+
errorDetail?.issue === "INSTRUMENT_DECLINED" &&
6363
isHostedFieldsComponent === false
6464
) {
6565
// (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
@@ -68,7 +68,7 @@ async function onApproveCallback(data, actions) {
6868
} else if (
6969
errorDetail ||
7070
!transaction ||
71-
transaction.status === 'DECLINED'
71+
transaction.status === "DECLINED"
7272
) {
7373
// (2) Other non-recoverable errors -> Show a failure message
7474
let errorMessage;
@@ -88,7 +88,7 @@ async function onApproveCallback(data, actions) {
8888
`Transaction ${transaction.status}: ${transaction.id}<br><br>See console for all available details`,
8989
);
9090
console.log(
91-
'Capture result',
91+
"Capture result",
9292
orderData,
9393
JSON.stringify(orderData, null, 2),
9494
);
@@ -106,11 +106,11 @@ paypal
106106
createOrder: createOrderCallback,
107107
onApprove: onApproveCallback,
108108
})
109-
.render('#paypal-button-container');
109+
.render("#paypal-button-container");
110110

111111
// Example function to show a result to the user. Your site's UI library can be used instead.
112112
function resultMessage(message) {
113-
const container = document.querySelector('#result-message');
113+
const container = document.querySelector("#result-message");
114114
container.innerHTML = message;
115115
}
116116

@@ -121,55 +121,55 @@ if (paypal.HostedFields.isEligible()) {
121121
// Call your server to set up the transaction
122122
createOrder: createOrderCallback,
123123
styles: {
124-
'.valid': {
125-
color: 'green',
124+
".valid": {
125+
color: "green",
126126
},
127-
'.invalid': {
128-
color: 'red',
127+
".invalid": {
128+
color: "red",
129129
},
130130
},
131131
fields: {
132132
number: {
133-
selector: '#card-number',
134-
placeholder: '4111 1111 1111 1111',
133+
selector: "#card-number",
134+
placeholder: "4111 1111 1111 1111",
135135
},
136136
cvv: {
137-
selector: '#cvv',
138-
placeholder: '123',
137+
selector: "#cvv",
138+
placeholder: "123",
139139
},
140140
expirationDate: {
141-
selector: '#expiration-date',
142-
placeholder: 'MM/YY',
141+
selector: "#expiration-date",
142+
placeholder: "MM/YY",
143143
},
144144
},
145145
}).then((cardFields) => {
146-
document.querySelector('#card-form').addEventListener('submit', (event) => {
146+
document.querySelector("#card-form").addEventListener("submit", (event) => {
147147
event.preventDefault();
148148
cardFields
149149
.submit({
150150
// Cardholder's first and last name
151-
cardholderName: document.getElementById('card-holder-name').value,
151+
cardholderName: document.getElementById("card-holder-name").value,
152152
// Billing Address
153153
billingAddress: {
154154
// Street address, line 1
155155
streetAddress: document.getElementById(
156-
'card-billing-address-street',
156+
"card-billing-address-street",
157157
).value,
158158
// Street address, line 2 (Ex: Unit, Apartment, etc.)
159159
extendedAddress: document.getElementById(
160-
'card-billing-address-unit',
160+
"card-billing-address-unit",
161161
).value,
162162
// State
163-
region: document.getElementById('card-billing-address-state').value,
163+
region: document.getElementById("card-billing-address-state").value,
164164
// City
165-
locality: document.getElementById('card-billing-address-city')
165+
locality: document.getElementById("card-billing-address-city")
166166
.value,
167167
// Postal Code
168-
postalCode: document.getElementById('card-billing-address-zip')
168+
postalCode: document.getElementById("card-billing-address-zip")
169169
.value,
170170
// Country Code
171171
countryCodeAlpha2: document.getElementById(
172-
'card-billing-address-country',
172+
"card-billing-address-country",
173173
).value,
174174
},
175175
})
@@ -188,5 +188,5 @@ if (paypal.HostedFields.isEligible()) {
188188
});
189189
} else {
190190
// Hides card fields if the merchant isn't eligible
191-
document.querySelector('#card-form').style = 'display: none';
191+
document.querySelector("#card-form").style = "display: none";
192192
}

‎advanced-integration/server.js‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import express from 'express';
2-
import fetch from 'node-fetch';
3-
import 'dotenv/config';
4-
import path from 'path';
1+
import express from "express";
2+
import fetch from "node-fetch";
3+
import "dotenv/config";
4+
import path from "path";
55

66
const { PAYPAL_CLIENT_ID, PAYPAL_CLIENT_SECRET, PORT = 8888 } = process.env;
7-
const base = 'https://api-m.sandbox.paypal.com';
7+
const base = "https://api-m.sandbox.paypal.com";
88
const app = express();
9-
app.set('view engine', 'ejs');
10-
app.use(express.static('public'));
9+
app.set("view engine", "ejs");
10+
app.use(express.static("public"));
1111

1212
// parse post params sent in body in json format
1313
app.use(express.json());
@@ -19,14 +19,14 @@ app.use(express.json());
1919
const generateAccessToken = async () => {
2020
try {
2121
if (!PAYPAL_CLIENT_ID || !PAYPAL_CLIENT_SECRET) {
22-
throw new Error('MISSING_API_CREDENTIALS');
22+
throw new Error("MISSING_API_CREDENTIALS");
2323
}
2424
const auth = Buffer.from(
25-
PAYPAL_CLIENT_ID + ':' + PAYPAL_CLIENT_SECRET,
26-
).toString('base64');
25+
PAYPAL_CLIENT_ID + ":" + PAYPAL_CLIENT_SECRET,
26+
).toString("base64");
2727
const response = await fetch(`${base}/v1/oauth2/token`, {
28-
method: 'POST',
29-
body: 'grant_type=client_credentials',
28+
method: "POST",
29+
body: "grant_type=client_credentials",
3030
headers: {
3131
Authorization: `Basic ${auth}`,
3232
},
@@ -35,7 +35,7 @@ const generateAccessToken = async () => {
3535
const data = await response.json();
3636
return data.access_token;
3737
} catch (error) {
38-
console.error('Failed to generate Access Token:', error);
38+
console.error("Failed to generate Access Token:", error);
3939
}
4040
};
4141

@@ -47,11 +47,11 @@ const generateClientToken = async () => {
4747
const accessToken = await generateAccessToken();
4848
const url = `${base}/v1/identity/generate-token`;
4949
const response = await fetch(url, {
50-
method: 'POST',
50+
method: "POST",
5151
headers: {
5252
Authorization: `Bearer ${accessToken}`,
53-
'Accept-Language': 'en_US',
54-
'Content-Type': 'application/json',
53+
"Accept-Language": "en_US",
54+
"Content-Type": "application/json",
5555
},
5656
});
5757

@@ -65,35 +65,35 @@ const generateClientToken = async () => {
6565
const createOrder = async (cart) => {
6666
// use the cart information passed from the front-end to calculate the purchase unit details
6767
console.log(
68-
'shopping cart information passed from the frontend createOrder() callback:',
68+
"shopping cart information passed from the frontend createOrder() callback:",
6969
cart,
7070
);
7171

7272
const accessToken = await generateAccessToken();
7373
const url = `${base}/v2/checkout/orders`;
7474
const payload = {
75-
intent: 'CAPTURE',
75+
intent: "CAPTURE",
7676
purchase_units: [
7777
{
7878
amount: {
79-
currency_code: 'USD',
80-
value: '0.02',
79+
currency_code: "USD",
80+
value: "0.02",
8181
},
8282
},
8383
],
8484
};
8585

8686
const response = await fetch(url, {
8787
headers: {
88-
'Content-Type': 'application/json',
88+
"Content-Type": "application/json",
8989
Authorization: `Bearer ${accessToken}`,
9090
// Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
9191
// https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
9292
// "PayPal-Mock-Response": '{"mock_application_codes": "MISSING_REQUIRED_PARAMETER"}'
9393
// "PayPal-Mock-Response": '{"mock_application_codes": "PERMISSION_DENIED"}'
9494
// "PayPal-Mock-Response": '{"mock_application_codes": "INTERNAL_SERVER_ERROR"}'
9595
},
96-
method: 'POST',
96+
method: "POST",
9797
body: JSON.stringify(payload),
9898
});
9999

@@ -109,9 +109,9 @@ const captureOrder = async (orderID) => {
109109
const url = `${base}/v2/checkout/orders/${orderID}/capture`;
110110

111111
const response = await fetch(url, {
112-
method: 'POST',
112+
method: "POST",
113113
headers: {
114-
'Content-Type': 'application/json',
114+
"Content-Type": "application/json",
115115
Authorization: `Bearer ${accessToken}`,
116116
// Uncomment one of these to force an error for negative testing (in sandbox mode only). Documentation:
117117
// https://developer.paypal.com/tools/sandbox/negative-testing/request-headers/
@@ -138,10 +138,10 @@ async function handleResponse(response) {
138138
}
139139

140140
// render checkout page with client id & unique client token
141-
app.get('/', async (req, res) => {
141+
app.get("/", async (req, res) => {
142142
try {
143143
const { jsonResponse } = await generateClientToken();
144-
res.render('checkout', {
144+
res.render("checkout", {
145145
clientId: PAYPAL_CLIENT_ID,
146146
clientToken: jsonResponse.client_token,
147147
});
@@ -150,26 +150,26 @@ app.get('/', async (req, res) => {
150150
}
151151
});
152152

153-
app.post('/api/orders', async (req, res) => {
153+
app.post("/api/orders", async (req, res) => {
154154
try {
155155
// use the cart information passed from the front-end to calculate the order amount detals
156156
const { cart } = req.body;
157157
const { jsonResponse, httpStatusCode } = await createOrder(cart);
158158
res.status(httpStatusCode).json(jsonResponse);
159159
} catch (error) {
160-
console.error('Failed to create order:', error);
161-
res.status(500).json({ error: 'Failed to create order.' });
160+
console.error("Failed to create order:", error);
161+
res.status(500).json({ error: "Failed to create order." });
162162
}
163163
});
164164

165-
app.post('/api/orders/:orderID/capture', async (req, res) => {
165+
app.post("/api/orders/:orderID/capture", async (req, res) => {
166166
try {
167167
const { orderID } = req.params;
168168
const { jsonResponse, httpStatusCode } = await captureOrder(orderID);
169169
res.status(httpStatusCode).json(jsonResponse);
170170
} catch (error) {
171-
console.error('Failed to create order:', error);
172-
res.status(500).json({ error: 'Failed to capture order.' });
171+
console.error("Failed to create order:", error);
172+
res.status(500).json({ error: "Failed to capture order." });
173173
}
174174
});
175175

‎standard-integration/index.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,18 @@
1515
.Buttons({
1616
createOrder: async () => {
1717
try {
18-
const response = await fetch('/api/orders', {
19-
method: 'POST',
18+
const response = await fetch("/api/orders", {
19+
method: "POST",
2020
headers: {
21-
'Content-Type': 'application/json',
21+
"Content-Type": "application/json",
2222
},
2323
// use the "body" param to optionally pass additional order information
2424
// like product ids and quantities
2525
body: JSON.stringify({
2626
cart: [
2727
{
28-
id: 'YOUR_PRODUCT_ID',
29-
quantity: 'YOUR_PRODUCT_QUANTITY',
28+
id: "YOUR_PRODUCT_ID",
29+
quantity: "YOUR_PRODUCT_QUANTITY",
3030
},
3131
],
3232
}),
@@ -56,9 +56,9 @@
5656
const response = await fetch(
5757
`/api/orders/${data.orderID}/capture`,
5858
{
59-
method: 'POST',
59+
method: "POST",
6060
headers: {
61-
'Content-Type': 'application/json',
61+
"Content-Type": "application/json",
6262
},
6363
},
6464
);
@@ -71,7 +71,7 @@
7171

7272
const errorDetail = orderData?.details?.[0];
7373

74-
if (errorDetail?.issue === 'INSTRUMENT_DECLINED') {
74+
if (errorDetail?.issue === "INSTRUMENT_DECLINED") {
7575
// (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
7676
// recoverable state, per https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
7777
return actions.restart();
@@ -92,7 +92,7 @@
9292
`Transaction ${transaction.status}: ${transaction.id}<br><br>See console for all available details`,
9393
);
9494
console.log(
95-
'Capture result',
95+
"Capture result",
9696
orderData,
9797
JSON.stringify(orderData, null, 2),
9898
);
@@ -105,11 +105,11 @@
105105
}
106106
},
107107
})
108-
.render('#paypal-button-container');
108+
.render("#paypal-button-container");
109109

110110
// Example function to show a result to the user. Your site's UI library can be used instead.
111111
function resultMessage(message) {
112-
const container = document.querySelector('#result-message');
112+
const container = document.querySelector("#result-message");
113113
container.innerHTML = message;
114114
}
115115
</script>

0 commit comments

Comments
 (0)