Getting Started (React)

Project setup

$ ionic start capacitorStripe --type=react --capacitor
$ ionic build

Troubleshooting

If you get the following error.

[react-scripts] 
[react-scripts] There might be a problem with the project dependency tree.
[react-scripts] It is likely not a bug in Create React App, but something you need to fix locally.
[react-scripts] 
[react-scripts] The react-scripts package provided by Create React App requires a dependency:
[react-scripts]   "webpack": "4.44.2"
[react-scripts] 
[react-scripts] Don't try to install it manually: your package manager does it automatically.
[react-scripts] However, a different version of webpack was detected higher up in the tree:
[react-scripts]   /Users/development/sandbox/node_modules/webpack (version: 4.43.0) 
[react-scripts] Manually installing incompatible versions is known to cause hard-to-debug issues.
[react-scripts] If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
[react-scripts] That will permanently disable this message but you might encounter other issues.

You can suppress this by this command.

%  echo 'SKIP_PREFLIGHT_CHECK=true' > .env

Setup

Install plugins

% npm install @capacitor-community/stripe @stripe-elements/stripe-elements
% npx cap sync

Load Web Component

Open src/index.tsx and add defineCustomElements function to load the Web Component.

% git diff src/index.tsx 
diff --git a/src/index.tsx b/src/index.tsx
index c421f45..3c359a8 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import reportWebVitals from './reportWebVitals';
+import { defineCustomElements } from '@stripe-elements/stripe-elements/loader';
+defineCustomElements();

Configure & Load Stripe Publishable API key

Open .env file to put your Stripe publishable API key like the example.

SKIP_PREFLIGHT_CHECK=true
REACT_APP_API_STRIPE_PUB_KEY=pk_test_XXXX

And load the environment variable to initialize the Stripe client.

import { Stripe } from '@capacitor-community/stripe';
Stripe.initialize({
  publishableKey: process.env.REACT_APP_API_STRIPE_PUB_KEY as string
})

Create & present PaymentSheet

We need to get the customer_id and payment_intent_client_secret from server-side API or Stripe CLI.

  const launchPaymentSheet = useCallback(async() => {
    /**
     * Add event listener to handle for succeeded the payment-sheet process
     **/
    Stripe.addListener(PaymentSheetEventsEnum.Completed, () => {
      console.log('completed')
    })

    /**
     * Add event listener to handle for failed the payment-sheet process
     **/
    Stripe.addListener(PaymentSheetEventsEnum.Failed, () => {
      console.log('failed')
    })

    /**
     * Call external API to create a new PaymentIntent and get the customer id
     **/
    const { paymentIntentClientSecret, customerId } = await fetch(YOUR_SERVER_SIDE_API, {
      method: 'POST',
      body: JSON.stringify({
        // ...any API request body to create a new PaymentIntent
      })
    }).then(data => data.json())
    .then(data => data.body)

    /**
     * Create a new PaymentSheet
     **/
    await Stripe.createPaymentSheet({
      paymentIntentClientSecret,
      customerId
    })

    /**
     * Open PaymentSheet (form & modal)
     **/
    const result = await Stripe.presentPaymentSheet();
  },[])