Google Pay API untuk React Native di Android

1. Pengantar

Yang akan Anda build

Setelah menyelesaikan codelab ini, Anda akan memiliki aplikasi React Native yang layak minimum dengan integrasi Google Pay yang berfungsi untuk Android. Project ini mengambil token pembayaran yang dapat dikirim ke penyedia layanan pembayaran untuk diproses.

Yang akan Anda pelajari

  • Cara menginstal dan mengonfigurasi library Google Pay React Native
  • Cara menampilkan tombol Google Pay dan menangani klik
  • Cara meminta token pembayaran dari Google Pay

Yang Anda butuhkan

  • Editor teks pilihan Anda untuk mengedit file JavaScript.
  • Lingkungan pengembangan React Native yang disiapkan untuk Android.
  • Untuk produksi, Anda memerlukan merchantId Google Pay. Hanya perlu satu menit untuk mendaftar di Konsol Google Pay & Wallet, jadi sebaiknya selesaikan sekarang.

2. Buat project React Native

Membuat file project

  1. Buat project React Native baru bernama googlepayrn.
    npx @react-native-community/cli@latest init googlepayrn
  2. Instal library Google Pay React Native.
    cd googlepayrn
npm install @google/react-native-make-payment
  3. Buka App.tsx di IDE pilihan Anda dan ganti kontennya dengan kode berikut:
    import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? '#121212' : '#F3F3F3',
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <View style={styles.container}>
        <Text style={styles.title}>Google Pay Codelab</Text>
        <View id="gpay-container" />
        <Text>Transaction info and errors will be logged to the console.</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 24,
  },
  title: {
    fontSize: 24,
    fontWeight: '600',
    marginBottom: 24,
  },
});

export default App;

3. Mengonfigurasi Google Pay

Permintaan pembayaran Google Pay memerlukan objek permintaan. Objek yang ditentukan di sini sebagai baseGooglePayRequest berisi setelan umum minimum untuk semua permintaan. Setelan tambahan akan ditambahkan bergantung pada permintaan yang dibuat dan akan kita tinjau dalam codelab ini.

Tambahkan konstanta konfigurasi Google Pay ke App.tsx:

// This is the base configuration for all Google Pay payment data requests.
const baseGooglePayRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: [
          "PAN_ONLY", "CRYPTOGRAM_3DS"
        ],
        allowedCardNetworks: [
          "AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"
        ]
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId'
        }
      }
    }
  ]
};

Resource

  • Referensi API: Dokumentasi objek permintaan Google Pay API
  • Referensi API: Lihat PaymentMethod untuk mengetahui informasi selengkapnya tentang metode otorisasi yang diizinkan, jaringan kartu yang diizinkan, dan spesifikasi tokenisasi termasuk nilai gateway yang tepat.

4. Membuat permintaan pembayaran

Saat tombol Google Pay ditekan, permintaan pembayaran akan dibuat dan ditampilkan.

Tambahkan detail pembayaran dan metode pembayaran ke App.tsx:

const paymentDetails = {
  total: {
    amount: {
      currency: 'USD',
      value: '14.95',
    },
  },
};

const paymentMethods = [
  {
    supportedMethods: 'google_pay',
    data: baseGooglePayRequest,
  },
];

5. Menambahkan tombol Google Pay

Library react-native-make-payment mencakup komponen tombol Google Pay native.

  1. Tambahkan impor di bagian atas App.tsx:
import { GooglePayButton, GooglePayButtonConstants, PaymentRequest } from '@google/react-native-make-payment';
  1. Tambahkan pengendali klik di dalam komponen App:
const checkCanMakePayment = () => {
  const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails);
  paymentRequest.canMakePayment().then((canMakePayment) => {
    if (canMakePayment) {
      paymentRequest.show().then((response) => {
        console.log(response);
      });
    } else {
      console.log('Google Pay unavailable');
    }
  });
};
  1. Tambahkan tombol dan gaya ke JSX dan gayanya:
<GooglePayButton
  style={styles.googlepaybutton}
  onPress={checkCanMakePayment}
  allowedPaymentMethods={baseGooglePayRequest.allowedPaymentMethods}
  theme={GooglePayButtonConstants.Themes.Dark}
  type={GooglePayButtonConstants.Types.Buy}
  radius={4}
/>

googlepaybutton: {
  width: 200,
  height: 48,
},

App.tsx setelah menambahkan tombol dan handler:

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import { GooglePayButton, GooglePayButtonConstants, PaymentRequest } from '@google/react-native-make-payment';

const baseGooglePayRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: [
          'PAN_ONLY', 'CRYPTOGRAM_3DS'
        ],
        allowedCardNetworks: [
          'AMEX', 'DISCOVER', 'INTERAC', 'JCB', 'MASTERCARD', 'VISA'
        ]
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId'
        }
      }
    }
  ]
};

const paymentDetails = {
  total: {
    amount: {
      currency: 'USD',
      value: '14.95',
    },
  },
};

const paymentMethods = [
  {
    supportedMethods: 'google_pay',
    data: baseGooglePayRequest,
  },
];

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? '#121212' : '#F3F3F3',
  };

  const checkCanMakePayment = () => {
    const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails);
    paymentRequest.canMakePayment().then((canMakePayment) => {
      if (canMakePayment) {
        paymentRequest.show().then((response) => {
          // Send 'token' to your payment service provider (PSP)
          console.log(response);
        });
      } else {
        console.log('Google Pay unavailable');
      }
    });
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <View style={styles.container}>
        <Text style={styles.title}>Google Pay Codelab</Text>
        <GooglePayButton
          style={styles.googlepaybutton}
          onPress={checkCanMakePayment}
          allowedPaymentMethods={baseGooglePayRequest.allowedPaymentMethods}
          theme={GooglePayButtonConstants.Themes.Dark}
          type={GooglePayButtonConstants.Types.Buy}
          radius={4}
        />
        <Text>Transaction info and errors will be logged to the console.</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 24,
  },
  title: {
    fontSize: 24,
    fontWeight: '600',
    marginBottom: 24,
  },
  googlepaybutton: {
    width: 200,
    height: 48,
  },
});

export default App;

Penjelasan kode

  1. paymentDetails menjelaskan transaksi yang harus diproses.
  2. paymentMethods mengonfigurasi metode yang didukung; untuk Google Pay, gunakan google_pay dengan baseGooglePayRequest.
  3. checkCanMakePayment menampilkan halaman pembayaran jika tersedia dan mencatat responsnya.

6. Kesimpulan

Selamat, Anda telah menyelesaikan Codelab ini. Anda telah mempelajari cara mengintegrasikan Google Pay API ke aplikasi React Native untuk Android.

Menjalankan project

Jalankan perintah berikut untuk memulai aplikasi Anda:

npx react-native run-android

Tujuan berikutnya

Referensi lainnya