How to integrate Payment Request Button for Apple Pay and Google Pay

The Sharetribe Stripe integration supports using card wallets such as Google Pay and Apple Pay without transaction process changes, when using the Payment Request Button. This guide shows you how to integrate the Payment Request Button on your Sharetribe Web Template checkout page.

Why Payment Request Button

Stripe’s own documentation recommends using Express Checkout Element or Payment Element in new integrations. However, neither of those elements is directly compatible with the Sharetribe Stripe default integration:

The Express Checkout Element does not support manual capture, and the Sharetribe backend creates payment intents with capture_method: manual to support preauthorizing the funds while a transaction is waiting for the provider to accept or decline.
The PaymentElement collects payment details through Stripe Elements using automatic payment methods. The Sharetribe backend creates the payment intent with a payment_method_types parameter that defines what payment method types are allowed to complete the payment intent. The confirm function stripe.confirmPayment expects the Payment Element to set the payment methods instead of the payment intent, so it is incompatible with Sharetribe-created payment intents.

The Payment Request Button works with manual capture, so it avoids the issue with Express Checkout Element. In addition, it uses the same stripe.confirmCardPayment function as the default card payment flow, so it does not have the same confirm issue as the Payment Element.

In this guide, we’ll add Payment Request Button to CheckoutPageWithPayment. You will notice that a lot of the structures for Payment Request Button parallel the existing structures for card payments, so being familiar with the existing card payment flow is useful but not required.

Prerequisites

Before you start developing this feature, make sure you have taken the following steps to prepare.

Register your domain

Register your domain with Stripe in both sandbox and live mode according to these instructions . The button will not appear on unregistered domains. -

Serve your application over HTTPS.

The Payment Request Button does not mount over plain HTTP. For local development, use a tunnel such as ngrok .

Add a card to a wallet on the device and browser you will test with

With Chrome, the Google Pay interface will automatically show up when you are using test keys. Make sure that your Chrome settings aren’t blocking cookies and that you’re using Standard (not enhanced) protection.

Safari will not allow testing with Stripe Test keys, since it is not possible to add a Stripe test card in your Apple Wallet. This means that you will need to develop the feature with another browser and then test with Safari once you are using Live keys.

Add Payment Request Button

Add Stripe country to config

To create stripe.paymentRequest, we need the country code of the platform operator’s Stripe account.

First, add your country code in your .env file as REACT_APP_STRIPE_COUNTRY:

.env


REACT_APP_STRIPE_COUNTRY = 'DE';

Add that as an export in src/config/configStripe.js. Include a fallback value so a missing env variable does not silently break the Payment Request Button initialization.

- - configStripe.js

configStripe.js


export const country = process.env.REACT_APP_STRIPE_COUNTRY || 'US';

Extend `confirmCardPayment` in stripe.duck.js

The confirmCardPaymentPayloadCreator function builds args as either [secret] or [secret, paymentParams] in the default implementation.

Payment Request Button uses two-phase confirmation. This means that a third branch for [secret, paymentParams, confirmOptions] is needed for the Payment Request Button flow, since it requires passing { handleActions: false } as a third argument to the stripe.confirmCardPayment thunk on the first call.

- - stripe.duck.js

Add confirmOptions to the destructuring of params, then replace the two-branch ternary with a three-branch version:

src/ducks/stripe.duck.js


 const confirmCardPaymentPayloadCreator = async (params) => {
-  const { stripe, paymentParams, stripePaymentIntentClientSecret: secret } = params;
+  const { stripe, paymentParams, confirmOptions, stripePaymentIntentClientSecret: secret } = params;
 
-  const args = paymentParams ? [secret, paymentParams] : [secret];
+  const args =
+    paymentParams && confirmOptions
+      ? [secret, paymentParams, confirmOptions]
+      : paymentParams
+      ? [secret, paymentParams]
+      : [secret];
 
   return stripe.confirmCardPayment(...args);
 };

