From b612eb5e59f2beb995cbe0a739a9044dea770e61 Mon Sep 17 00:00:00 2001
From: Greg Jopa <534034+gregjopa@users.noreply.github.com>
Date: Fri, 25 Aug 2023 10:11:22 -0500
Subject: [PATCH 1/2] Use paypal-js for loading the JS SDK
---
standard-integration/client/app.js | 168 ++++++++++++----------
standard-integration/client/checkout.html | 4 +-
2 files changed, 91 insertions(+), 81 deletions(-)
diff --git a/standard-integration/client/app.js b/standard-integration/client/app.js
index cab942a0..b56f2c54 100644
--- a/standard-integration/client/app.js
+++ b/standard-integration/client/app.js
@@ -1,91 +1,103 @@
-window.paypal
- .Buttons({
- async createOrder() {
- try {
- const response = await fetch("/api/orders", {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- // use the "body" param to optionally pass additional order information
- // like product ids and quantities
- body: JSON.stringify({
- cart: [
- {
- id: "YOUR_PRODUCT_ID",
- quantity: "YOUR_PRODUCT_QUANTITY",
- },
- ],
- }),
- });
+import { loadScript } from "https://www.paypalobjects.com/paypal-js/esm/paypal.min.js";
- const orderData = await response.json();
+loadScript({
+ // replace the "test" clientId value with your own
+ clientId: "test",
+ currency: "USD",
+}).then((paypal) => {
+ paypal
+ .Buttons({
+ async createOrder() {
+ try {
+ const response = await fetch("/api/orders", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ // use the "body" param to optionally pass additional order information
+ // like product ids and quantities
+ body: JSON.stringify({
+ cart: [
+ {
+ id: "YOUR_PRODUCT_ID",
+ quantity: "YOUR_PRODUCT_QUANTITY",
+ },
+ ],
+ }),
+ });
- if (orderData.id) {
- return orderData.id;
- } else {
- const errorDetail = orderData?.details?.[0];
- const errorMessage = errorDetail
- ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
- : JSON.stringify(orderData);
+ const orderData = await response.json();
+
+ if (orderData.id) {
+ return orderData.id;
+ } else {
+ const errorDetail = orderData?.details?.[0];
+ const errorMessage = errorDetail
+ ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
+ : JSON.stringify(orderData);
- throw new Error(errorMessage);
+ throw new Error(errorMessage);
+ }
+ } catch (error) {
+ console.error(error);
+ resultMessage(
+ `Could not initiate PayPal Checkout...
${error}`,
+ );
}
- } catch (error) {
- console.error(error);
- resultMessage(`Could not initiate PayPal Checkout...
${error}`);
- }
- },
- async onApprove(data, actions) {
- try {
- const response = await fetch(`/api/orders/${data.orderID}/capture`, {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- });
+ },
+ async onApprove(data, actions) {
+ try {
+ const response = await fetch(`/api/orders/${data.orderID}/capture`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
- const orderData = await response.json();
- // Three cases to handle:
- // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
- // (2) Other non-recoverable errors -> Show a failure message
- // (3) Successful transaction -> Show confirmation or thank you message
+ const orderData = await response.json();
+ // Three cases to handle:
+ // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
+ // (2) Other non-recoverable errors -> Show a failure message
+ // (3) Successful transaction -> Show confirmation or thank you message
- const errorDetail = orderData?.details?.[0];
+ const errorDetail = orderData?.details?.[0];
- if (errorDetail?.issue === "INSTRUMENT_DECLINED") {
- // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
- // recoverable state, per https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
- return actions.restart();
- } else if (errorDetail) {
- // (2) Other non-recoverable errors -> Show a failure message
- throw new Error(`${errorDetail.description} (${orderData.debug_id})`);
- } else if (!orderData.purchase_units) {
- throw new Error(JSON.stringify(orderData));
- } else {
- // (3) Successful transaction -> Show confirmation or thank you message
- // Or go to another URL: actions.redirect('thank_you.html');
- const transaction =
- orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
- orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];
+ if (errorDetail?.issue === "INSTRUMENT_DECLINED") {
+ // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
+ // recoverable state, per https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
+ return actions.restart();
+ } else if (errorDetail) {
+ // (2) Other non-recoverable errors -> Show a failure message
+ throw new Error(
+ `${errorDetail.description} (${orderData.debug_id})`,
+ );
+ } else if (!orderData.purchase_units) {
+ throw new Error(JSON.stringify(orderData));
+ } else {
+ // (3) Successful transaction -> Show confirmation or thank you message
+ // Or go to another URL: actions.redirect('thank_you.html');
+ const transaction =
+ orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
+ orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];
+ resultMessage(
+ `Transaction ${transaction.status}: ${transaction.id}
See console for all available details`,
+ );
+ console.log(
+ "Capture result",
+ orderData,
+ JSON.stringify(orderData, null, 2),
+ );
+ }
+ } catch (error) {
+ console.error(error);
resultMessage(
- `Transaction ${transaction.status}: ${transaction.id}
See console for all available details`,
- );
- console.log(
- "Capture result",
- orderData,
- JSON.stringify(orderData, null, 2),
+ `Sorry, your transaction could not be processed...
${error}`,
);
}
- } catch (error) {
- console.error(error);
- resultMessage(
- `Sorry, your transaction could not be processed...
${error}`,
- );
- }
- },
- })
- .render("#paypal-button-container");
+ },
+ })
+ .render("#paypal-button-container");
+});
// Example function to show a result to the user. Your site's UI library can be used instead.
function resultMessage(message) {
diff --git a/standard-integration/client/checkout.html b/standard-integration/client/checkout.html
index 7b959c2f..6c0b9ff5 100644
--- a/standard-integration/client/checkout.html
+++ b/standard-integration/client/checkout.html
@@ -4,12 +4,10 @@
PayPal JS SDK Standard Integration
+
-
-
-