CardFields

import { WhopElements, Payments, CardFields, CardNumberElement, CardExpiryElement, CardCvcElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Payments /* options */>
        <CardFields>
          <CardNumberElement />
          <CardExpiryElement />
          <CardCvcElement />
        </CardFields>
      </Payments>
    </WhopElements>
  );
}

import { View } from 'react-native';
import {
  CardCvcElement,
  CardExpiryElement,
  CardFields,
  CardNumberElement,
  Payments,
} from '@whop/elements-react-native';

export function CardForm() {
  return (
    <Payments accountId="biz_xxxxxxxx" plan="plan_xxxxxxxx">
      <CardFields onChange={({ complete }) => console.log(complete)}>
        <CardNumberElement />
        <View style={{ flexDirection: 'row', gap: 8 }}>
          <CardExpiryElement style={{ flex: 1 }} />
          <CardCvcElement style={{ flex: 1 }} />
        </View>
      </CardFields>
    </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 */ });
  const cardFields = payments.create('cardFields', { /* options */ });
  cardFields.create('cardNumber').mount('#payments-cardFields-cardNumber');
  cardFields.create('cardExpiry').mount('#payments-cardFields-cardExpiry');
  cardFields.create('cardCvc').mount('#payments-cardFields-cardCvc');
</script>