Add `processCheckoutWithPRBPayment` to CheckoutPageTransactionHelpers.js

The default card payment flow uses a function called processCheckoutWithPayment to handle the card payment steps. We will add a parallel function, called processCheckoutWithPRBPayment, that uses a similar flow but for Payment Request Button specific steps.

- - - CheckoutPageTransactionHelpers.js

The function composes the first three async steps from processCheckoutWithPayment, but replaces the standard card confirmation with a two-phase Payment Request Button confirmation:

fnRequestPayment is identical to the card flow. It calls onInitiateOrder, handles the inquiry/negotiation/standard transition branches, and persists the transaction.
fnConfirmCardPaymentPRB is the two-phase Payment Request Button confirmation mentioned in the previous step.
1. The first call uses { handleActions: false } and payment_method: ev.paymentMethod.id. If it fails, it calls ev.complete('fail') before throwing. If it succeeds, the flow calls ev.complete('success') to close the payment sheet, and then checks whether the second call is necessary.
2. A second call is made if paymentIntent.status === 'requires_action' – for example to handle 3DS or other actions required by the payment intent.
fnConfirmPayment — identical to the card flow. It transitions the transaction using the Marketplace API.

The processCheckoutWithPayment function has a fourth step for saving a default payment method. However, wallet payment methods cannot be saved as default, so we don’t include that step. Instead, we add a .then block to the composed function to return a correctly shaped response.

Add this new helper function to CheckoutPageTransactionHelpers.js:

src/containers/CheckoutPage/CheckoutPageTransactionHelpers.js


