Use example payment method plugin for demo site

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

packages/opencommerce/.env.template

@@ -3,4 +3,3 @@ COMMERCE_PROVIDER=@vercel/commerce-opencommerce
 OPENCOMMERCE_STOREFRONT_API_URL=
 OPENCOMMERCE_PRIMARY_SHOP_ID=
 OPENCOMMERCE_IMAGE_DOMAIN=
-OPENCOMMERCE_STRIPE_API_KEY=

packages/opencommerce/src/api/endpoints/checkout/submit-checkout.ts

@@ -1,16 +1,9 @@
-import Stripe from 'stripe'
-
-import type { CardFields } from '../../../types/customer/card'
 import { LineItem } from '../../../types/cart'
 import placeOrder from '../../mutations/place-order'
 import setEmailOnAnonymousCart from '../../mutations/set-email-on-anonymous-cart'
 import getCartCookie from '../../utils/get-cart-cookie'
 import type { CheckoutEndpoint } from '.'
 
-const stripe = new Stripe(process.env.OPENCOMMERCE_STRIPE_API_KEY as string, {
-  apiVersion: '2020-08-27',
-})
-
 const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
   res,
   body: { item, cartId },
@@ -27,69 +20,45 @@ const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
     },
   })
 
-  const card = item.card as CardFields
+  const { data } = await fetch(placeOrder, {
-
+    variables: {
-  const pm = await stripe.paymentMethods.create({
+      input: {
-    type: 'card',
+        payments: {
-    card: {
+          data: { fullName: 'Open Commerce Demo Site' },
-      number: card.cardNumber,
+          amount: item.checkout.cart.checkout.summary.total.amount,
-      exp_month: Number(card.cardExpireDate.split('/')[0]),
+          method: 'iou_example',
-      exp_year: Number(card.cardExpireDate.split('/')[1]),
+        },
-      cvc: card.cardCvc,
+        order: {
-    },
+          cartId,
-  } as Stripe.PaymentMethodCreateParams)
+          currencyCode: item.checkout.cart.currency.code,
-
+          email: 'opencommerce@test.com',
-  const result = await stripe.paymentIntents.create({
+          shopId,
-    confirm: true,
+          fulfillmentGroups: {
-    amount: Math.round(item.checkout.cart.checkout.summary.total.amount * 100),
-    currency: item.checkout.cart.currency.code,
-    capture_method: 'manual',
-    metadata: {
-      integration_check: 'accept_a_payment',
-    },
-    payment_method: pm.id,
-  })
-
-  if (result.status === 'succeeded' || result.status === 'requires_capture') {
-    const { data } = await fetch(placeOrder, {
-      variables: {
-        input: {
-          payments: {
-            data: { stripePaymentIntentId: result.id },
-            amount: item.checkout.cart.checkout.summary.total.amount,
-            method: 'stripe_payment_intent',
-          },
-          order: {
-            cartId,
-            currencyCode: item.checkout.cart.currency.code,
-            email: 'opencommerce@test.com',
             shopId,
-            fulfillmentGroups: {
+            data: item.checkout.cart.checkout.fulfillmentGroups[0].data,
-              shopId,
+            items: item.checkout.cart.lineItems.map((item: LineItem) => ({
-              data: item.checkout.cart.checkout.fulfillmentGroups[0].data,
+              price: item.variant.price,
-              items: item.checkout.cart.lineItems.map((item: LineItem) => ({
+              quantity: item.quantity,
-                price: item.variant.price,
+              productConfiguration: {
-                quantity: item.quantity,
+                productId: item.productId,
-                productConfiguration: {
+                productVariantId: item.variantId,
-                  productId: item.productId,
+              },
-                  productVariantId: item.variantId,
+            })),
-                },
+            type: item.checkout.cart.checkout.fulfillmentGroups[0].type,
-              })),
+            selectedFulfillmentMethodId:
-              type: item.checkout.cart.checkout.fulfillmentGroups[0].type,
+              item.checkout.cart.checkout.fulfillmentGroups[0]
-              selectedFulfillmentMethodId:
+                .selectedFulfillmentOption.fulfillmentMethod._id,
-                item.checkout.cart.checkout.fulfillmentGroups[0]
-                  .selectedFulfillmentOption.fulfillmentMethod._id,
-            },
           },
         },
       },
-    })
+    },
+  })
+
+  res.setHeader('Set-Cookie', [
+    getCartCookie(cartCookie),
+    getCartCookie(anonymousCartTokenCookie),
+  ])
 
-    res.setHeader('Set-Cookie', [
-      getCartCookie(cartCookie),
-      getCartCookie(anonymousCartTokenCookie),
-    ])
-  }
   res.status(200).json({ data: null, errors: [] })
 }
 

site/.env.template

@@ -53,7 +53,6 @@ NEXT_PUBLIC_COMMERCEJS_DEPLOYMENT_URL=
 OPENCOMMERCE_STOREFRONT_API_URL=
 OPENCOMMERCE_PRIMARY_SHOP_ID=
 OPENCOMMERCE_IMAGE_DOMAIN=
-OPENCOMMERCE_STRIPE_API_KEY=
 
 SFCC_CLIENT_ID=
 SFCC_CLIENT_SECRET=

site/components/checkout/PaymentMethodView/PaymentMethodView.tsx

@@ -68,7 +68,6 @@ const PaymentMethodView: FC = () => {
                   name="cardNumber"
                   className={s.input}
                   defaultValue={cardFields.cardNumber}
-                  required
                 />
               </div>
               <div className={cn(s.fieldset, 'col-span-3')}>
@@ -78,7 +77,6 @@ const PaymentMethodView: FC = () => {
                   className={s.input}
                   placeholder="MM/YY"
                   defaultValue={cardFields.cardExpireDate}
-                  required
                 />
               </div>
               <div className={cn(s.fieldset, 'col-span-2')}>
@@ -87,7 +85,6 @@ const PaymentMethodView: FC = () => {
                   name="cardCvc"
                   className={s.input}
                   defaultValue={cardFields.cardCvc}
-                  required
                 />
               </div>
             </div>