Stripe

@capacitor-community/stripe

Capacitor community plugin for native Stripe.

Maintainers

Maintainer	GitHub	Social	Sponsoring Company
Hidetaka Okamoto	hideokamoto	@hide__dev
Ibby Hadeed	ihadeed
Masahiko Sakakibara	rdlabo	@rdlabo	RELATION DESIGN LABO, GENERAL INC. ASSOCIATION

Demo

• Demo code is here. Please check these code before ask at issues.
• Demo of Web is hosting here..

Screenshots

	Android	iOS	Web
PaymentSheet
PaymentFlow			Coming soon
ApplePay	Not support		Coming soon
GooglePay		Not support	Coming soon

Install

npm install @capacitor-community/stripe
npx cap sync

This plugin is not compatible with v1. All APIs have been revamped.

Android configuration

In file android/app/src/main/java/**/**/MainActivity.java, add the plugin to the initialization list:

public class MainActivity extends BridgeActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        registerPlugin(com.getcapacitor.community.stripe.StripePlugin.class);
    }
}

iOS configuration

not need.

Web configuration

This feature is experimental. Please tested and feedback. If you want to contribute UI, Animation or create issue, move to https://github.com/stripe-elements/stripe-elements .

npm install @stripe-elements/stripe-elements

And defineCustomElements() called once during the bootstrapping of your application.

import { defineCustomElements } from '@stripe-elements/stripe-elements/loader';
defineCustomElements();

@stripe-elements/stripe-elements is created with StencilJS. If you can't understand where defined, please check https://stenciljs.com/docs/angular/

Example

1. Initialize Stripe

import { Stripe } from '@capacitor-community/stripe';

export async function initialize(): Promise<void> {
  Stripe.initialize({
    publishableKey: "Your Publishable Key",
  });
}

2. PaymentSheet

With PaymentSheet, you can make instant payments in a single flow.

2.1. createPaymentSheet

You should connect to your backend endpoint, and get every key. This is "not" function at this Plugin. So you can use HTTPClient , Axios , Ajax , and so on. Backend structure is here: https://stripe.com/docs/payments/accept-a-payment?platform=ios#add-server-endpoint

import { PaymentSheetEventsEnum, Stripe } from '@capacitor-community/stripe';

export async function createPaymentSheet(): Promise<void> {
  /**
   * Connect to your backend endpoint, and get every key.
   */
  const { paymentIntent, ephemeralKey, customer } = await this.http.post<{
    paymentIntent: string;
    ephemeralKey: string;
    customer: string;
  }>(environment.api + 'payment-sheet', {}).pipe(first()).toPromise(Promise);
  
  Stripe.createPaymentSheet({
    paymentIntentClientSecret: paymentIntent,
    customerId: customer,
    // merchantDisplayName: 'Your App Name or Company Name',
    // customerEphemeralKeySecret: ephemeralKey,
    // style: 'alwaysDark',
  });
}

2.2. presentPaymentSheet

present in PaymentSheet is single flow. You don't need to confirm method.

export async function present(): Promise<void> {
  const result = await Stripe.presentPaymentSheet();
}

3. PaymentFlow

With PaymentFlow, you can make payments in two steps flow. And you can use setupIntent.

3.1. createPaymentFlow

You should connect to your backend endpoint, and get every key. This is "not" function at this Plugin. So you can use HTTPClient , Axios , Ajax , and so on. Backend structure is here: https://stripe.com/docs/payments/accept-a-payment?platform=ios#add-server-endpoint

You will need to prepare either paymentIntentClientSecret or setupIntentClientSecret and set it in the method.

import { PaymentSheetEventsEnum, Stripe } from '@capacitor-community/stripe';

export async function create(): Promise<void> {
  /**
   * Connect to your backend endpoint, and get every key.
   */
  const { paymentIntent, ephemeralKey, customer } = await this.http.post<{
    paymentIntent: string;
    ephemeralKey: string;
    customer: string;
  }>(environment.api + 'payment-sheet', {}).pipe(first()).toPromise(Promise);
  
  Stripe.createPaymentFlow({
    paymentIntentClientSecret: paymentIntent,
    customerId: customer,
    // setupIntentClientSecret: setupIntent,
    // merchantDisplayName: 'Your App Name or Company Name',
    // customerEphemeralKeySecret: ephemeralKey,
    // style: 'alwaysDark',
  });
}