export const processCheckoutWithPRBPayment = (
  orderParams,
  extraPaymentParams
) => {
  const {
    ev, // Stripe paymentmethod event object
    hasPaymentIntentUserActionsDone,
    onConfirmCardPayment,
    onConfirmPayment,
    onInitiateOrder,
    pageData,
    paymentIntent,
    process,
    setPageData,
    sessionStorageKey,
    stripe,
  } = extraPaymentParams;
 
  const storedTx = ensureTransaction(pageData.transaction);
  const processAlias =
    pageData?.listing?.attributes?.publicData?.transactionProcessAlias;
 
  let createdPaymentIntent = null;
 
  // Step 1: fnRequestPayment – identical to processCheckoutWithPayment
  const fnRequestPayment = (fnParams) => {
    const hasPaymentIntents =
      storedTx.attributes.protectedData?.stripePaymentIntents;
 
    const isOfferPendingInNegotiationProcess =
      resolveLatestProcessName(processAlias.split('/')[0]) ===
        NEGOTIATION_PROCESS_NAME &&
      storedTx.attributes.state ===
        `state/${process.states.OFFER_PENDING}`;
 
    const requestTransition =
      storedTx?.attributes?.lastTransition ===
      process.transitions.INQUIRE
        ? process.transitions.REQUEST_PAYMENT_AFTER_INQUIRY
        : isOfferPendingInNegotiationProcess
          ? process.transitions.REQUEST_PAYMENT_TO_ACCEPT_OFFER
          : process.transitions.REQUEST_PAYMENT;
    const isPrivileged = process.isPrivileged(requestTransition);
 
    const orderPromise = hasPaymentIntents
      ? Promise.resolve(storedTx)
      : onInitiateOrder(
          fnParams,
          processAlias,
          storedTx.id,
          requestTransition,
          isPrivileged
        );
 
    orderPromise.then((order) => {
      persistTransaction(
        order,
        pageData,
        storeData,
        setPageData,
        sessionStorageKey
      );
    });
 
    return orderPromise;
  };
 
  // Step 2: PRB two-phase confirmation, replaces fnConfirmCardPayment
  const fnConfirmCardPaymentPRB = async (fnParams) => {
    const order = fnParams;
 
    const hasPaymentIntents =
      order?.attributes?.protectedData?.stripePaymentIntents;
    if (!hasPaymentIntents) {
      throw new Error(
        `Missing StripePaymentIntents key in transaction's protectedData. Check that your transaction process is configured to use payment intents.`
      );
    }
 
    const { stripePaymentIntentClientSecret } =
      order.attributes.protectedData.stripePaymentIntents.default;
 
    // If PI user actions are already done (e.g. a previous attempt succeeded),
    // close the sheet and pass through
    if (hasPaymentIntentUserActionsDone) {
      ev.complete('success');
      return { transactionId: order?.id, paymentIntent };
    }
 
    // First call: confirm PI attaching the PRB payment method, without handling
    // any required actions. This returns quickly so ev.complete() can be called promptly.
    let firstResult;
    try {
      firstResult = await onConfirmCardPayment({
        stripe,
        stripePaymentIntentClientSecret,
        paymentParams: { payment_method: ev.paymentMethod.id },
        confirmOptions: { handleActions: false }, // extended in Step 2 above
        orderId: order?.id,
      });
    } catch (err) {
      // Confirmation failed — tell the browser to re-show the payment interface
      ev.complete('fail');
      throw err;
    }
 
    // Close the browser payment sheet before handling any further actions.
    // Must be called promptly; Stripe will timeout if delayed.
    ev.complete('success');
 
    createdPaymentIntent = firstResult.paymentIntent;
 
    // Second call: handle 3DS or other required actions if the PI needs them.
    if (firstResult.paymentIntent?.status === 'requires_action') {
      const secondResult = await onConfirmCardPayment({
        stripe,
        stripePaymentIntentClientSecret,
        orderId: order?.id,
        // No paymentParams, no confirmOptions — let Stripe handle the action
      });
      createdPaymentIntent = secondResult.paymentIntent;
      return {
        transactionId: order?.id,
        paymentIntent: secondResult.paymentIntent,
      };
    }
 
    return {
      transactionId: order?.id,
      paymentIntent: firstResult.paymentIntent,
    };
  };
 
  // Step 3: complete order – identical to processCheckoutWithPayment
  const fnConfirmPayment = (fnParams) => {
    createdPaymentIntent = fnParams.paymentIntent;
    const transactionId = fnParams.transactionId;
    const transitionName = process.transitions.CONFIRM_PAYMENT;
    const isTransitionedAlready =
      storedTx?.attributes?.lastTransition === transitionName;
    const orderPromise = isTransitionedAlready
      ? Promise.resolve(storedTx)
      : onConfirmPayment(transactionId, transitionName, {});
 
    orderPromise.then((order) => {
      persistTransaction(
        order,
        pageData,
        storeData,
        setPageData,
        sessionStorageKey
      );
    });
 
    return orderPromise;
  };
 
  const applyAsync = (acc, val) => acc.then(val);
  const composeAsync =
    (...funcs) =>
    (x) =>
      funcs.reduce(applyAsync, Promise.resolve(x));
  const handlePRBPaymentIntentCreation = composeAsync(
    fnRequestPayment,
    fnConfirmCardPaymentPRB,
    fnConfirmPayment
  );
 
  return handlePRBPaymentIntentCreation(orderParams).then((order) => ({
    orderId: order?.id,
    paymentMethodSaved: true,
  }));
};

Update StripePaymentForm.js

The Payment Request Button logic lives inside StripePaymentForm. This is because when the customer authorizes the payment, the paymentmethod event handler needs to read the form values present at that moment – this way, the transaction fields get included in the submit event. The form values are available via this.finalFormAPI.

- - - - StripePaymentForm.js

Add `prCanMakePayment` to `initialState`

Next, let’s add prCanMakePayment: false to initialState. This state attribute drives whether the Payment Request Button section is rendered. Without it, the divider renders for all users regardless of wallet support.

In a later step, we’ll set it to true in initializePRButton inside canMakePayment().then(result => { if (result) { ... } }).