feat(payment): expose secure APIs and themed pages

packages/payment/components/PaymentCheckoutPage.wrn

@@ -0,0 +1,16 @@
+import PaymentSheet from "./PaymentSheet.wrn"
+component PaymentCheckoutPage {
+  props {
+    checkoutUrl: string
+    gateway: string
+    title?: string = "Secure checkout"
+    description?: string = "Complete payment through the selected secure provider."
+    securityLabel?: string = "Your payment credentials are handled by the payment provider."
+  }
+  view {
+    <section class="wrn-payment-page wrn-payment-checkout-page">
+      <header class="wrn-payment-page__header"><div><span class="wrn-payment-page__eyebrow">{gateway}</span><h1>{title}</h1><p>{description}</p></div></header>
+      <div class="wrn-payment-panel"><PaymentSheet checkoutUrl={checkoutUrl} gateway={gateway} /><p class="wrn-payment-security">{securityLabel}</p></div>
+    </section>
+  }
+}