Android पर Jetpack Compose के लिए Google Pay API

1. परिचय

आपको क्या बनाना है

इस कोडलैब को पूरा करने के बाद, आपके पास Jetpack Compose का एक ऐसा ऐप्लिकेशन होगा जिसमें Android के लिए Google Pay इंटिग्रेशन काम कर रहा होगा. यह प्रोजेक्ट, पेमेंट टोकन को वापस पाता है. इसे पेमेंट की सेवा देने वाली कंपनी को प्रोसेस करने के लिए भेजा जा सकता है.

आपको क्या सीखने को मिलेगा

Google Pay Jetpack Compose लाइब्रेरी को इंस्टॉल और कॉन्फ़िगर करने का तरीका
Google Pay बटन को कैसे दिखाया जाए और क्लिक को कैसे हैंडल किया जाए
Google Pay से पेमेंट टोकन का अनुरोध करने का तरीका

आपको किन चीज़ों की ज़रूरत होगी

Android Studio का नया स्टेबल वर्शन इंस्टॉल हो.
Android SDK और Android Studio में सेट अप किया गया कोई एम्युलेटर या डिवाइस.
प्रोडक्शन के लिए, आपको Google Pay merchantId की ज़रूरत होगी. Google Pay और Wallet Console पर रजिस्टर करने में सिर्फ़ एक मिनट लगता है. इसलिए, इसे अभी पूरा कर लें.

2. Jetpack Compose प्रोजेक्ट बनाना

प्रोजेक्ट फ़ाइलें बनाना

Android Studio में, gpay-compose नाम का नया Jetpack Compose प्रोजेक्ट बनाएं:
- Android Studio खोलें और New Project को चुनें.
- Empty Activity (Jetpack Compose) टेंप्लेट चुनें.
- नाम: gpay-compose, पैकेज का नाम: com.example.gpay.
- भाषा: Kotlin, कम से कम SDK: API 21+.
- प्रोजेक्ट जनरेट करने के लिए, 'हो गया' पर क्लिक करें.

Google Pay Compose Button की डिपेंडेंसी जोड़ें.अपनी app/build.gradle(.kts) फ़ाइल में, यह जोड़ें:

dependencies {
    implementation("com.google.pay.button:compose-pay-button:1.0.0")
}

Groovy DSL:

dependencies {
    implementation 'com.google.pay.button:compose-pay-button:1.0.0'
}

Google Play services Wallet की डिपेंडेंसी जोड़ें (Google Pay शीट खोलने के लिए):अपनी app/build.gradle(.kts) फ़ाइल में, यह डिपेंडेंसी जोड़ें:
```
dependencies {
    implementation("com.google.android.gms:play-services-wallet:19.3.0")
}
```
अगर आपका प्रोजेक्ट Groovy DSL का इस्तेमाल करता है, तो इसका इस्तेमाल करें:
```
dependencies {
    implementation 'com.google.android.gms:play-services-wallet:19.3.0'
}
```

Android Studio में MainActivity.kt खोलें और कॉन्टेंट को यहां दिए गए कम से कम Compose ऐप्लिकेशन के स्केफ़ोल्ड से बदलें. हम बटन को इसके बाद कनेक्ट करेंगे:

package com.example.gpay

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                    // Google Pay button added in the next section
                }
            }
        }
    }
}

3. Google Pay को कॉन्फ़िगर करना

Google Pay से पेमेंट का अनुरोध करने के लिए, अनुरोध ऑब्जेक्ट की ज़रूरत होती है. यहां baseGooglePayRequest के तौर पर तय किए गए ऑब्जेक्ट में, सभी अनुरोधों के लिए कम से कम सामान्य सेटिंग शामिल होती हैं. अनुरोध के आधार पर अतिरिक्त सेटिंग जोड़ी जाएंगी. हम इस कोडलैब में इनकी समीक्षा करेंगे.

MainActivity.kt में Google Pay के कॉन्फ़िगरेशन कॉन्स्टेंट जोड़ें. इनका इस्तेमाल अगले चरण में किया जाएगा:

private const val merchantId = "12345678901234567890"

// This is the base configuration for all Google Pay payment data requests.
private val 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"
            }
          }
        }
      ],
      "merchantInfo": {
        "merchantId": "$merchantId"
      }
    }
