Skip to content

Commit

Permalink
feat: Create checkout.com components
Browse files Browse the repository at this point in the history
  • Loading branch information
@acasazza
acasazza committed Feb 23, 2022
1 parent da0f7bd commit dd54cf6
Show file tree
Hide file tree
Showing 6 changed files with 331 additions and 125 deletions.
250 changes: 125 additions & 125 deletions pages/checkout/payments.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useState, useEffect, Fragment } from 'react'
import { getCustomerToken } from '@commercelayer/js-auth'
import { Nav } from '.'
import Head from 'next/head'
import {
CommerceLayer,
Expand Down Expand Up @@ -106,128 +105,128 @@ export default function Main() {
<Head>
<script src="http://localhost:8097"></script>
</Head>
<Nav links={['/multiOrder', '/multiApp', '/giftCard']} />
<CommerceLayer accessToken={token} endpoint={endpoint}>
<div className="container mx-auto mt-5 px-5">
<OrderContainer orderId={orderId}>
<PaymentMethodsContainer
config={{
stripePayment: {
// fonts: [
// {
// cssSrc:
// 'https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,100;1,100&display=swap',
// },
// ],
options: {
// style: {
// base: {
// color: '#000',
// fontWeight: '400',
// fontFamily: 'Josefin Slab',
// ':-webkit-autofill': {
// color: '#fce883',
// },
// '::placeholder': {
// color: '#e0e0e0',
// },
<React.StrictMode>
<CommerceLayer accessToken={token} endpoint={endpoint}>
<div className="container mx-auto mt-5 px-5">
<OrderContainer orderId={orderId}>
<PaymentMethodsContainer
config={{
stripePayment: {
// fonts: [
// {
// cssSrc:
// 'https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,100;1,100&display=swap',
// },
// invalid: {
// iconColor: '#FFC7EE',
// color: '#FFC7EE',
// },
// },
hideIcon: false,
hidePostalCode: true,
// ],
options: {
// style: {
// base: {
// color: '#000',
// fontWeight: '400',
// fontFamily: 'Josefin Slab',
// ':-webkit-autofill': {
// color: '#fce883',
// },
// '::placeholder': {
// color: '#e0e0e0',
// },
// },
// invalid: {
// iconColor: '#FFC7EE',
// color: '#FFC7EE',
// },
// },
hideIcon: false,
hidePostalCode: true,
},
containerClassName: 'w-1/2 px-3',
},
paypalPayment: {
cancel_url: paypalReturnUrl,
return_url: paypalReturnUrl,
},
containerClassName: 'w-1/2 px-3',
},
paypalPayment: {
cancel_url: paypalReturnUrl,
return_url: paypalReturnUrl,
},
}}
>
<PlaceOrderContainer options={{ paypalPayerId }}>
<PaymentMethod
className="p-2 my-1 flex items-center justify-items-center bg-gray-300 cursor-pointer"
activeClass="bg-opacity-25"
clickableContainer
>
<PaymentMethodRadioButton data-cy="payment-radio-button" />
<PaymentMethodName className="pl-3" />
<PaymentMethodPrice className="pl-3" />
<PaymentSource
data-cy="payment-source"
className="p-5 my-2"
loader={'Caricamento...'}
}}
>
<PlaceOrderContainer options={{ paypalPayerId }}>
<PaymentMethod
className="p-2 my-1 flex items-center justify-items-center bg-gray-300 cursor-pointer"
activeClass="bg-opacity-25"
clickableContainer
>
<div className="flex flex-row items-center justify-start bg-gray-100 p-5 my-10">
<div className="flex flex-row items-center">
<PaymentSourceBrandIcon className="mr-3" />
<PaymentSourceBrandName
className="mr-1"
data-cy="payment-brand-name-card"
/>
ending in
<PaymentSourceDetail
data-cy="payment-last4"
className="ml-1"
type="last4"
/>
</div>
<div className="text-gray-500 ml-5">
<PaymentSourceDetail
data-cy="payment-exp-month"
type="expMonth"
/>
<PaymentSourceDetail
data-cy="payment-exp-year"
type="expYear"
/>
</div>
<div className="ml-5">
<PaymentSourceEditButton
data-cy="payment-edit-button"
className="text-blue-500 hover:underline hover:text-blue-600"
/>
<PaymentMethodRadioButton data-cy="payment-radio-button" />
<PaymentMethodName className="pl-3" />
<PaymentMethodPrice className="pl-3" />
<PaymentSource
data-cy="payment-source"
className="p-5 my-2"
loader={'Caricamento...'}
>
<div className="flex flex-row items-center justify-start bg-gray-100 p-5 my-10">
<div className="flex flex-row items-center">
<PaymentSourceBrandIcon className="mr-3" />
<PaymentSourceBrandName
className="mr-1"
data-cy="payment-brand-name-card"
/>
ending in
<PaymentSourceDetail
data-cy="payment-last4"
className="ml-1"
type="last4"
/>
</div>
<div className="text-gray-500 ml-5">
<PaymentSourceDetail
data-cy="payment-exp-month"
type="exp_month"
/>
<PaymentSourceDetail
data-cy="payment-exp-year"
type="exp_year"
/>
</div>
<div className="ml-5">
<PaymentSourceEditButton
data-cy="payment-edit-button"
className="text-blue-500 hover:underline hover:text-blue-600"
/>
</div>
</div>
</div>
</PaymentSource>
<Errors
className="text-red-600 block"
resource="payment_methods"
/>
</PaymentMethod>
</PaymentSource>
<Errors
className="text-red-600 block"
resource="payment_methods"
/>
</PaymentMethod>

<div className="flex flex-row-reverse justify-end">
<label
htmlFor="privacy-terms"
className="block text-sm font-medium text-gray-700 ml-3 self-end"
>
Accept privacy and terms
</label>
<div className="mt-1">
<PrivacyAndTermsCheckbox
id="privacy-terms"
className="h-4 w-4 text-blue-500 focus:ring-blue-400 border-gray-300 rounded disabled:opacity-50"
<div className="flex flex-row-reverse justify-end">
<label
htmlFor="privacy-terms"
className="block text-sm font-medium text-gray-700 ml-3 self-end"
>
Accept privacy and terms
</label>
<div className="mt-1">
<PrivacyAndTermsCheckbox
id="privacy-terms"
className="h-4 w-4 text-blue-500 focus:ring-blue-400 border-gray-300 rounded disabled:opacity-50"
/>
</div>
</div>
<div>
<PlaceOrderButton
onClick={(res: any) => {
console.log('res', res)
}}
className="mt-5 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50"
/>
</div>
</div>
<div>
<PlaceOrderButton
onClick={(res: any) => {
console.log('res', res)
}}
className="mt-5 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50"
/>
</div>
</PlaceOrderContainer>
</PaymentMethodsContainer>
<div className="flex flex-col text-red-600 mt-5">
<Errors resource="orders" messages={messages} />
</div>
{/* <PaymentMethodsContainer>
</PlaceOrderContainer>
</PaymentMethodsContainer>
<div className="flex flex-col text-red-600 mt-5">
<Errors resource="orders" messages={messages} />
</div>
{/* <PaymentMethodsContainer>
<PaymentSource readonly>
<div className="flex flex-row items-center bg-gray-100 p-5 my-10 w-full">
<div className="flex flex-row items-center w-full">
Expand All @@ -246,16 +245,17 @@ export default function Main() {
</div>
</PaymentSource>
</PaymentMethodsContainer> */}
</OrderContainer>
<div className="mt-5">
<pre data-cy="current-shipping-method">{`Current payment source options: ${JSON.stringify(
paymentSource,
null,
2
)}`}</pre>
</OrderContainer>
<div className="mt-5">
<pre data-cy="current-shipping-method">{`Current payment source options: ${JSON.stringify(
paymentSource,
null,
2
)}`}</pre>
</div>
</div>
</div>
</CommerceLayer>
</CommerceLayer>
</React.StrictMode>
</Fragment>
)
}
81 changes: 81 additions & 0 deletions src/components/CheckoutComPayment.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import React, {
FunctionComponent,
// SyntheticEvent,
// useContext,
useEffect,
// useRef,
// useState,
} from 'react'
// import PaymentMethodContext from '#context/PaymentMethodContext'
import { PaymentMethodConfig } from '#reducers/PaymentMethodReducer'
import { PaymentSourceProps } from './PaymentSource'
import useExternalScript from '#utils/hooks/useExternalScript'
const scriptUrl = 'https://cdn.checkout.com/js/framesv2.min.js'
// import Parent from './utils/Parent'
// import OrderContext from '#context/OrderContext'
// import { setCustomerOrderParam } from '#utils/localStorage'

export type CheckoutComConfig = {
containerClassName?: string
hintLabel?: string
name?: string
// options?: StripeCardElementOptions
[key: string]: unknown
}

// type StripePaymentFormProps = {
// options?: StripeCardElementOptions
// templateCustomerSaveToWallet?: PaymentSourceProps['templateCustomerSaveToWallet']
// }

// const defaultOptions = {
// style: {
// base: {
// fontSize: '16px',
// color: '#424770',
// '::placeholder': {
// color: '#aab7c4',
// },
// },
// invalid: {
// color: '#9e2146',
// },
// },
// hidePostalCode: true,
// }

type CheckoutComPaymentProps = PaymentMethodConfig['checkoutComPayment'] &
JSX.IntrinsicElements['div'] &
Partial<PaymentSourceProps['templateCustomerSaveToWallet']> & {
show?: boolean
publicKey: string
locale?: string
}

const CheckoutComPayment: FunctionComponent<CheckoutComPaymentProps> = ({
publicKey,
show,
options,
locale = 'auto',
...p
}) => {
const loaded = useExternalScript(scriptUrl)
const {
containerClassName,
// templateCustomerSaveToWallet,
// fonts = [],
...divProps
} = p
useEffect(() => {
// @ts-ignore
if (loaded && publicKey) window.Frames.init(publicKey)
}, [loaded, publicKey])

return loaded ? (
<div className={containerClassName} {...divProps}>
<div className="card-frame"></div>
</div>
) : null
}

export default CheckoutComPayment
5 changes: 5 additions & 0 deletions src/components/PaymentGateway.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import BraintreeGateway from './gateways/BraintreeGateway'
import PaypalGateway from './gateways/PaypalGateway'
import WireTransferGateway from './gateways/WireTransferGateway'
import CustomerContext from '#context/CustomerContext'
import CheckoutComGateway from './gateways/CheckoutComGateway'

export type GatewayBaseType = PaymentGatewayProps & {
show: boolean
Expand Down Expand Up @@ -109,6 +110,10 @@ const PaymentGateway: FunctionComponent<PaymentGatewayProps> = ({
)
case 'paypal_payments':
return <PaypalGateway {...gatewayConfig}>{children}</PaypalGateway>
case 'checkout_com_payments':
return (
<CheckoutComGateway {...gatewayConfig}>{children}</CheckoutComGateway>
)
default:
return null
}
Expand Down
Loading

0 comments on commit dd54cf6

Please sign in to comment.