docs: update checkout payment methods section

commercelayer · Nov 2, 2023 · 8b7c5bb · 8b7c5bb
1 parent 2ccb160
commit 8b7c5bb
Showing 1 changed file with 37 additions and 35 deletions.
diff --git a/packages/docs/stories/examples/checkout/004.payment.stories.tsx b/packages/docs/stories/examples/checkout/004.payment.stories.tsx
@@ -42,51 +42,44 @@ export const PaymentMethods: StoryFn = () => {
           }}
         >
           {isPlaced ? (
-            <div className='p-8 bg-green-600 rounded text-white text-2xl'>
-              <p>Thank you!</p>
-              <p>Your order has been successfully placed</p>
-            </div>
+            <SampleThankYouPage />
           ) : (
             <>
               <PaymentMethodsContainer
-                config={
-                  {
-                    // stripePayment: {
-                    //   options: {
-                    //     // hideIcon: false,
-                    //     // hidePostalCode: true
-                    //   },
-                    //   containerClassName: 'w-1/2 px-3'
-                    // },
-                    // paypalPayment: {
-                    //   cancel_url: 'paypalReturnUrl',
-                    //   return_url: 'paypalReturnUrl'
-                    // },
-                    // adyenPayment: {
-                    //   placeOrderCallback: (res: any) => {
-                    //     if (res.placed) setPlaced(true)
-                    //   }
-                    // }
+                config={{
+                  stripePayment: {
+                    appearance: {},
+                    containerClassName: 'flex-1 pl-4',
+                    options: {}
+                  },
+                  adyenPayment: {
+                    placeOrderCallback: (data) => {
+                      if (data.placed) {
+                        setIsPlaced(true)
+                      }
+                    }
                   }
-                }
+                }}
               >
                 <PlaceOrderContainer
-                // options={{
-                //    checkoutCom: { session_id: checkoutComSession },
-                //   adyen: {
-                //     redirectResult
-                //   }
-                // }}
+                  // optional configuration
+                  options={
+                    {
+                      // paypalPayerId: 'string',
+                      // adyen: {},
+                      // stripe: {}
+                    }
+                  }
                 >
                   <PaymentMethod
-                    // hide={['stripe_payments', 'adyen_payments', 'klarna_payments']}
-                    className='p-4 mb-4 flex items-center justify-items-center bg-gray-200 cursor-pointer'
-                    activeClass='border border-green-500'
+                    hide={['klarna_payments']} // optional array of payment sources to hide
+                    className='p-4 mb-4 flex items-center justify-items-center border-2 rounded-md cursor-pointer hover:bg-gray-100'
+                    activeClass='border-green-500'
                     clickableContainer
                   >
-                    <PaymentMethodRadioButton />
-                    <PaymentMethodName className='pl-3' />
-                    <PaymentMethodPrice className='pl-3' />
+                    <PaymentMethodRadioButton className='cursor-pointer' />
+                    <PaymentMethodName className='block pl-3' />
+                    <PaymentMethodPrice className='block pl-3' />
                     <PaymentSource className='p-5 my-2'>
                       <div className='flex flex-row items-center justify-start bg-gray-100 p-5 my-10'>
                         <div className='flex flex-row items-center'>
@@ -142,3 +135,12 @@ export const PaymentMethods: StoryFn = () => {
     </CommerceLayer>
   )
 }
+
+const SampleThankYouPage: React.FC = () => {
+  return (
+    <div className='p-8 bg-green-600 rounded text-white text-2xl'>
+      <p>Thank you!</p>
+      <p>Your order has been successfully placed</p>
+    </div>
+  )
+}