window.paypal
2 .Buttons({
3 style: {
4 shape: "rect",
5 layout: "vertical",
6 },
7 async createOrder() {
8 try {
9 const response = await fetch("/api/orders", {
10 method: "POST",
11 headers: {
12 "Content-Type": "application/json",
13 },
14 // use the "body" param to optionally pass additional order information
15 // like product ids and quantities
16 body: JSON.stringify({
17 cart: [
18 {
19 id: "YOUR_PRODUCT_ID",
20 quantity: "YOUR_PRODUCT_QUANTITY",
21 },
22 ],
23 }),
24 });
25
26 const orderData = await response.json();
27
28 if (orderData.id) {
29 return orderData.id;
30 } else {
31 const errorDetail = orderData?.details?.[0];
32 const errorMessage = errorDetail
33 ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
34 : JSON.stringify(orderData);
35
36 throw new Error(errorMessage);
37 }
38 } catch (error) {
39 console.error(error);
40 resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
41 }
42 },
43 async onApprove(data, actions) {
44 try {
45 const response = await fetch(`/api/orders/${data.orderID}/capture`, {
46 method: "POST",
47 headers: {
48 "Content-Type": "application/json",
49 },
50 });
51
52 const orderData = await response.json();
53 // Three cases to handle:
54 // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
55 // (2) Other non-recoverable errors -> Show a failure message
56 // (3) Successful transaction -> Show confirmation or thank you message
57
58 const errorDetail = orderData?.details?.[0];
59
60 if (errorDetail?.issue === "INSTRUMENT_DECLINED") {
61 // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
62 // recoverable state, per https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
63 return actions.restart();
64 } else if (errorDetail) {
65 // (2) Other non-recoverable errors -> Show a failure message
66 throw new Error(`${errorDetail.description} (${orderData.debug_id})`);
67 } else if (!orderData.purchase_units) {
68 throw new Error(JSON.stringify(orderData));
69 } else {
70 // (3) Successful transaction -> Show confirmation or thank you message
71 // Or go to another URL: actions.redirect('thank_you.html');
72 const transaction =
73 orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
74 orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];
75 resultMessage(
76 `Transaction ${transaction.status}: ${transaction.id}<br><br>See console for all available details`,
77 );
78 console.log(
79 "Capture result",
80 orderData,
81 JSON.stringify(orderData, null, 2),
82 );
83 }
84 } catch (error) {
85 console.error(error);
86 resultMessage(
87 `Sorry, your transaction could not be processed...<br><br>${error}`,
88 );
89 }
90 },
91 })
92 .render("#paypal-button-container");
93
94 // Example function to show a result to the user. Your site's UI library can be used instead.
95 function resultMessage(message) {
96 const container = document.querySelector("#result-message");
97 container.innerHTML = message;
98 }