tap-to-pay-react-native-demo

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #typescript #android #machine-learning #deep-learning #docker #macos #vue #pytorch #security #ios #openai

tap-to-pay-react-native-demo

(★ 22)

A demo app of Tap to Pay with Stripe on React Native/Expo

tap-to-pay-react-native-demo Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">Tap To Pay Mock with Stripe</h1>

## Description

An application created using React Native and Expo with the aim of creating a sample app with Tap to Pay functionality using stripe-terminal-react-native.

## Necessary Configurations

- Expo SDK 49+
- React Native 0.72+

## Prerequisites

- Stripe Account (Development) to use API tokens
- Expo Account to generate the build via EAS

## Getting Started

- To use the mock, you need to download this repository and build it via EAS using the command:

```bash
  ❯ eas build --profile development
  ```

After that, EAS will take care of creating the build and installing it on your emulator (Android/iOS).

- With the app installed on the simulator, you need to start the project with the command:

```bash
  ❯ npm run start
  ```

and also the local server created with json-server

```bash
  ❯ npm run server
  ```

With these two commands running, our project is up and ready for testing.

## Variable Configuration

Stripe uses public keys to make the front-back connection, and it is necessary to change two of them for things to work:

- Public key to connect to the readers: `/src/db/db.json`
- LocationId to identify the physical company: `/src/stripe-page.tsx`

Both keys can be created or updated using the Stripe CLI. Below is the code used:

### Example commands:

- To create the location:

- To create the public token:

## Understanding the Code

### Patterns

- As a standard for the mock here, I decided to wrap all requests inside trycatch and also add alerts for successful cases. For error cases, I will only return a console.log.

### 1. DiscoverReaders

```js
useEffect(() => {
  discoverReaders({
    discoveryMethod: 'localMobile',
    simulated: true,
  })
}, [discoverReaders])
```

This useEffect has a function from stripe-terminal itself that is responsible for locating available readers. After locating them, we move on to the second step.

### 2. ConnectReader

```js
async function connectReader(selectedReader: any) {
  setLoadingConnectingReader(true)
  try {
    const { reader, error } = await connectLocalMobileReader({
      reader: selectedReader,
      locationId: locationIdStripeMock,
    })

if (error) {
      console.log('connectLocalMobileReader error:', error)
      return
    }

Alert.alert('Reader connected successfully')

console.log('Reader connected successfully', reader)
  } catch (error) {
    console.log(error)
  } finally {
    setLoadingConnectingReader(false)
  }
}
```

Function used to connect to the reader found earlier. In it, we can destructure the reader and the error, which can be handled if it occurs. It is also at this step that we use LocationId to identify which establishment that reader belongs to.

### 3. PaymentIntent

```js
async function paymentIntent() {
  setLoadingCreatePayment(true)
  try {
    const { error, paymentIntent } = await createPaymentIntent({
      amount: 100,
      currency: 'usd',
      paymentMethodTypes: ['card_present'],
      offlineBehavior: 'prefer_online',
    })

if (error) {
      console.log('Error creating payment intent', error)
      return
    }

setPayment(paymentIntent)

Alert.alert('Payment intent created successfully')
  } catch (error) {
    console.log(error)
  } finally {
    setLoadingCreatePayment(false)
  }
}
```

In this function, we create the payment intent responsible for capturing the amount, currency type, payment methods (card, virtual card, etc.), and so on. Just like in the previous function, we can destructure the request and obtain the payment intent data or the error, if it occurs.

\*\*\* The amount always equals its full value, without dots.
Example: U$ 1.00 = 100; U$ 10.00 = 1000;

### 4. CollectPayment

```js
async function collectPayment() {
  setLoadingCollectPayment(true)
  try {
    const { error, paymentIntent } = await collectPaymentMethod({
      paymentIntent: payment,
    })

if (error) {
      console.log('Error collecting payment', error)
      return
    }

Alert.alert('Payment successfully collected', '', [
      {
        text: 'Ok',
        onPress: async () => {
          await confirmPayment(paymentIntent)
        },
      },
    ])
  } catch (error) {
    console.log(error)
  } finally {
    setLoadingCollectPayment(false)
  }
}
```

In this function, we collect the payment intent created earlier. It is here that we open the Tap to Pay functionality for the user to touch the payment method and make the payment.

### 5. ConfirmPayment

```js
async function confirmPayment(payment: any) {
  setLoadingConfirmPayment(true)
  try {
    const { error, paymentIntent } = await confirmPaymentIntent(payment)

if (error) {
      console.log('Error confirm payment', error)
      return
    }

Alert.alert('Payment successfully confirmed!', 'Congratulations')
    console.log('Payment confirmed', paymentIntent)
  } catch (error) {
    console.log(error)
  } finally {
    setLoadingConfirmPayment(false)
  }
}
```

Here, we confirm all previous steps and finalize the sales process.

## See the app in action!

Now you can observe how the app behaves in real time!

## Documentations

Here are the documentations that helped me create the mock and my production app:

- [Stripe CLI Documentation](https://docs.stripe.com/stripe-cli)

- [Stripe Tap to Pay Documentation](https://docs.stripe.com/terminal/payments/setup-integration?terminal-sdk-platform=react-native)

## License

This project is licensed. Please see the license file for more details.

## Development by

Arlan Gustavo Biati

❯ [@ArlanBiati](https://www.linkedin.com/in/arlan-biati-2b3512115/) <img src="https://user-images.githubusercontent.com/43690080/84064413-f0e6c480-a998-11ea-8d87-fa7e45653884.png">

❯ arlan.gustavo.biati@gmail.com <img src="https://user-images.githubusercontent.com/43690080/84064502-1542a100-a999-11ea-8085-b751f54ea57a.png">

❯ [ArlanBiati](https://github.com/ArlanBiati/) <img src="https://user-images.githubusercontent.com/43690080/84064412-f04e2e00-a998-11ea-859c-50c4c05df79b.png">

tap-to-pay-react-native-demo

tap-to-pay-react-native-demo Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

tap-to-pay-react-native-demo

tap-to-pay-react-native-demo Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README