feat(payment): expose secure APIs and themed pages

packages/payment/components/PaymentOverviewPage.wrn

@@ -0,0 +1,21 @@
+import PaymentHistory from "./PaymentHistory.wrn"
+import PaymentSummary from "./PaymentSummary.wrn"
+component PaymentOverviewPage {
+  props {
+    payments: array = []
+    captured: number = 0
+    refunded: number = 0
+    net: number = 0
+    currency: string = "USD"
+    title?: string = "Payments"
+    description?: string = "Review payment activity, statuses, and totals."
+    emptyLabel?: string = "No payments yet."
+  }
+  view {
+    <section class="wrn-payment-page">
+      <header class="wrn-payment-page__header"><div><span class="wrn-payment-page__eyebrow">{title}</span><h1>{title}</h1><p>{description}</p></div></header>
+      <PaymentSummary captured={captured} refunded={refunded} net={net} currency={currency} />
+      <div class="wrn-payment-panel"><h2>{title}</h2>{#if payments.length}<PaymentHistory payments={payments} />{:else}<div class="wrn-payment-empty">{emptyLabel}</div>{/if}</div>
+    </section>
+  }
+}