From 8ffca5e67657d6974ab0e6b7a0284e67624d700f Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 10:05:36 +0200 Subject: [PATCH 01/20] Add demo payment component, remove multi-gateway configuration --- .../PaymentSection/Demo/PaymentOptions.tsx | 57 +++++++++++++++++++ .../PaymentSection/PaymentMethods.tsx | 17 +----- .../usePaymentGatewaysInitialize.ts | 11 ++-- src/checkout/sections/PaymentSection/utils.ts | 30 ---------- 4 files changed, 66 insertions(+), 49 deletions(-) create mode 100644 src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx diff --git a/src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx b/src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx new file mode 100644 index 000000000..a7334767e --- /dev/null +++ b/src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx @@ -0,0 +1,57 @@ +import type { FormEventHandler } from "react"; +import { useCheckoutValidationActions } from "@/checkout/state/checkoutValidationStateStore"; +import { useUser } from "@/checkout/hooks/useUser"; +import { useCheckoutUpdateStateActions } from "@/checkout/state/updateStateStore"; +import { useEvent } from "@/checkout/hooks/useEvent"; +import { useCheckoutCompleteMutation, useTransactionInitializeMutation } from "@/checkout/graphql"; +import { useCheckout } from "@/checkout/hooks/useCheckout"; +import { replaceUrl } from "@/checkout/lib/utils/url"; +import { Button } from "@/checkout/components"; + +export const DemoPayment = () => { + const { checkout } = useCheckout(); + const { authenticated } = useUser(); + const { validateAllForms } = useCheckoutValidationActions(); + const { setSubmitInProgress, setShouldRegisterUser } = useCheckoutUpdateStateActions(); + const [__, mutation] = useTransactionInitializeMutation(); + const [_, completeMutation] = useCheckoutCompleteMutation(); + const onSubmit: FormEventHandler = useEvent(async (e) => { + e.preventDefault(); + validateAllForms(authenticated); + setShouldRegisterUser(true); + setSubmitInProgress(true); + await mutation({ + checkoutId: checkout.id, + paymentGateway: { + id: process.env.NEXT_PUBLIC_PAYMENT_GATEWAY as string, + data: { + details: "valid-details", + }, + }, + }); + const { data } = await completeMutation({ + checkoutId: checkout.id, + }); + + const order = data?.checkoutComplete?.order; + + if (order) { + const newUrl = replaceUrl({ + query: { + order: order.id, + }, + replaceWholeQuery: true, + }); + window.location.href = newUrl; + } + }); + + return ( +
+ {/* eslint-disable-next-line react/jsx-no-undef */} + +
+ ); +}; diff --git a/src/checkout/sections/PaymentSection/PaymentMethods.tsx b/src/checkout/sections/PaymentSection/PaymentMethods.tsx index 61c71d7ef..4f6a52577 100644 --- a/src/checkout/sections/PaymentSection/PaymentMethods.tsx +++ b/src/checkout/sections/PaymentSection/PaymentMethods.tsx @@ -1,32 +1,21 @@ -import { paymentMethodToComponent } from "./supportedPaymentApps"; import { PaymentSectionSkeleton } from "@/checkout/sections/PaymentSection/PaymentSectionSkeleton"; -import { usePayments } from "@/checkout/sections/PaymentSection/usePayments"; import { useCheckoutUpdateState } from "@/checkout/state/updateStateStore"; +import { DemoPayment } from "@/checkout/sections/PaymentSection/Demo/PaymentOptions"; export const PaymentMethods = () => { - const { availablePaymentGateways, fetching } = usePayments(); const { changingBillingCountry, updateState: { checkoutDeliveryMethodUpdate }, } = useCheckoutUpdateState(); // delivery methods change total price so we want to wait until the change is done - if (changingBillingCountry || fetching || checkoutDeliveryMethodUpdate === "loading") { + if (changingBillingCountry || checkoutDeliveryMethodUpdate === "loading") { return ; } return (
- {availablePaymentGateways.map((gateway) => { - const Component = paymentMethodToComponent[gateway.id]; - return ( - - ); - })} +
); }; diff --git a/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts b/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts index 8842f92bf..127304666 100644 --- a/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts +++ b/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts @@ -4,7 +4,6 @@ import { useCheckout } from "@/checkout/hooks/useCheckout"; import { useSubmit } from "@/checkout/hooks/useSubmit"; import { type MightNotExist } from "@/checkout/lib/globalTypes"; import { type ParsedPaymentGateways } from "@/checkout/sections/PaymentSection/types"; -import { getFilteredPaymentGateways } from "@/checkout/sections/PaymentSection/utils"; export const usePaymentGatewaysInitialize = () => { const { @@ -30,10 +29,12 @@ export const usePaymentGatewaysInitialize = () => { onSubmit: paymentGatewaysInitialize, parse: () => ({ checkoutId, - paymentGateways: getFilteredPaymentGateways(availablePaymentGateways).map(({ config, id }) => ({ - id, - data: config, - })), + paymentGateways: availablePaymentGateways + .filter((x) => x.id === process.env.NEXT_PUBLIC_PAYMENT_GATEWAY) + .map(({ config, id }) => ({ + id, + data: config, + })), }), onSuccess: ({ data }) => { const parsedConfigs = (data.gatewayConfigs || []) as ParsedPaymentGateways; diff --git a/src/checkout/sections/PaymentSection/utils.ts b/src/checkout/sections/PaymentSection/utils.ts index 0fab66b13..9e281b9db 100644 --- a/src/checkout/sections/PaymentSection/utils.ts +++ b/src/checkout/sections/PaymentSection/utils.ts @@ -1,42 +1,12 @@ -import { compact } from "lodash-es"; -import { adyenGatewayId } from "./AdyenDropIn/types"; -import { stripeGatewayId } from "./StripeElements/types"; import { type CheckoutAuthorizeStatusEnum, type CheckoutChargeStatusEnum, type OrderAuthorizeStatusEnum, type OrderChargeStatusEnum, - type PaymentGateway, } from "@/checkout/graphql"; -import { type MightNotExist } from "@/checkout/lib/globalTypes"; import { getUrl } from "@/checkout/lib/utils/url"; import { type PaymentStatus } from "@/checkout/sections/PaymentSection/types"; -export const supportedPaymentGateways = [adyenGatewayId, stripeGatewayId] as const; - -export const getFilteredPaymentGateways = ( - paymentGateways: MightNotExist, -): PaymentGateway[] => { - if (!paymentGateways) { - return []; - } - - // we want to use only payment apps, not plugins - return compact(paymentGateways).filter(({ id, name }) => { - const shouldBeIncluded = supportedPaymentGateways.includes(id); - const isAPlugin = !id.startsWith("app."); - - // app is missing in our codebase but is an app and not a plugin - // hence we'd like to have it handled by default - if (!shouldBeIncluded && !isAPlugin) { - console.warn(`Unhandled payment gateway - name: ${name}, id: ${id}`); - return false; - } - - return shouldBeIncluded; - }); -}; - export const getUrlForTransactionInitialize = () => getUrl({ query: { processingPayment: true } }); export const usePaymentStatus = ({ From 653920cac42555a6962589d1c1c805683956d79f Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 10:39:22 +0200 Subject: [PATCH 02/20] Add manifest --- src/app/api/demo-payment/route.ts | 77 +++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 src/app/api/demo-payment/route.ts diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts new file mode 100644 index 000000000..c628eb86f --- /dev/null +++ b/src/app/api/demo-payment/route.ts @@ -0,0 +1,77 @@ +const removeWhiteSpace = (str: string): string => { + return str.replaceAll(/[\t\n]/g, ""); +}; + +export async function GET() { + return Response.json({ + id: "storefront.demo-payment", + version: "1.0.0", + requiredSaleorVersion: "^3.20", + name: "Demo Payment App", + author: "Storefront", + about: "Demo for processing payments. Can be used for testing purposes.", + + permissions: ["HANDLE_PAYMENTS"], + + appUrl: `${process.env.VERCEL_URL}`, + configurationUrl: `${process.env.VERCEL_URL}`, + tokenTargetUrl: `${process.env.VERCEL_URL}`, + + dataPrivacy: "", + dataPrivacyUrl: `${process.env.VERCEL_URL}`, + homepageUrl: `${process.env.VERCEL_URL}`, + supportUrl: `${process.env.VERCEL_URL}`, + brand: { + logo: { + default: `${process.env.VERCEL_URL}`, + }, + }, + webhooks: [ + { + name: "Transaction initialize", + asyncEvents: ["TRANSACTION_INITIALIZE_SESSION"], + query: removeWhiteSpace(` + subscription { + event { + ... on TransactionInitializeSession { + __typename + data + action { + amount + currency + actionType + } + issuedAt + merchantReference + idempotencyKey + } + } + }`), + targetUrl: `${process.env.VERCEL_URL}/api/demo-payment/transaction-initialize`, + isActive: true, + }, + { + name: "Gateway initialize", + asyncEvents: ["PAYMENT_GATEWAY_INITIALIZE_SESSION"], + query: removeWhiteSpace(`subscription { + event { + ... on TransactionInitializeSession { + __typename + data + action { + amount + currency + actionType + } + issuedAt + merchantReference + idempotencyKey + } + } + }`), + targetUrl: `${process.env.VERCEL_URL}/api/demo-payment/gateway-initialize`, + isActive: true, + }, + ], + }); +} From 8f63e1d85eddc2f7974e7993d30b90f9d6d70c7c Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 10:44:04 +0200 Subject: [PATCH 03/20] Add https --- .../api/demo-payment/transaction-initialize/route.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/app/api/demo-payment/transaction-initialize/route.ts diff --git a/src/app/api/demo-payment/transaction-initialize/route.ts b/src/app/api/demo-payment/transaction-initialize/route.ts new file mode 100644 index 000000000..be3a2b5ba --- /dev/null +++ b/src/app/api/demo-payment/transaction-initialize/route.ts @@ -0,0 +1,10 @@ +export async function POST(req: Request) { + const randomPspReference = crypto.randomUUID(); // Generate a random PSP reference + const data = await req.json(); + console.log(data); + return Response.json({ + result: "CHARGE_SUCCESS", + amount: 10, // `payload` is typed thanks to the generated types + pspReference: randomPspReference, + }); +} From d74f8e392fccd756774a70fd851acbb300a5f524 Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 10:48:03 +0200 Subject: [PATCH 04/20] Add https --- src/app/api/demo-payment/route.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts index c628eb86f..780c67ebd 100644 --- a/src/app/api/demo-payment/route.ts +++ b/src/app/api/demo-payment/route.ts @@ -1,6 +1,7 @@ const removeWhiteSpace = (str: string): string => { return str.replaceAll(/[\t\n]/g, ""); }; +const url = `https://${process.env.VERCEL_URL}`; export async function GET() { return Response.json({ @@ -13,17 +14,17 @@ export async function GET() { permissions: ["HANDLE_PAYMENTS"], - appUrl: `${process.env.VERCEL_URL}`, - configurationUrl: `${process.env.VERCEL_URL}`, - tokenTargetUrl: `${process.env.VERCEL_URL}`, + appUrl: `${url}`, + configurationUrl: `${url}`, + tokenTargetUrl: `${url}`, dataPrivacy: "", - dataPrivacyUrl: `${process.env.VERCEL_URL}`, - homepageUrl: `${process.env.VERCEL_URL}`, - supportUrl: `${process.env.VERCEL_URL}`, + dataPrivacyUrl: `${url}`, + homepageUrl: `${url}`, + supportUrl: `${url}`, brand: { logo: { - default: `${process.env.VERCEL_URL}`, + default: `${url}`, }, }, webhooks: [ @@ -47,7 +48,7 @@ export async function GET() { } } }`), - targetUrl: `${process.env.VERCEL_URL}/api/demo-payment/transaction-initialize`, + targetUrl: `${url}/api/demo-payment/transaction-initialize`, isActive: true, }, { @@ -69,7 +70,7 @@ export async function GET() { } } }`), - targetUrl: `${process.env.VERCEL_URL}/api/demo-payment/gateway-initialize`, + targetUrl: `${url}/api/demo-payment/gateway-initialize`, isActive: true, }, ], From f6c029a4b9b55b2f737bd1a0025101fe86cc0cc6 Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 10:48:15 +0200 Subject: [PATCH 05/20] Add init --- src/app/api/demo-payment/gateway-initialize/route.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/app/api/demo-payment/gateway-initialize/route.ts diff --git a/src/app/api/demo-payment/gateway-initialize/route.ts b/src/app/api/demo-payment/gateway-initialize/route.ts new file mode 100644 index 000000000..f5e57878c --- /dev/null +++ b/src/app/api/demo-payment/gateway-initialize/route.ts @@ -0,0 +1,8 @@ +export async function POST() { + console.log("gateway"); + return Response.json({ + data: { + some: "init-data", + }, + }); +} From d946546ca462675e4cfd8dec7e84a11180c74722 Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 10:52:08 +0200 Subject: [PATCH 06/20] Add logo --- src/app/api/demo-payment/route.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts index 780c67ebd..a18104b7d 100644 --- a/src/app/api/demo-payment/route.ts +++ b/src/app/api/demo-payment/route.ts @@ -24,7 +24,7 @@ export async function GET() { supportUrl: `${url}`, brand: { logo: { - default: `${url}`, + default: `${url}/github-mark.svg`, }, }, webhooks: [ From 4566de14d7da0c5e9b047fa561349ad6d35deca6 Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 10:56:53 +0200 Subject: [PATCH 07/20] Use branch --- src/app/api/demo-payment/route.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts index a18104b7d..60f8691ae 100644 --- a/src/app/api/demo-payment/route.ts +++ b/src/app/api/demo-payment/route.ts @@ -1,7 +1,8 @@ const removeWhiteSpace = (str: string): string => { return str.replaceAll(/[\t\n]/g, ""); }; -const url = `https://${process.env.VERCEL_URL}`; + +const url = `https://${process.env.VERCEL_BRANCH_URL}`; export async function GET() { return Response.json({ From 1023a690800b8190f693c33984a3fe5764605f1a Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 11:00:57 +0200 Subject: [PATCH 08/20] Remove logo --- src/app/api/demo-payment/route.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts index 60f8691ae..11fdc63a0 100644 --- a/src/app/api/demo-payment/route.ts +++ b/src/app/api/demo-payment/route.ts @@ -23,11 +23,11 @@ export async function GET() { dataPrivacyUrl: `${url}`, homepageUrl: `${url}`, supportUrl: `${url}`, - brand: { - logo: { - default: `${url}/github-mark.svg`, - }, - }, + // brand: { + // logo: { + // default: [APP_ICON_URL], + // }, + // }, webhooks: [ { name: "Transaction initialize", From 50800ad0d743891c52705a23456466b390174c64 Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 11:08:44 +0200 Subject: [PATCH 09/20] Fix queries --- src/app/api/demo-payment/route.ts | 52 ++++++++++++++----------------- 1 file changed, 23 insertions(+), 29 deletions(-) diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts index 11fdc63a0..6b1c2b2ab 100644 --- a/src/app/api/demo-payment/route.ts +++ b/src/app/api/demo-payment/route.ts @@ -33,21 +33,21 @@ export async function GET() { name: "Transaction initialize", asyncEvents: ["TRANSACTION_INITIALIZE_SESSION"], query: removeWhiteSpace(` - subscription { - event { - ... on TransactionInitializeSession { - __typename - data - action { - amount - currency - actionType + subscription { + event { + ... on TransactionInitializeSession { + __typename + data + action { + amount + currency + actionType + } + issuedAt + merchantReference + idempotencyKey } - issuedAt - merchantReference - idempotencyKey } - } }`), targetUrl: `${url}/api/demo-payment/transaction-initialize`, isActive: true, @@ -55,22 +55,16 @@ export async function GET() { { name: "Gateway initialize", asyncEvents: ["PAYMENT_GATEWAY_INITIALIZE_SESSION"], - query: removeWhiteSpace(`subscription { - event { - ... on TransactionInitializeSession { - __typename - data - action { - amount - currency - actionType - } - issuedAt - merchantReference - idempotencyKey - } - } - }`), + query: removeWhiteSpace(` + subscription { + event { + ... on PaymentGatewayInitializeSession { + __typename + amount + data + } + } + }`), targetUrl: `${url}/api/demo-payment/gateway-initialize`, isActive: true, }, From 7188dfb48744e293cd93308fa7389b968b12e3c6 Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 11:13:10 +0200 Subject: [PATCH 10/20] Add white space --- src/app/api/demo-payment/route.ts | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts index 6b1c2b2ab..b6e3140e8 100644 --- a/src/app/api/demo-payment/route.ts +++ b/src/app/api/demo-payment/route.ts @@ -1,7 +1,3 @@ -const removeWhiteSpace = (str: string): string => { - return str.replaceAll(/[\t\n]/g, ""); -}; - const url = `https://${process.env.VERCEL_BRANCH_URL}`; export async function GET() { @@ -32,7 +28,7 @@ export async function GET() { { name: "Transaction initialize", asyncEvents: ["TRANSACTION_INITIALIZE_SESSION"], - query: removeWhiteSpace(` + query: ` subscription { event { ... on TransactionInitializeSession { @@ -48,14 +44,14 @@ export async function GET() { idempotencyKey } } - }`), + }`, targetUrl: `${url}/api/demo-payment/transaction-initialize`, isActive: true, }, { name: "Gateway initialize", asyncEvents: ["PAYMENT_GATEWAY_INITIALIZE_SESSION"], - query: removeWhiteSpace(` + query: ` subscription { event { ... on PaymentGatewayInitializeSession { @@ -64,7 +60,7 @@ export async function GET() { data } } - }`), + }`, targetUrl: `${url}/api/demo-payment/gateway-initialize`, isActive: true, }, From bb15906f7b5635d59e162f9b03ef388c84476121 Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 11:16:12 +0200 Subject: [PATCH 11/20] Remove tabs --- src/app/api/demo-payment/route.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts index b6e3140e8..2a3658d61 100644 --- a/src/app/api/demo-payment/route.ts +++ b/src/app/api/demo-payment/route.ts @@ -44,7 +44,7 @@ export async function GET() { idempotencyKey } } - }`, + }`.replaceAll("\t", ""), targetUrl: `${url}/api/demo-payment/transaction-initialize`, isActive: true, }, @@ -60,7 +60,7 @@ export async function GET() { data } } - }`, + }`.replaceAll("\t", ""), targetUrl: `${url}/api/demo-payment/gateway-initialize`, isActive: true, }, From b1b3eb29490a88447ce9eb60a52dfb2644e748a5 Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 11:21:44 +0200 Subject: [PATCH 12/20] Fix white space --- src/app/api/demo-payment/route.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts index 2a3658d61..a64b3ef52 100644 --- a/src/app/api/demo-payment/route.ts +++ b/src/app/api/demo-payment/route.ts @@ -1,3 +1,7 @@ +const removeWhiteSpace = (str: string): string => { + return str.replaceAll(/[\t\n]+/g, " "); +}; + const url = `https://${process.env.VERCEL_BRANCH_URL}`; export async function GET() { @@ -28,7 +32,7 @@ export async function GET() { { name: "Transaction initialize", asyncEvents: ["TRANSACTION_INITIALIZE_SESSION"], - query: ` + query: removeWhiteSpace(` subscription { event { ... on TransactionInitializeSession { @@ -44,14 +48,14 @@ export async function GET() { idempotencyKey } } - }`.replaceAll("\t", ""), + }`), targetUrl: `${url}/api/demo-payment/transaction-initialize`, isActive: true, }, { name: "Gateway initialize", asyncEvents: ["PAYMENT_GATEWAY_INITIALIZE_SESSION"], - query: ` + query: removeWhiteSpace(` subscription { event { ... on PaymentGatewayInitializeSession { @@ -60,7 +64,7 @@ export async function GET() { data } } - }`.replaceAll("\t", ""), + }`), targetUrl: `${url}/api/demo-payment/gateway-initialize`, isActive: true, }, From 59dea4f31d1a5e1b3f0824f54810ee845028273d Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 11:27:51 +0200 Subject: [PATCH 13/20] Fix event type --- src/app/api/demo-payment/route.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts index a64b3ef52..f2b7f46f2 100644 --- a/src/app/api/demo-payment/route.ts +++ b/src/app/api/demo-payment/route.ts @@ -31,7 +31,7 @@ export async function GET() { webhooks: [ { name: "Transaction initialize", - asyncEvents: ["TRANSACTION_INITIALIZE_SESSION"], + syncEvents: ["TRANSACTION_INITIALIZE_SESSION"], query: removeWhiteSpace(` subscription { event { @@ -54,7 +54,7 @@ export async function GET() { }, { name: "Gateway initialize", - asyncEvents: ["PAYMENT_GATEWAY_INITIALIZE_SESSION"], + syncEvents: ["PAYMENT_GATEWAY_INITIALIZE_SESSION"], query: removeWhiteSpace(` subscription { event { From 7b1aa003fa9fc658e6ace7f68f0db8e55eb2b5db Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 13:17:53 +0200 Subject: [PATCH 14/20] Add post route for tokenUrl --- src/app/api/demo-payment/route.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts index f2b7f46f2..472a1cb21 100644 --- a/src/app/api/demo-payment/route.ts +++ b/src/app/api/demo-payment/route.ts @@ -71,3 +71,7 @@ export async function GET() { ], }); } + +export async function POST(_: Request) { + // During installation this path would be used to save app token that later can be used to authenticate requests. For example to manipulate checkout or orders. +} From 4830dc2e94ce94847e668e27ef103e50109b129b Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 13:30:57 +0200 Subject: [PATCH 15/20] Return 200 --- src/app/api/demo-payment/route.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts index 472a1cb21..d756b5459 100644 --- a/src/app/api/demo-payment/route.ts +++ b/src/app/api/demo-payment/route.ts @@ -74,4 +74,7 @@ export async function GET() { export async function POST(_: Request) { // During installation this path would be used to save app token that later can be used to authenticate requests. For example to manipulate checkout or orders. + return new Response("Success!", { + status: 200, + }); } From 38f2472f8015494296240d03d6a5a3a9adf35c1f Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 13:33:55 +0200 Subject: [PATCH 16/20] Add url --- src/app/api/demo-payment/route.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts index d756b5459..d8f0e8bac 100644 --- a/src/app/api/demo-payment/route.ts +++ b/src/app/api/demo-payment/route.ts @@ -17,7 +17,7 @@ export async function GET() { appUrl: `${url}`, configurationUrl: `${url}`, - tokenTargetUrl: `${url}`, + tokenTargetUrl: `${url}/api/demo-payment`, dataPrivacy: "", dataPrivacyUrl: `${url}`, From cd7b059091ad26992ee58c4e0363f4f643d512c3 Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 14:01:40 +0200 Subject: [PATCH 17/20] Remove demo --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3c9d76d10..05d8e2d99 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsaleor%2Fstorefront&env=NEXT_PUBLIC_SALEOR_API_URL&envDescription=Full%20Saleor%20GraphQL%20endpoint%20URL%2C%20eg%3A%20https%3A%2F%2Fstorefront1.saleor.cloud%2Fgraphql%2F&project-name=my-saleor-storefront&repository-name=my-saleor-storefront&demo-title=Saleor%20Next.js%20Storefront&demo-description=Starter%20pack%20for%20building%20performant%20e-commerce%20experiences%20with%20Saleor.&demo-url=https%3A%2F%2Fstorefront.saleor.io%2F&demo-image=https%3A%2F%2Fstorefront-d5h86wzey-saleorcommerce.vercel.app%2Fopengraph-image.png%3F4db0ee8cf66e90af) -[![Storefront Demo](https://img.shields.io/badge/VIEW%20DEMO-DFDFDF?style=for-the-badge)](https://storefront.saleor.io) ![Nextjs Storefront](./public/screenshot.png) @@ -72,6 +71,7 @@ ## Quickstart ### 1. Create Saleor backend instance + To quickly get started with the backend, use a free developer account at [Saleor Cloud](https://cloud.saleor.io/?utm_source=storefront&utm_medium=github). Alternatively you can [run Saleor locally using docker](https://docs.saleor.io/docs/3.x/setup/docker-compose?utm_source=storefront&utm_medium=github). @@ -95,6 +95,7 @@ saleor storefront create --url https://{SALEOR_HOSTNAME}/graphql/ #### [Option 2] Manual install Clone repository: + ```bash git clone https://github.com/saleor/storefront.git ``` @@ -113,7 +114,6 @@ Then, [install `pnpm`](https://pnpm.io/installation) and run the following comma pnpm i ``` - ## Payments Currently, Saleor Storefront supports payments via the [Saleor Adyen App](https://docs.saleor.io/docs/3.x/developer/app-store/apps/adyen). To install and configure the payment app go to the "Apps" section in the Saleor Dashboard (App Store is only available in Saleor Cloud). From 71b55d28d17a8913aacd8f767ff5443685f435e7 Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 14:02:01 +0200 Subject: [PATCH 18/20] Add demo app id --- src/app/api/demo-payment/route.ts | 3 ++- src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx | 3 ++- .../sections/PaymentSection/usePaymentGatewaysInitialize.ts | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts index d8f0e8bac..ab84e80c7 100644 --- a/src/app/api/demo-payment/route.ts +++ b/src/app/api/demo-payment/route.ts @@ -3,10 +3,11 @@ const removeWhiteSpace = (str: string): string => { }; const url = `https://${process.env.VERCEL_BRANCH_URL}`; +export const DEMO_PAYMENT_GATEWAY = `storefront.demo-payment`; export async function GET() { return Response.json({ - id: "storefront.demo-payment", + id: DEMO_PAYMENT_GATEWAY, version: "1.0.0", requiredSaleorVersion: "^3.20", name: "Demo Payment App", diff --git a/src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx b/src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx index a7334767e..7c2efb35f 100644 --- a/src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx +++ b/src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx @@ -7,6 +7,7 @@ import { useCheckoutCompleteMutation, useTransactionInitializeMutation } from "@ import { useCheckout } from "@/checkout/hooks/useCheckout"; import { replaceUrl } from "@/checkout/lib/utils/url"; import { Button } from "@/checkout/components"; +import { DEMO_PAYMENT_GATEWAY } from "@/app/api/demo-payment/route"; export const DemoPayment = () => { const { checkout } = useCheckout(); @@ -23,7 +24,7 @@ export const DemoPayment = () => { await mutation({ checkoutId: checkout.id, paymentGateway: { - id: process.env.NEXT_PUBLIC_PAYMENT_GATEWAY as string, + id: DEMO_PAYMENT_GATEWAY, data: { details: "valid-details", }, diff --git a/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts b/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts index 127304666..58a5c139c 100644 --- a/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts +++ b/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts @@ -4,6 +4,7 @@ import { useCheckout } from "@/checkout/hooks/useCheckout"; import { useSubmit } from "@/checkout/hooks/useSubmit"; import { type MightNotExist } from "@/checkout/lib/globalTypes"; import { type ParsedPaymentGateways } from "@/checkout/sections/PaymentSection/types"; +import { DEMO_PAYMENT_GATEWAY } from "@/app/api/demo-payment/route"; export const usePaymentGatewaysInitialize = () => { const { @@ -30,7 +31,7 @@ export const usePaymentGatewaysInitialize = () => { parse: () => ({ checkoutId, paymentGateways: availablePaymentGateways - .filter((x) => x.id === process.env.NEXT_PUBLIC_PAYMENT_GATEWAY) + .filter((x) => x.id === DEMO_PAYMENT_GATEWAY) .map(({ config, id }) => ({ id, data: config, From 89c99586b46b492439e66b58ceec0ec6f591cb20 Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 14:05:23 +0200 Subject: [PATCH 19/20] Fix export --- src/app/api/demo-payment/route.ts | 3 ++- src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx | 3 ++- .../sections/PaymentSection/usePaymentGatewaysInitialize.ts | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts index ab84e80c7..3ed7c7fb9 100644 --- a/src/app/api/demo-payment/route.ts +++ b/src/app/api/demo-payment/route.ts @@ -1,9 +1,10 @@ +import { DEMO_PAYMENT_GATEWAY } from "@/checkout/sections/PaymentSection/Demo/PaymentOptions"; + const removeWhiteSpace = (str: string): string => { return str.replaceAll(/[\t\n]+/g, " "); }; const url = `https://${process.env.VERCEL_BRANCH_URL}`; -export const DEMO_PAYMENT_GATEWAY = `storefront.demo-payment`; export async function GET() { return Response.json({ diff --git a/src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx b/src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx index 7c2efb35f..f41819c2e 100644 --- a/src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx +++ b/src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx @@ -7,7 +7,8 @@ import { useCheckoutCompleteMutation, useTransactionInitializeMutation } from "@ import { useCheckout } from "@/checkout/hooks/useCheckout"; import { replaceUrl } from "@/checkout/lib/utils/url"; import { Button } from "@/checkout/components"; -import { DEMO_PAYMENT_GATEWAY } from "@/app/api/demo-payment/route"; + +export const DEMO_PAYMENT_GATEWAY = `storefront.demo-payment`; export const DemoPayment = () => { const { checkout } = useCheckout(); diff --git a/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts b/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts index 58a5c139c..41257a5d9 100644 --- a/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts +++ b/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts @@ -4,7 +4,7 @@ import { useCheckout } from "@/checkout/hooks/useCheckout"; import { useSubmit } from "@/checkout/hooks/useSubmit"; import { type MightNotExist } from "@/checkout/lib/globalTypes"; import { type ParsedPaymentGateways } from "@/checkout/sections/PaymentSection/types"; -import { DEMO_PAYMENT_GATEWAY } from "@/app/api/demo-payment/route"; +import { DEMO_PAYMENT_GATEWAY } from "@/checkout/sections/PaymentSection/Demo/PaymentOptions"; export const usePaymentGatewaysInitialize = () => { const { From c2a1c0ddb7794358df4124a0dead9bdff2c4e679 Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 21 Aug 2024 14:08:03 +0200 Subject: [PATCH 20/20] Fix export --- src/app/api/demo-payment/route.ts | 2 +- src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx | 3 +-- src/checkout/sections/PaymentSection/Demo/metadata.ts | 1 + .../sections/PaymentSection/usePaymentGatewaysInitialize.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) create mode 100644 src/checkout/sections/PaymentSection/Demo/metadata.ts diff --git a/src/app/api/demo-payment/route.ts b/src/app/api/demo-payment/route.ts index 3ed7c7fb9..538dfd30b 100644 --- a/src/app/api/demo-payment/route.ts +++ b/src/app/api/demo-payment/route.ts @@ -1,4 +1,4 @@ -import { DEMO_PAYMENT_GATEWAY } from "@/checkout/sections/PaymentSection/Demo/PaymentOptions"; +import { DEMO_PAYMENT_GATEWAY } from "@/checkout/sections/PaymentSection/Demo/metadata"; const removeWhiteSpace = (str: string): string => { return str.replaceAll(/[\t\n]+/g, " "); diff --git a/src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx b/src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx index f41819c2e..5773379e3 100644 --- a/src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx +++ b/src/checkout/sections/PaymentSection/Demo/PaymentOptions.tsx @@ -7,8 +7,7 @@ import { useCheckoutCompleteMutation, useTransactionInitializeMutation } from "@ import { useCheckout } from "@/checkout/hooks/useCheckout"; import { replaceUrl } from "@/checkout/lib/utils/url"; import { Button } from "@/checkout/components"; - -export const DEMO_PAYMENT_GATEWAY = `storefront.demo-payment`; +import { DEMO_PAYMENT_GATEWAY } from "@/checkout/sections/PaymentSection/Demo/metadata"; export const DemoPayment = () => { const { checkout } = useCheckout(); diff --git a/src/checkout/sections/PaymentSection/Demo/metadata.ts b/src/checkout/sections/PaymentSection/Demo/metadata.ts new file mode 100644 index 000000000..24fd1a1f2 --- /dev/null +++ b/src/checkout/sections/PaymentSection/Demo/metadata.ts @@ -0,0 +1 @@ +export const DEMO_PAYMENT_GATEWAY = `storefront.demo-payment`; diff --git a/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts b/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts index 41257a5d9..7b44fe926 100644 --- a/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts +++ b/src/checkout/sections/PaymentSection/usePaymentGatewaysInitialize.ts @@ -4,7 +4,7 @@ import { useCheckout } from "@/checkout/hooks/useCheckout"; import { useSubmit } from "@/checkout/hooks/useSubmit"; import { type MightNotExist } from "@/checkout/lib/globalTypes"; import { type ParsedPaymentGateways } from "@/checkout/sections/PaymentSection/types"; -import { DEMO_PAYMENT_GATEWAY } from "@/checkout/sections/PaymentSection/Demo/PaymentOptions"; +import { DEMO_PAYMENT_GATEWAY } from "@/checkout/sections/PaymentSection/Demo/metadata"; export const usePaymentGatewaysInitialize = () => { const {