## PaymentRequestButtonElement

Use the `PaymentRequestButtonElement` from `@stripe/react-stripe-js` to display Apple Pay, Google Pay,
Link, and browser-based payment request buttons powered by the Payment Request API.

### Props

- `id` (string)
  Sets the DOM `id` attribute on the rendered Element container. Use this to
target the Element for styling or testing.

- `className` (string)
  Applies custom CSS classes to the Element container.

- `options` (object) **required**
  Options for creating a `paymentRequestButton` element.

  - `classes` (object)
    Set custom class names on the container DOM element when the Stripe element is in a particular state.

    - `base` (string)
      The base class applied to the container.
Defaults to `StripeElement`.

    - `complete` (string)
      The class name to apply when the `Element` is complete.
Defaults to `StripeElement--complete`.

    - `empty` (string)
      The class name to apply when the `Element` is empty.
Defaults to `StripeElement--empty`.

    - `focus` (string)
      The class name to apply when the `Element` is focused.
Defaults to `StripeElement--focus`.

    - `invalid` (string)
      The class name to apply when the `Element` is invalid.
Defaults to `StripeElement--invalid`.

    - `webkitAutofill` (string)
      The class name to apply when the `Element` has its value autofilled by the browser (only on Chrome and Safari).
Defaults to `StripeElement--webkit-autofill`.

  - `style` (object)
    An object used to customize the appearance of the Payment Request Button.
The object must have a single `paymentRequestButton` field, containing any of the following sub-fields:

    - `type` (string)
      Preferred button type to display. Available types, by wallet:


Browser card: `default`, `book`, `buy`, or `donate`.

Google Pay: `default`, `buy`, or `donate`.

Apple Pay: `default`, `book`, `buy`, `donate`, `check-out`, `subscribe`, `reload`, `add-money`, `top-up`, `order`, `rent`, `support`, `contribute`, `tip`


When a wallet does not support the provided value, `default` is used as a fallback.

    - `theme` (string)
      One of `dark`, `light`, or `light-outline`.
The default is `dark`.

    - `height` (string)
      The height of the Payment Request Button. Accepts `px` unit values.

  - `paymentRequest` (PaymentRequest) **required**
    A [PaymentRequest](/js/payment_request.md) object used to configure the element.

- `onClick` (function)
  Callback called when the customer clicks the Element.
Receives the [click event payload](/js/element/events/on_click?type=expressCheckoutElement.md#element_on_click-handler).

- `onReady` (function)
  Callback called once the Element is fully rendered.
Recieves the [ready event payload](/js/element/events/on_ready.md#element_on_ready-handler).

- `onBlur` (function)
  Callback called when the Element loses focus.

- `onFocus` (function)
  Callback called when the Element receives focus.

### Render PaymentRequestButtonElement

```JSX
import React, {useMemo} from 'react';
import {Elements, PaymentRequestButtonElement, useStripe} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

const stripePromise = loadStripe('{TEST_PUBLISHABLE_KEY}');

const PaymentRequestButton = () => {
  const stripe = useStripe();
  const paymentRequest = useMemo(() => {
    if (!stripe) {
      return null;
    }

    return stripe.paymentRequest({
      country: 'US',
      currency: 'usd',
      total: {
        label: 'Total',
        amount: 1099,
      },
    });
  }, [stripe]);

  if (!paymentRequest) {
    return null;
  }

  return (
    <PaymentRequestButtonElement
      options={{paymentRequest}}
      onClick={(event) => {
        // Inspect event.paymentRequest for custom analytics or validation.
      }}
    />
  );
};

export const App = ({clientSecret}) => (
  <Elements stripe={stripePromise} options={{clientSecret}}>
    <PaymentRequestButton />
  </Elements>
);
```