feat: compose payment methods

primer-io · Nov 17, 2023 · c7850ac · c7850ac
1 parent 68d6590
commit c7850ac
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 94 deletions.
diff --git a/server/src/components/Payment/Klarna.astro b/server/src/components/Payment/Klarna.astro
@@ -0,0 +1,20 @@
+---
+import PaymentButton from '../Payment/PaymentButton.astro';
+type Props = astroHTML.JSX.IntrinsicElements['button'];
+---
+
+<PaymentButton class="klarna" />
+
+<style lang="scss">
+  .klarna {
+    background-color: hsl(344, 100%, 85%);
+
+    &:hover {
+      background-color: hsl(344, 94%, 87%);
+    }
+
+    &:active {
+      background-color: hsl(344, 90%, 90%);
+    }
+  }
+</style>
diff --git a/server/src/components/Payment/PayPal.astro b/server/src/components/Payment/PayPal.astro
@@ -0,0 +1,20 @@
+---
+import PaymentButton from './PaymentButton.astro';
+type Props = astroHTML.JSX.IntrinsicElements['button'];
+---
+
+<PaymentButton class="paypal" />
+
+<style lang="scss">
+  .paypal {
+    background-color: hsl(42 100% 61%);
+
+    &:hover {
+      background-color: hsl(42 100% 50%);
+    }
+
+    &:active {
+      background-color: hsl(42 100% 40%);
+    }
+  }
+</style>
diff --git a/server/src/components/Payment/PaymentButton.astro b/server/src/components/Payment/PaymentButton.astro
@@ -0,0 +1,26 @@
+---
+type Props = astroHTML.JSX.IntrinsicElements['button'];
+---
+
+<button {...Astro.props}>Pay</button>
+
+<style lang="scss">
+  button {
+    background-color: hsl(0, 0%, 90%);
+    border: 0;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    height: 48px;
+    padding: 16px;
+    transition: background-color 0.15s;
+
+    &:hover {
+      background-color: hsl(0, 0%, 85%);
+    }
+
+    &:active {
+      background-color: hsl(0, 0%, 80%);
+    }
+  }
+</style>
diff --git a/server/src/components/Payment/PaymentMethod.astro b/server/src/components/Payment/PaymentMethod.astro
@@ -0,0 +1,72 @@
+---
+type Props = astroHTML.JSX.IntrinsicElements['details'] & {
+  label: string;
+  logo: string;
+};
+
+const { children, label, logo, ...props } = Astro.props;
+---
+
+<details {...props}>
+  <summary>
+    <img src={logo} />
+    {label}
+  </summary>
+  <div>
+    <slot />
+  </div>
+</details>
+
+<style lang="scss">
+  details {
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    display: flex;
+    overflow: hidden;
+    place-content: center;
+    place-items: center;
+  }
+
+  summary {
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    gap: 12px;
+    height: 48px;
+    padding: 16px;
+    place-items: center;
+    transition: background-color 0.15s;
+
+    &:hover {
+      background-color: hsl(0 0% 90%);
+    }
+
+    &:active {
+      background-color: hsl(0 0% 80%);
+    }
+
+    &:before {
+      content: '';
+      border: 1px solid #757575;
+      border-radius: 100vw;
+      padding: 4px;
+      height: 20px;
+      width: 20px;
+
+      [open] > & {
+        background: radial-gradient(#212121 50%, transparent 55%);
+      }
+    }
+  }
+
+  img {
+    aspect-ratio: 2/1;
+    width: 56px;
+  }
+
+  div {
+    box-sizing: border-box;
+    display: grid;
+    padding: 16px;
+  }
+</style>
diff --git a/server/src/pages/index.astro b/server/src/pages/index.astro
@@ -1,37 +1,38 @@
 ---
+import Klarna from '../components/Payment/Klarna.astro';
+import PayPal from '../components/Payment/PayPal.astro';
+import PaymentMethod from '../components/Payment/PaymentMethod.astro';
 import Layout from '../layouts/Layout.astro';
 
 const { url } = Astro;
-const src = 'https://goat-assets.production.core.primer.io';
+const goatSrc = 'https://goat-assets.production.core.primer.io';
 ---
 
 <Layout title="Primer store">
   <main>
     <article>
-      <details>
-        <summary>
-          <img src={`${src}/brand/logo/paypal/default.svg`} />
-          PayPal
-        </summary>
-        <div>
-          <button>Pay</button>
-        </div>
-      </details>
-
-      <details>
-        <summary>
-          <img
-            src={`${src}/icon/credit-card/medium.svg`}
-            style={{ padding: '0 16px' }}
-          />
-          Pay with card
-        </summary>
-        <div>
-          <iframe
-            src={['/secure/card', url.searchParams].filter(Boolean).join('?')}
-          ></iframe>
-        </div>
-      </details>
+      <PaymentMethod
+        label="PayPal"
+        logo={`${goatSrc}/brand/logo/paypal/default.svg`}
+      >
+        <PayPal />
+      </PaymentMethod>
+
+      <PaymentMethod
+        label="Klarna"
+        logo={`${goatSrc}/brand/logo/klarna/default.svg`}
+      >
+        <Klarna />
+      </PaymentMethod>
+
+      <PaymentMethod
+        label="Pay with card"
+        logo={`${goatSrc}/icon/credit-card/medium.svg`}
+      >
+        <iframe
+          src={['/secure/card', url.searchParams].filter(Boolean).join('?')}
+        ></iframe>
+      </PaymentMethod>
     </article>
   </main>
 </Layout>
@@ -52,77 +53,11 @@ const src = 'https://goat-assets.production.core.primer.io';
     min-width: 400px;
   }
 
