diff --git a/client/components/paypalPayments/oneTimePayment/html/package.json b/client/components/paypalPayments/oneTimePayment/html/package.json index aff9ce36..9f2f465e 100644 --- a/client/components/paypalPayments/oneTimePayment/html/package.json +++ b/client/components/paypalPayments/oneTimePayment/html/package.json @@ -8,7 +8,7 @@ "preview": "vite preview", "start": "vite", "format": "prettier . --write", - "format:check": "prettier . --check", + "format:check": "prettier . --check --log-level debug", "lint": "echo \"eslint is not set up\"" }, "license": "Apache-2.0", diff --git a/client/components/paypalPayments/oneTimePayment/html/src/advanced/redirect/app.js b/client/components/paypalPayments/oneTimePayment/html/src/advanced/redirect/app.js new file mode 100644 index 00000000..d87b6fd6 --- /dev/null +++ b/client/components/paypalPayments/oneTimePayment/html/src/advanced/redirect/app.js @@ -0,0 +1,134 @@ +async function onPayPalLoaded() { + try { + const clientToken = await getBrowserSafeClientToken(); + const sdkInstance = await window.paypal.createInstance({ + clientToken, + components: ["paypal-payments"], + pageType: "checkout", + }); + + setupPayPalButton(sdkInstance); + } catch (error) { + console.error(error); + } +} + +const paymentSessionOptions = { + async onApprove(data) { + console.log("onApprove", data); + const orderData = await captureOrder({ + orderId: data.orderId, + }); + console.log("Capture result", orderData); + }, + onCancel(data) { + console.log("onCancel", data); + }, + onError(error) { + console.log("onError", error); + }, +}; + +async function setupPayPalButton(sdkInstance) { + const paypalPaymentSession = sdkInstance.createPayPalOneTimePaymentSession( + paymentSessionOptions, + ); + + const enableAutoRedirect = document.querySelector("#enable-auto-redirect"); + const paypalButton = document.querySelector("#paypal-button"); + paypalButton.removeAttribute("hidden"); + + paypalButton.addEventListener("click", async () => { + const createOrderPromiseReference = createRedirectOrder(); + + try { + const { redirectURL } = await paypalPaymentSession.start( + { + presentationMode: "redirect", + autoRedirect: { + enabled: enableAutoRedirect.checked, + }, + }, + createOrderPromiseReference, + ); + if (redirectURL) { + console.log(`redirectURL: ${redirectURL}`); + window.location.assign(redirectURL); + } + } catch (error) { + console.error(error); + } + }); +} + +async function getBrowserSafeClientToken() { + const response = await fetch("/paypal-api/auth/browser-safe-client-token", { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const { accessToken } = await response.json(); + + return accessToken; +} + +async function createRedirectOrder() { + const returnUrl = new URL(window.location); + returnUrl.searchParams.set("flowState", "approve"); + + const cancelUrl = new URL(window.location); + cancelUrl.searchParams.set("flowState", "cancel"); + + const orderPayload = { + intent: "CAPTURE", + paymentSource: { + paypal: { + experienceContext: { + shippingPreference: "NO_SHIPPING", + userAction: "CONTINUE", + returnUrl, + cancelUrl, + }, + }, + }, + purchaseUnits: [ + { + amount: { + currencyCode: "USD", + value: "10.00", + breakdown: { + itemTotal: { + currencyCode: "USD", + value: "10.00", + }, + }, + }, + }, + ], + }; + + const response = await fetch("/paypal-api/checkout/orders/create", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(orderPayload), + }); + const { id } = await response.json(); + return { orderId: id }; +} + +async function captureOrder({ orderId }) { + const response = await fetch( + `/paypal-api/checkout/orders/${orderId}/capture`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + }, + ); + const data = await response.json(); + return data; +} diff --git a/client/components/paypalPayments/oneTimePayment/html/src/advanced/redirect/index.html b/client/components/paypalPayments/oneTimePayment/html/src/advanced/redirect/index.html new file mode 100644 index 00000000..798c6769 --- /dev/null +++ b/client/components/paypalPayments/oneTimePayment/html/src/advanced/redirect/index.html @@ -0,0 +1,25 @@ + +
+ +