ReactJS: Stripe Google and Apple Pay

Question

I am using @stripe/react-stripe-js in my ReactJS app.

My Payment code:

import React from 'react';
import {CardElement} from '@stripe/react-stripe-js';

const CARD_ELEMENT_OPTIONS = {
  style: {
    base: {
      'color': '#32325d',
      'fontFamily': 'inherit',
      'fontSmoothing': 'antialiased',
      'fontSize': '16px',
      '::placeholder': {
        color: '#aab7c4',
      },
    },
    invalid: {
      color: '#fa755a',
      iconColor: '#fa755a',
    },
  },
};

export default function CardInput() {
  return (
    <>
    <CardElement options={CARD_ELEMENT_OPTIONS} />
    </>
  );
}

This renders the card payment form fine, but I am unsure how to add the option to checkout via Google or Apple Pay. I have read the Stripe docs but unsure how to proceed. Can anyone give me some advice in how I can integrate that into the app?

Answer 1

The Card Element doesn't offer the option to accept Google Pay or Apple Pay. If you want to accept card payments using Wallets, you can either switch to using the Payment Element, or implement the Payment Request Button separately.

An important point to note is that the option to accept Google Pay or Apple Pay only displays when you serve the page using https. You can use ngrok to test this out.

Payment Element and Card Element comparison : https://stripe.com/docs/payments/payment-card-element-comparison

Quickstart (select Custom payment flow) : https://stripe.com/docs/payments/quickstart

Accept a payment : https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements&html-or-react=react#apple-pay-and-google-pay

Payment Request Button : https://stripe.com/docs/stripe-js/elements/payment-request-button?html-or-react=react