3.2. presentPaymentFlow

present in presentPaymentFlow is not submit method. You need to confirm method.

export async function present(): Promise<void> {
  const result = await Stripe.presentPaymentFlow();
  console.log(result); // { cardNumber: "●●●● ●●●● ●●●● ****" }
}

3.3. confirmPaymentFlow

export async function present(): Promise<void> {
  const result = await Stripe.confirmPaymentFlow();
}

3. Apple Pay

With Apple Pay, you can make instant payments in a single flow. Please check settings: https://stripe.com/docs/apple-pay#merchantid

3.1. createApplePay

You should connect to your backend endpoint, and get every key. This is "not" function at this Plugin. So you can use HTTPClient , Axios , Ajax , and so on. Backend structure is here: https://stripe.com/docs/payments/accept-a-payment?platform=ios#add-server-endpoint

import { PaymentSheetEventsEnum, Stripe } from '@capacitor-community/stripe';

export async function createApplePay(): Promise<void> {
  /**
   * Connect to your backend endpoint, and get every key.
   */
  const { paymentIntent } = await this.http.post<{
    paymentIntent: string;
  }>(environment.api + 'payment-sheet', {}).pipe(first()).toPromise(Promise);

  await Stripe.createApplePay({
    paymentIntentClientSecret: paymentIntent,
    paymentSummaryItems: [{
      label: 'Product Name',
      amount: 1099.00
    }],
    merchantDisplayName: 'rdlabo',
    countryCode: 'US',
    currency: 'USD',
  });
}

3.2. presentApplePay

present in createApplePay is single flow. You don't need to confirm method.

export async function present(): Promise<void> {
  const result = await Stripe.presentApplePay();
}

4. Google Pay

With Google Pay, you can make instant payments in a single flow. Please check settings: https://stripe.com/docs/google-pay And in Android App, you need some settings.

In file android/app/src/main/res/values/strings.xml add the following lines :

<string name="publishable_key">Your Publishable Key</string>
<bool name="enable_google_pay">true</bool>
<string name="country_code">US</string>
<string name="merchant_display_name">Widget Store</string>
<bool name="google_pay_is_testing">true</bool>

In file android/app/src/main/AndroidManifest.xml, add the following XML elements under :

<meta-data
  android:name="com.getcapacitor.community.stripe.publishable_key"
  android:value="@string/publishable_key"/>

<meta-data
  android:name="com.getcapacitor.community.stripe.enable_google_pay"
  android:value="@bool/enable_google_pay"/>

<meta-data
  android:name="com.google.android.gms.wallet.api.enabled"
  android:value="true" />

<meta-data
  android:name="com.getcapacitor.community.stripe.country_code"
  android:value="@string/country_code"/>

<meta-data
  android:name="com.getcapacitor.community.stripe.merchant_display_name"
  android:value="@string/merchant_display_name"/>

<meta-data
  android:name="com.getcapacitor.community.stripe.google_pay_is_testing"
  android:value="@bool/google_pay_is_testing"/>

4.1. createGooglePay

You should connect to your backend endpoint, and get every key. This is "not" function at this Plugin. So you can use HTTPClient , Axios , Ajax , and so on. Backend structure is here: https://stripe.com/docs/payments/accept-a-payment?platform=android#add-server-endpoint

import { PaymentSheetEventsEnum, Stripe } from '@capacitor-community/stripe';

export async function createGooglePay(): Promise<void> {
  /**
   * Connect to your backend endpoint, and get every key.
   */
  const { paymentIntent } = await this.http.post<{
    paymentIntent: string;
  }>(environment.api + 'payment-sheet', {}).pipe(first()).toPromise(Promise);

  await Stripe.createGooglePay({
    paymentIntentClientSecret: paymentIntent,
  });
}

4.2. presentGooglePay

