Google Pay API สำหรับ React Native ใน Android

1. บทนำ

สิ่งที่คุณจะสร้าง

เมื่อทำ Codelab นี้เสร็จแล้ว คุณจะมีแอป React Native ที่ใช้งานได้ขั้นต่ำซึ่งผสานรวม Google Pay สำหรับ Android ที่ใช้งานได้ โปรเจ็กต์นี้จะดึงโทเค็นการชำระเงินซึ่งอาจส่งไปยังผู้ให้บริการชำระเงินเพื่อประมวลผล

สิ่งที่คุณจะได้เรียนรู้

  • วิธีติดตั้งและกำหนดค่าไลบรารี Google Pay React Native
  • วิธีแสดงปุ่ม Google Pay และจัดการการคลิก
  • วิธีขอโทเค็นการชำระเงินจาก Google Pay

สิ่งที่คุณต้องมี

  • โปรแกรมแก้ไขข้อความที่คุณเลือกเพื่อแก้ไขไฟล์ JavaScript
  • สภาพแวดล้อมในการพัฒนา React Native ที่ตั้งค่าไว้สำหรับ Android
  • สำหรับเวอร์ชันที่ใช้งานจริง คุณจะต้องมี Google Pay merchantId การลงทะเบียนใน Google Pay และ Wallet Console ใช้เวลาเพียง 1 นาที ดังนั้นคุณควรดำเนินการให้เรียบร้อยในตอนนี้

2. สร้างโปรเจ็กต์ React Native

สร้างไฟล์โปรเจ็กต์

  1. สร้างโปรเจ็กต์ React Native ใหม่ชื่อ googlepayrn
    npx @react-native-community/cli@latest init googlepayrn
  2. ติดตั้งไลบรารี Google Pay React Native
    cd googlepayrn
npm install @google/react-native-make-payment
  3. เปิด App.tsx ใน IDE ที่คุณเลือก แล้วแทนที่เนื้อหาด้วยโค้ดต่อไปนี้
    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

คำขอการชำระเงินด้วย Google Pay ต้องมีออบเจ็กต์คำขอ ออบเจ็กต์ที่กำหนดไว้ที่นี่เป็น baseGooglePayRequest มีการตั้งค่าทั่วไปขั้นต่ำสำหรับคำขอทั้งหมด ระบบจะเพิ่มการตั้งค่าเพิ่มเติมตามคำขอที่ส่งมา ซึ่งเราจะตรวจสอบใน Codelab นี้

เพิ่มค่าคงที่ของการกำหนดค่า Google Pay ลงใน 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'
        }
      }
    }
  ]
};

แหล่งข้อมูล

  • เอกสารอ้างอิง API: เอกสารประกอบเกี่ยวกับออบเจ็กต์คำขอของ Google Pay API
  • ข้อมูลอ้างอิง API: ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการให้สิทธิ์ที่อนุญาต เครือข่ายบัตรที่อนุญาต และข้อกำหนดการแปลงโทเค็น รวมถึงค่าเกตเวย์ที่เหมาะสมได้ที่ PaymentMethod

4. ส่งคำขอชำระเงิน

เมื่อกดปุ่ม Google Pay ระบบจะสร้างและแสดงคำขอการชำระเงิน

เพิ่มรายละเอียดการชำระเงินและวิธีการชำระเงินใน App.tsx ดังนี้

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

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

5. เพิ่มปุ่ม Google Pay

ไลบรารี react-native-make-payment มีคอมโพเนนต์ปุ่ม Google Pay แบบเนทีฟ

  1. เพิ่มการนำเข้าที่ด้านบนของ App.tsx ดังนี้
import { GooglePayButton, GooglePayButtonConstants, PaymentRequest } from '@google/react-native-make-payment';
  1. เพิ่มตัวแฮนเดิลการคลิกภายในคอมโพเนนต์ 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. เพิ่มปุ่มและสไตล์ลงใน JSX และสไตล์ของปุ่ม
<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 หลังจากเพิ่มปุ่มและตัวแฮนเดิลแล้ว

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;

คำอธิบายโค้ด

  1. paymentDetails อธิบายธุรกรรมที่ควรประมวลผล
  2. paymentMethods จะกำหนดค่าวิธีการที่รองรับ สำหรับ Google Pay ให้ใช้ google_pay กับ baseGooglePayRequest
  3. checkCanMakePayment จะแสดงชีตการชำระเงินเมื่อพร้อมใช้งานและบันทึกการตอบกลับ

6. บทสรุป

ขอแสดงความยินดีที่ทำ Codelab นี้เสร็จสมบูรณ์ คุณได้เรียนรู้วิธีผสานรวม Google Pay API เข้ากับแอป React Native สำหรับ Android แล้ว

เรียกใช้โปรเจ็กต์

เรียกใช้คำสั่งต่อไปนี้เพื่อเริ่มแอป

npx react-native run-android

ขั้นตอนถัดไป

แหล่งข้อมูลเพิ่มเติม