Embeddable Components

Payment Embed

Accept payments in your own checkout form with the payment element. Supports credit cards, Apple Pay, Google Pay, and more.

CurrencyPrice

Loading payment methods…

This preview never charges. In your app, your pay button calls createConfirmationToken() to collect the payment.

Installation

$ npm install @whop/elements-react @whop/elements

Usage

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

export default function PaymentForm() {
  return (
    <WhopElements elements={loadWhop()}>
      {/* amount is in minor units: 1000 is $10.00 */}
      <Payments accountId="biz_XXXXXXXXX" currency="usd" amount={1000}>
        <PaymentElement onChange={(event) => console.log(event)} />
        {/* Your pay button calls createConfirmationToken(); confirm the token server-side. */}
        <BrandingElement />
      </Payments>
    </WhopElements>
  );
}