PaymentElement

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

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

import { useRef, useState } from 'react';
import { Button, ScrollView } from 'react-native';
import { EmailElement, PaymentElement, Payments, type PaymentsHandle } from '@whop/elements-react-native';

export function PaymentStep() {
  const payments = useRef<PaymentsHandle | null>(null);
  const [ready, setReady] = useState(false);

  return (
    <Payments
      ref={payments}
      accountId="biz_xxxxxxxx"
      plan="plan_xxxxxxxx"
      applePayMerchantId="merchant.com.example"
      returnUrl="https://example.com/checkout/return"
    >
      <ScrollView>
        <EmailElement />
        <PaymentElement onChange={(p) => setReady(p.complete)} />
      </ScrollView>
      <Button
        title="Pay"
        disabled={!ready}
        onPress={async () => {
          const token = await payments.current!.createConfirmationToken();
          console.log(token.confirmationToken, token.type);
        }}
      />
    </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('payment', {
    onChange: (e) => console.log(e),
    onAddressChange: (e) => console.log(e)
  }).mount('#payments-payment');
</script>