Android'de React Native için Google Pay API

1. Giriş

Ne oluşturacaksınız?

Bu codelab'i tamamladığınızda, Android için çalışan bir Google Pay entegrasyonuna sahip, minimum düzeyde işlevsel bir React Native uygulamanız olacak. Bu proje, işlenmek üzere bir ödeme hizmeti sağlayıcısına gönderilebilecek bir ödeme jetonu alır.

Neler öğreneceksiniz?

  • Google Pay React Native kitaplığını yükleme ve yapılandırma
  • Google Pay düğmesini görüntüleme ve tıklamaları işleme
  • Google Pay'den ödeme jetonu isteme

İhtiyacınız olanlar

  • JavaScript dosyalarını düzenlemek için istediğiniz bir metin düzenleyici.
  • Android için ayarlanmış bir React Native geliştirme ortamı.
  • Üretim için Google Pay merchantId gerekir. Google Pay ve Cüzdan Konsolu'na kaydolmak yalnızca bir dakika sürer. Bu nedenle, kaydınızı hemen yapabilirsiniz.

2. React Native projesi oluşturma

Proje dosyaları oluşturma

  1. googlepayrn adlı yeni bir React Native projesi oluşturun.
    npx @react-native-community/cli@latest init googlepayrn
  2. Google Pay React Native kitaplığını yükleyin.
    cd googlepayrn
npm install @google/react-native-make-payment
  3. Tercih ettiğiniz IDE'de App.tsx dosyasını açın ve içeriğini aşağıdaki kodla değiştirin:
    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. Google Pay'i yapılandırma

Google Pay ödeme isteği için istek nesnesi gerekir. Burada baseGooglePayRequest olarak tanımlanan nesne, tüm istekler için minimum ortak ayarları içerir. Yapılan isteğe bağlı olarak ek ayarlar eklenecektir. Bu ayarları bu codelab'de inceleyeceğiz.

Google Pay yapılandırma sabitlerini App.tsx'ya ekleyin:

// 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'
        }
      }
    }
  ]
};

Kaynaklar

  • API Referansı: Google Pay API istek nesneleri dokümanları
  • API Referansı: İzin verilen yetkilendirme yöntemleri, izin verilen kart ağları ve uygun ağ geçidi değeri de dahil olmak üzere belirteç oluşturma spesifikasyonları hakkında daha fazla bilgi için PaymentMethod bölümüne bakın.

4. Ödeme isteğinde bulunma

Google Pay düğmesine basıldığında bir ödeme isteği oluşturulur ve gösterilir.

Ödeme ayrıntılarını ve ödeme yöntemlerini App.tsx bölümüne ekleyin:

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

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

5. Google Pay düğmesini ekleme

react-native-make-payment kitaplığı, yerel bir Google Pay düğmesi bileşeni içerir.

  1. İçe aktarma işlemini App.tsx üst kısmına ekleyin:
import { GooglePayButton, GooglePayButtonConstants, PaymentRequest } from '@google/react-native-make-payment';
  1. Tıklama işleyicisini App bileşeninin içine ekleyin:
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. Düğmeyi ve stili JSX'e ve stiline ekleyin:
<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 düğmeyi ve işleyiciyi ekledikten sonra:

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;

Kod açıklaması

  1. paymentDetails, işlenmesi gereken işlemi açıklar.
  2. paymentMethods, desteklenen yöntemleri yapılandırır. Google Pay için baseGooglePayRequest ile birlikte google_pay kullanın.
  3. checkCanMakePayment, kullanılabilir olduğunda ödeme sayfasını gösterir ve yanıtı günlüğe kaydeder.

6. Sonuç

Bu Codelab'i tamamladığınız için tebrikler. Google Pay API'yi Android için bir React Native uygulamasına nasıl entegre edeceğinizi öğrendiniz.

Projeyi yürütme

Uygulamanızı başlatmak için aşağıdaki komutu çalıştırın:

npx react-native run-android

Şimdi beni ne bekliyor?

Ek kaynaklar