""".trimIndent()

संसाधन

एपीआई के बारे में जानकारी: Google Pay API के अनुरोध ऑब्जेक्ट के बारे में दस्तावेज़
एपीआई रेफ़रंस: अनुमति देने के तरीकों, कार्ड नेटवर्क, और टोकनाइज़ेशन की खास बातों के बारे में ज़्यादा जानने के लिए, PaymentMethod देखें. इसमें गेटवे की सही वैल्यू भी शामिल है.

4. Google Pay बटन जोड़ना

Google Pay बटन को रेंडर करने के लिए, Compose Pay Button का इस्तेमाल करें. साथ ही, Google Pay शीट खोलने के लिए, Wallet API का इस्तेमाल करें.

MainActivity.kt के पूरे कॉन्टेंट को इस पूरे उदाहरण से बदलें. इसमें कॉन्फ़िगरेशन, बटन, और पेमेंट फ़्लो शामिल है:

package com.example.gpay

import android.os.Bundle
import androidx.activity.result.ActivityResultLauncher
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import com.google.android.gms.common.api.CommonStatusCodes
import com.google.android.gms.tasks.Task
import com.google.android.gms.wallet.contract.TaskResultContracts.GetPaymentDataResult
import com.google.android.gms.wallet.*
import com.google.pay.button.ButtonTheme
import com.google.pay.button.ButtonType
import com.google.pay.button.PayButton
import org.json.JSONObject

private const val merchantId = "12345678901234567890"

// Base Google Pay request used for both the button and the Wallet request
private val 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"
            }
          }
        }
      ],
      "merchantInfo": {
        "merchantId": "$merchantId"
      }
    }
""".trimIndent()

class MainActivity : ComponentActivity() {
  private val paymentDataLauncher = registerForActivityResult(GetPaymentDataResult()) { taskResult ->
    when (taskResult.status.statusCode) {
      CommonStatusCodes.SUCCESS -> {
        handlePaymentData(taskResult.result!!)
      }
      //CommonStatusCodes.CANCELED -> The user canceled
      //CommonStatusCodes.DEVELOPER_ERROR -> The API returned an error (it.status: Status)
      //else -> Handle internal and other unexpected errors
    }
  }
  private lateinit var paymentsClient: PaymentsClient

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    // Create the PaymentsClient
    paymentsClient = Wallet.getPaymentsClient(
      this,
      Wallet.WalletOptions.Builder()
        .setEnvironment(WalletConstants.ENVIRONMENT_TEST) // Switch to PRODUCTION when ready
        .build()
    )

    // Derive allowedPaymentMethods for the button from baseGooglePayRequest
    val allowedPaymentMethods = JSONObject(baseGooglePayRequest)
      .getJSONArray("allowedPaymentMethods")
      .toString()

    setContent {
      Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        PayButton(
          onClick = { requestPayment(paymentDataLauncher) },
          allowedPaymentMethods = allowedPaymentMethods,
          type = ButtonType.Pay,
          theme = ButtonTheme.Light
        )
      }
    }
  }

  private fun requestPayment(launcher: ActivityResultLauncher<Task<PaymentData>>) {
    // Build a PaymentDataRequest from the base request by adding transaction info
    val requestJson = JSONObject(baseGooglePayRequest).apply {
      put("transactionInfo", JSONObject().apply {
        put("totalPrice", "14.95")
        put("totalPriceStatus", "FINAL")
        put("countryCode", "US")
        put("currencyCode", "USD")
      })
    }
    val request = PaymentDataRequest.fromJson(requestJson.toString())
    val task = paymentsClient.loadPaymentData(request)
    task.addOnCompleteListener(paymentDataLauncher::launch)
  }

  private fun handlePaymentData(paymentData: PaymentData?) {
    val json = paymentData?.toJson() ?: return
    val paymentMethodData = JSONObject(json).getJSONObject("paymentMethodData")
    val tokenizationData = paymentMethodData.getJSONObject("tokenizationData")
    val token = tokenizationData.getString("token")
    // Send 'token' to your payment service provider (PSP)
    println("Payment token: $token")
  }
}

5. पेमेंट का अनुरोध करना

Google Pay बटन दबाने पर, requestPayment(...) आपके baseGooglePayRequest में transactionInfo जोड़कर PaymentDataRequest बनाता है. साथ ही, Google Pay शीट खोलता है और पेमेंट टोकन दिखाता है.

खास बातें

बटन: PayButton, Google Pay के नेटिव बटन को रेंडर करता है.
क्लाइंट: PaymentsClient को TEST या PRODUCTION के साथ कॉन्फ़िगर किया गया है.
लॉन्च: loadPaymentData का इस्तेमाल करें और ज़रूरत पड़ने पर IntentSender का इस्तेमाल करके समस्या हल करें.
टोकन: PaymentData.toJson() को पार्स करके paymentMethodData.tokenizationData.token निकालें और इसे अपने पीएसपी को भेजें.

6. नतीजा

इस कोडलैब को पूरा करने के लिए बधाई! आपने Android के लिए Jetpack Compose ऐप्लिकेशन में Google Pay API को इंटिग्रेट करने का तरीका जान लिया है.

प्रोजेक्ट चलाना

अपना ऐप्लिकेशन शुरू करने के लिए, Android Studio (Run > Run 'app') से प्रोजेक्ट चलाएं.

यहां से कहां जाएं

इंटिग्रेशन की चेकलिस्ट देखें

अन्य संसाधन

Discord पर #payments चैनल में बातचीत में शामिल हों
X पर @GooglePayDevs को फ़ॉलो करें
YouTube पर Google Pay से जुड़े वीडियो देखना