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>
  }
}