EmailElement

import { WhopElements, Payments, EmailElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Payments /* options */>
        <EmailElement onChange={(e) => console.log(e)} />
      </Payments>
    </WhopElements>
  );
}

import { EmailElement, Payments } from '@whop/elements-react-native';

export function ContactStep() {
  return (
    <Payments accountId="biz_xxxxxxxx" plan="plan_xxxxxxxx">
      <EmailElement onChange={({ email, complete }) => console.log(email, complete)} />
    </Payments>
  );
}

<script src="https://js.whop.cloud/elements/amber/elements.js" data-whop-elements></script>
<script type="module">
  const payments = window.WhopElements().payments.create({ /* options */ });
  payments.create('email', { onChange: (e) => console.log(e) }).mount('#payments-email');
</script>

import Elements
import SwiftUI

// .whopElements(environment:) runs once at the app root. See Getting started.
struct CheckoutScreen: View {
    @State private var email = ""

    var body: some View {
        WhopPayments(accountID: "biz_xxxx", charge: .plan(id: "plan_xxxx")) { payments in
            ScrollView {
                VStack(alignment: .leading, spacing: 20) {
                WhopEmailElement(email: $email)
                    WhopBrandingElement()
                }
                .padding()
            }
        }
    }
}