feat(payment): expose secure APIs and themed pages

packages/payment/components/PaymentDetailsPage.wrn

@@ -0,0 +1,22 @@
+import PaymentStatus from "./PaymentStatus.wrn"
+component PaymentDetailsPage {
+  props {
+    payment: object
+    title?: string = "Payment details"
+    amountLabel?: string = "Amount"
+    providerLabel?: string = "Provider"
+    referenceLabel?: string = "Reference"
+    createdLabel?: string = "Created"
+  }
+  view {
+    <section class="wrn-payment-page">
+      <header class="wrn-payment-page__header"><div><span class="wrn-payment-page__eyebrow">{title}</span><h1>{title}</h1></div><PaymentStatus status={payment.status} /></header>
+      <dl class="wrn-payment-details">
+        <div><dt>{amountLabel}</dt><dd>{payment.currency} {payment.amount}</dd></div>
+        <div><dt>{providerLabel}</dt><dd>{payment.gateway}</dd></div>
+        <div><dt>{referenceLabel}</dt><dd>{payment.id}</dd></div>
+        <div><dt>{createdLabel}</dt><dd>{payment.createdAt}</dd></div>
+      </dl>
+    </section>
+  }
+}