present in createGooglePay is single flow. You don't need to confirm method.

export async function present(): Promise<void> {
  const result = await Stripe.presentApplePay();
}

API

• initialize(...)
• isApplePayAvailable()
• createApplePay(...)
• presentApplePay()
• addListener(ApplePayEventsEnum.Loaded, ...)
• addListener(ApplePayEventsEnum.FailedToLoad, ...)
• addListener(ApplePayEventsEnum.FailedToLoad, ...)
• addListener(ApplePayEventsEnum.Completed, ...)
• addListener(ApplePayEventsEnum.Canceled, ...)
• addListener(ApplePayEventsEnum.Failed, ...)
• isGooglePayAvailable()
• createGooglePay(...)
• presentGooglePay()
• addListener(GooglePayEventsEnum.Loaded, ...)
• addListener(GooglePayEventsEnum.FailedToLoad, ...)
• addListener(GooglePayEventsEnum.FailedToLoad, ...)
• addListener(GooglePayEventsEnum.Completed, ...)
• addListener(GooglePayEventsEnum.Canceled, ...)
• addListener(GooglePayEventsEnum.Failed, ...)
• createPaymentFlow(...)
• presentPaymentFlow()
• confirmPaymentFlow()
• addListener(PaymentFlowEventsEnum.Loaded, ...)
• addListener(PaymentFlowEventsEnum.FailedToLoad, ...)
• addListener(PaymentFlowEventsEnum.Opened, ...)
• addListener(PaymentFlowEventsEnum.FailedToLoad, ...)
• addListener(PaymentFlowEventsEnum.Completed, ...)
• addListener(PaymentFlowEventsEnum.Canceled, ...)
• addListener(PaymentFlowEventsEnum.Failed, ...)
• addListener(PaymentFlowEventsEnum.Created, ...)
• createPaymentSheet(...)
• presentPaymentSheet()
• addListener(PaymentSheetEventsEnum.Loaded, ...)
• addListener(PaymentSheetEventsEnum.FailedToLoad, ...)
• addListener(PaymentSheetEventsEnum.Completed, ...)
• addListener(PaymentSheetEventsEnum.Canceled, ...)
• addListener(PaymentSheetEventsEnum.Failed, ...)
• Interfaces
• Type Aliases
• Enums

initialize(...)

initialize(opts: StripeInitializationOptions) => Promise<void>

Param	Type
opts	StripeInitializationOptions

---

isApplePayAvailable()

isApplePayAvailable() => Promise<void>

---

createApplePay(...)

createApplePay(options: CreateApplePayOption) => Promise<void>

Param	Type
options	CreateApplePayOption

---

presentApplePay()

presentApplePay() => Promise<{ paymentResult: ApplePayResultInterface; }>

Returns: Promise<{ paymentResult: ApplePayResultInterface; }>

---

addListener(ApplePayEventsEnum.Loaded, ...)