-  details {
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    display: flex;
-    overflow: hidden;
-    place-content: center;
-    place-items: center;
-  }
-
-  summary {
-    box-sizing: border-box;
-    cursor: pointer;
-    display: flex;
-    gap: 12px;
-    height: 48px;
-    padding: 16px;
-    place-items: center;
-    transition: background-color 0.15s;
-
-    &:hover {
-      background-color: hsl(0 0% 90%);
-    }
-
-    &:active {
-      background-color: hsl(0 0% 80%);
-    }
-
-    &:before {
-      content: '';
-      border: 1px solid #757575;
-      border-radius: 100vw;
-      padding: 4px;
-      height: 20px;
-      width: 20px;
-
-      [open] > & {
-        background: radial-gradient(#212121 50%, transparent 55%);
-      }
-    }
-  }
-
-  div {
-    box-sizing: border-box;
-    display: grid;
-    padding: 16px;
-  }
-
   iframe {
     border: 0;
     height: 400px;
     width: 100%;
   }
-
-  button {
-    background-color: hsl(42 100% 61%);
-    border: 0;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 16px;
-    height: 48px;
-    padding: 16px;
-    transition: background-color 0.15s;
-
-    &:hover {
-      background-color: hsl(42 100% 50%);
-    }
-
-    &:active {
-      background-color: hsl(42 100% 40%);
-    }
-  }
 </style>
 
 <script>

diff --git a/server/src/pages/secure/input.astro b/server/src/pages/secure/input.astro
@@ -2,9 +2,9 @@
 import SecureInput from '../../components/SecureInput.astro';
 import Layout from '../../layouts/Layout.astro';
 
-const searchParams = Object.fromEntries(Astro.url.searchParams);
+const props = Object.fromEntries(Astro.url.searchParams);
 ---
 
 <Layout title="Primer secure input">
-  <SecureInput {...searchParams} />
+  <SecureInput {...props} />
 </Layout>
diff --git a/server/src/pages/secure/payment.astro b/server/src/pages/secure/payment.astro
@@ -24,6 +24,7 @@ const clientSession = createClientSession({
   amount: 100,
   currencyCode: 'GBP',
 });
+
 const paymentMethodToken = clientSession.then(async ({ clientToken }) => {
   const accessToken = parseAccessToken(clientToken);
   const paymentMethodToken = await createPaymentMethodToken(accessToken, {
@@ -35,8 +36,9 @@ const paymentMethodToken = clientSession.then(async ({ clientToken }) => {
   });
   return { accessToken, paymentMethodToken };
 });
+
 const payment = paymentMethodToken.then(({ accessToken, paymentMethodToken }) =>
-  createPayment(accessToken, paymentMethodToken)
+  createPayment(accessToken, paymentMethodToken),
 );
 ---