feat: add gateway-neutral payment package

packages/payment/components/PayNow.wrn

@@ -0,0 +1,8 @@
+component PayNow {
+  props { checkoutUrl: string label?: string = "Pay now" disabled?: boolean = false }
+  view {
+    <a class="wrn-payment-button" href={checkoutUrl} aria-disabled={disabled}>
+      {label}
+    </a>
+  }
+}

packages/payment/components/PaymentHistory.wrn

@@ -0,0 +1,4 @@
+component PaymentHistory {
+  props { payments: array = [] }
+  view { <ol class="wrn-payment-history">{#each payments as payment}<li>{payment.currency} {payment.amount} — {payment.status}</li>{/each}</ol> }
+}

packages/payment/components/PaymentMethodList.wrn

@@ -0,0 +1,4 @@
+component PaymentMethodList {
+  props { methods: array = [] }
+  view { <ul class="wrn-payment-methods">{#each methods as method}<li>{method.brand} ending {method.last4}</li>{/each}</ul> }
+}

packages/payment/components/PaymentSheet.wrn

@@ -0,0 +1,4 @@
+component PaymentSheet {
+  props { checkoutUrl: string gateway: string }
+  view { <section class="wrn-payment-sheet" data-gateway={gateway}><p>Secure payment is completed on the payment provider.</p><a href={checkoutUrl}>Continue securely</a></section> }
+}

packages/payment/components/PaymentStatus.wrn

@@ -0,0 +1,4 @@
+component PaymentStatus {
+  props { status: string label?: string = "Payment status" }
+  view { <div class="wrn-payment-status" role="status"><strong>{label}</strong><span>{status}</span></div> }
+}

packages/payment/components/PaymentSummary.wrn

@@ -0,0 +1,4 @@
+component PaymentSummary {
+  props { captured: number = 0 refunded: number = 0 net: number = 0 currency: string }
+  view { <dl><dt>Captured</dt><dd>{currency} {captured}</dd><dt>Refunded</dt><dd>{currency} {refunded}</dd><dt>Net</dt><dd>{currency} {net}</dd></dl> }
+}

packages/payment/components/RefundButton.wrn

@@ -0,0 +1,4 @@
+component RefundButton {
+  props { paymentId: string refundable: number partial?: boolean = false action?: string = "/api/payments/refund" }
+  view { <form method="post" action={action}><input type="hidden" name="paymentId" value={paymentId} /><label>Reason<input name="reason" required /></label>{#if partial}<label>Amount<input name="amount" type="number" min="1" max={refundable} /></label>{/if}<button type="submit">Refund</button></form> }
+}