addListener(eventName: ApplePayEventsEnum.Loaded, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	ApplePayEventsEnum.Loaded
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(ApplePayEventsEnum.FailedToLoad, ...)

addListener(eventName: ApplePayEventsEnum.FailedToLoad, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	ApplePayEventsEnum.FailedToLoad
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(ApplePayEventsEnum.FailedToLoad, ...)

addListener(eventName: ApplePayEventsEnum.FailedToLoad, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	ApplePayEventsEnum.FailedToLoad
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(ApplePayEventsEnum.Completed, ...)

addListener(eventName: ApplePayEventsEnum.Completed, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	ApplePayEventsEnum.Completed
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(ApplePayEventsEnum.Canceled, ...)

addListener(eventName: ApplePayEventsEnum.Canceled, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	ApplePayEventsEnum.Canceled
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(ApplePayEventsEnum.Failed, ...)

addListener(eventName: ApplePayEventsEnum.Failed, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	ApplePayEventsEnum.Failed
listenerFunc	() => void

Returns: PluginListenerHandle

---

isGooglePayAvailable()

isGooglePayAvailable() => Promise<void>

---

createGooglePay(...)

createGooglePay(options: CreateGooglePayOption) => Promise<void>

Param	Type
options	CreateGooglePayOption

---

presentGooglePay()

presentGooglePay() => Promise<{ paymentResult: GooglePayResultInterface; }>

Returns: Promise<{ paymentResult: GooglePayResultInterface; }>

---

addListener(GooglePayEventsEnum.Loaded, ...)

addListener(eventName: GooglePayEventsEnum.Loaded, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	GooglePayEventsEnum.Loaded
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(GooglePayEventsEnum.FailedToLoad, ...)

addListener(eventName: GooglePayEventsEnum.FailedToLoad, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	GooglePayEventsEnum.FailedToLoad
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(GooglePayEventsEnum.FailedToLoad, ...)

addListener(eventName: GooglePayEventsEnum.FailedToLoad, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	GooglePayEventsEnum.FailedToLoad
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(GooglePayEventsEnum.Completed, ...)

addListener(eventName: GooglePayEventsEnum.Completed, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	GooglePayEventsEnum.Completed
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(GooglePayEventsEnum.Canceled, ...)

addListener(eventName: GooglePayEventsEnum.Canceled, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	GooglePayEventsEnum.Canceled
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(GooglePayEventsEnum.Failed, ...)

addListener(eventName: GooglePayEventsEnum.Failed, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	GooglePayEventsEnum.Failed
listenerFunc	() => void

Returns: PluginListenerHandle

---

createPaymentFlow(...)

createPaymentFlow(options: CreatePaymentFlowOption) => Promise<void>

Param	Type
options	CreatePaymentFlowOption

---

presentPaymentFlow()

presentPaymentFlow() => Promise<{ cardNumber: string; }>

Returns: Promise<{ cardNumber: string; }>

---

confirmPaymentFlow()

confirmPaymentFlow() => Promise<{ paymentResult: PaymentFlowResultInterface; }>

Returns: Promise<{ paymentResult: PaymentFlowResultInterface; }>

---

addListener(PaymentFlowEventsEnum.Loaded, ...)

addListener(eventName: PaymentFlowEventsEnum.Loaded, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	PaymentFlowEventsEnum.Loaded
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(PaymentFlowEventsEnum.FailedToLoad, ...)

addListener(eventName: PaymentFlowEventsEnum.FailedToLoad, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	PaymentFlowEventsEnum.FailedToLoad
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(PaymentFlowEventsEnum.Opened, ...)

addListener(eventName: PaymentFlowEventsEnum.Opened, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	PaymentFlowEventsEnum.Opened
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(PaymentFlowEventsEnum.FailedToLoad, ...)

addListener(eventName: PaymentFlowEventsEnum.FailedToLoad, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	PaymentFlowEventsEnum.FailedToLoad
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(PaymentFlowEventsEnum.Completed, ...)

addListener(eventName: PaymentFlowEventsEnum.Completed, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	PaymentFlowEventsEnum.Completed
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(PaymentFlowEventsEnum.Canceled, ...)

addListener(eventName: PaymentFlowEventsEnum.Canceled, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	PaymentFlowEventsEnum.Canceled
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(PaymentFlowEventsEnum.Failed, ...)

addListener(eventName: PaymentFlowEventsEnum.Failed, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	PaymentFlowEventsEnum.Failed
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(PaymentFlowEventsEnum.Created, ...)

addListener(eventName: PaymentFlowEventsEnum.Created, listenerFunc: (info: { cardNumber: string; }) => void) => PluginListenerHandle

Param	Type
eventName	PaymentFlowEventsEnum.Created
listenerFunc	(info: { cardNumber: string; }) => void

Returns: PluginListenerHandle

---

createPaymentSheet(...)

createPaymentSheet(options: CreatePaymentSheetOption) => Promise<void>

Param	Type
options	CreatePaymentSheetOption

---

presentPaymentSheet()

presentPaymentSheet() => Promise<{ paymentResult: PaymentSheetResultInterface; }>

Returns: Promise<{ paymentResult: PaymentSheetResultInterface; }>

---

addListener(PaymentSheetEventsEnum.Loaded, ...)

addListener(eventName: PaymentSheetEventsEnum.Loaded, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	PaymentSheetEventsEnum.Loaded
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(PaymentSheetEventsEnum.FailedToLoad, ...)

addListener(eventName: PaymentSheetEventsEnum.FailedToLoad, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	PaymentSheetEventsEnum.FailedToLoad
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(PaymentSheetEventsEnum.Completed, ...)

addListener(eventName: PaymentSheetEventsEnum.Completed, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	PaymentSheetEventsEnum.Completed
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(PaymentSheetEventsEnum.Canceled, ...)

addListener(eventName: PaymentSheetEventsEnum.Canceled, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	PaymentSheetEventsEnum.Canceled
listenerFunc	() => void

Returns: PluginListenerHandle

---

addListener(PaymentSheetEventsEnum.Failed, ...)

addListener(eventName: PaymentSheetEventsEnum.Failed, listenerFunc: () => void) => PluginListenerHandle

Param	Type
eventName	PaymentSheetEventsEnum.Failed
listenerFunc	() => void

Returns: PluginListenerHandle

---

Interfaces

StripeInitializationOptions

Prop	Type
publishableKey	string
stripeAccount	string

CreateApplePayOption

Prop	Type
paymentIntentClientSecret	string
paymentSummaryItems	{ label: string; amount: number; }[]
merchantIdentifier	string
countryCode	string
currency	string

PluginListenerHandle

Prop	Type
remove	() => Promise<void>

CreateGooglePayOption

Prop	Type
paymentIntentClientSecret	string

CreatePaymentFlowOption

Prop	Type	Description
paymentIntentClientSecret	string	Any documentation call 'paymentIntent' Set paymentIntentClientSecret or setupIntentClientSecret
setupIntentClientSecret	string	Any documentation call 'paymentIntent' Set paymentIntentClientSecret or setupIntentClientSecret

CreatePaymentSheetOption

Prop	Type	Description
paymentIntentClientSecret	string	Any documentation call 'paymentIntent'

Type Aliases

ApplePayResultInterface

ApplePayEventsEnum.Completed | ApplePayEventsEnum.Canceled | ApplePayEventsEnum.Failed

GooglePayResultInterface

GooglePayEventsEnum.Completed | GooglePayEventsEnum.Canceled | GooglePayEventsEnum.Failed

PaymentFlowResultInterface

PaymentFlowEventsEnum.Completed | PaymentFlowEventsEnum.Canceled | PaymentFlowEventsEnum.Failed

PaymentSheetResultInterface

PaymentSheetEventsEnum.Loaded | PaymentSheetEventsEnum.FailedToLoad | PaymentSheetEventsEnum.Completed | PaymentSheetEventsEnum.Canceled | PaymentSheetEventsEnum.Failed

Enums

ApplePayEventsEnum

Members	Value
Loaded	"applePayLoaded"
FailedToLoad	"applePayFailedToLoad"
Completed	"applePayCompleted"
Canceled	"applePayCanceled"
Failed	"applePayFailed"

GooglePayEventsEnum

Members	Value
Loaded	"googlePayLoaded"
FailedToLoad	"googlePayFailedToLoad"
Completed	"googlePayCompleted"
Canceled	"googlePayCanceled"
Failed	"googlePayFailed"

PaymentFlowEventsEnum

Members	Value
Loaded	"paymentFlowLoaded"
FailedToLoad	"paymentFlowFailedToLoad"
Opened	"paymentFlowOpened"
Created	"paymentFlowCreated"
Completed	"paymentFlowCompleted"
Canceled	"paymentFlowCanceled"
Failed	"paymentFlowFailed"

PaymentSheetEventsEnum

Members	Value
Loaded	"paymentSheetLoaded"
FailedToLoad	"paymentSheetFailedToLoad"
Completed	"paymentSheetCompleted"
Canceled	"paymentSheetCanceled"
Failed	"paymentSheetFailed"

License

@capacitor-community/stripe is MIT licensed.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

metalllus 💻

This project follows the all-contributors specification. Contributions of any kind welcome!