Accept a Przelewy24 payment

Server-side

This integration requires endpoints on your server that talk to the Stripe API. Use our official libraries for access to the Stripe API from your server:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Client-side

The React Native SDK is open source and fully documented. Internally, it uses the native iOS and Android SDKs. To install Stripe’s React Native SDK, run one of the following commands in your project’s directory (depending on which package manager you use):

yarn add @stripe/stripe-react-native

Next, install some other necessary dependencies:

• For iOS, navigate to the ios directory and run pod install to ensure that you also install the required native dependencies.
• For Android, there are no more dependencies to install.

Stripe initialization

To initialize Stripe in your React Native app, either wrap your payment screen with the StripeProvider component, or use the initStripe initialization method. Only the API publishable key in publishableKey is required. The following example shows how to initialize Stripe using the StripeProvider component.

import { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}

A PaymentIntent represents your intent to collect payment from a customer and tracks the lifecycle of the payment process.

Server-side

Create a PaymentIntent on your server and specify the amount to collect, and eur or pln as the currency. If you have an existing Payment Intents integration, add p24 to the list of payment method types.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=pln \
  -d "payment_method_types[]"=p24

Instead of passing the entire PaymentIntent object to your app, return its client secret. The PaymentIntent’s client secret is a unique key that lets you confirm the payment and update payment details on the client, without allowing manipulation of sensitive information, like the payment amount.

Client-side

On the client, request a PaymentIntent from your server and store its client secret.

const fetchPaymentIntentClientSecret = async () => {
  const response = await fetch(`${API_URL}/create-payment-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email,
      currency: 'pln',
      payment_method_types: ['p24'],
    }),
  });
  const { clientSecret, error } = await response.json();

  return { clientSecret, error };
};

Statement descriptors with Przelewy24

You can set a custom statement descriptor before confirming the PaymentIntent. For Przelewy24, the statement descriptor is limited to 14 characters. It is visible on your customer’s bank records within the payment’s description, with the format /OPT/X/////P24-XXX-XXX-XXX {statement_descriptor}, where /OPT/X/////P24-XXX-XXX-XXX is a unique reference for the payment generated by Przelewy24.

In your app, collect your customer’s email address.

export default function P24PaymentScreen() {
  const [email, setEmail] = useState();

  const handlePayPress = async () => {
    // ...
  };

  return (
    <Screen>
      <TextInput
        placeholder="E-mail"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
    </Screen>
  );
}

Retrieve the client secret from the PaymentIntent you created and call confirmPayment. This presents a webview where the customer can complete the payment on their bank’s website or app. Afterwards, the promise resolves with the result of the payment.

export default function P24PaymentScreen() {
  const [email, setEmail] = useState();

  const handlePayPress = async () => {
    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
      email,
    };
  };

  const { error, paymentIntent } = await confirmPayment(clientSecret, {
    paymentMethodType: 'P24',
    paymentMethodData: {
      billingDetails,
    }
  });

  if (error) {
    Alert.alert(`Error code: ${error.code}`, error.message);
  } else if (paymentIntent) {
    Alert.alert(
      'Success',
      `The payment was confirmed successfully! currency: ${paymentIntent.currency}`
    );
  }

  return (
    <Screen>
      <TextInput
        placeholder="E-mail"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
    </Screen>
  );
}