One-Tap-Zahlung mit Ihrer Website: Erleichtern Sie Zahlungen mit Google Pay

Integration von Google Pay in Ihre Website: Eine Schritt-für-Schritt-Anleitung

Wenn Sie Google Pay für nahtlose Transaktionen in Ihre Website integrieren möchten, führt Sie dieser Leitfaden durch den Prozess. Unabhängig davon, ob Sie ein kleines Unternehmen oder ein großes Unternehmen sind, kann diese Integration dazu beitragen, Ihren Zahlungsprozess zu optimieren und Kunden den Abschluss ihrer Einkäufe zu erleichtern.

Voraussetzungen:

Bevor Sie beginnen, stellen Sie sicher, dass Folgendes vorhanden ist:

1. Händlerverifizierung: Stellen Sie sicher, dass Ihr Unternehmen ein verifizierter UPI-Händler ist.
2. API-Zugriff: Besorgen Sie sich die erforderlichen APIs von Ihrer Bank, um den Zahlungsstatus zu überprüfen.
3. Eindeutige Transaktions-ID: Jede Transaktion muss eine eindeutige Transaktions-ID verwenden, um eine sichere Verarbeitung zu gewährleisten.

Einrichtungsprozess:

1. Melden Sie sich an

Registrieren Sie Ihr Unternehmen in der Google Pay- und Wallet-Konsole und akzeptieren Sie die Nutzungsbedingungen. Dadurch erhalten Sie Zugriff auf die Tools, die Sie zur Integration von Google Pay in Ihre Website benötigen.

2. Zahlungsmethode erstellen

Verwenden Sie JavaScript, um ein Zahlungsmethodenobjekt mit den erforderlichen UPI-Feldern wie pa, pn, tr, mc und am zu erstellen. Hier ist ein Beispiel:

const supportedInstruments = [{
  supportedMethods: 'https://tez.google.com/pay',
  data: {
    pa: 'merchant-vpa@xxx',
    pn: 'Merchant Name',
    tr: 'uniqueTransactionID',
    mc: '1234', // Merchant category code
    am: 'orderAmount',
    cu: 'INR', // Currency
  },
}];

3. Bestelldetails definieren

Als nächstes definieren Sie den Bestellbetrag und die Währung innerhalb eines Detailobjekts:

const details = {
  total: {
    label: 'Total',
    amount: { currency: 'INR', value: 'orderAmount' }
  }
};

4. Erstellen Sie ein Zahlungsanforderungsobjekt

Erstellen Sie ein PaymentRequest-Objekt mit der unterstützten Zahlungsmethode und den Bestelldetails:

let request = new PaymentRequest(supportedInstruments, details);

5. Überprüfen Sie die Zahlungsbereitschaft

Verwenden Sie die Methode canMakePayment(), um zu überprüfen, ob der Benutzer Zahlungen leisten kann:

request.canMakePayment().then(function(result) {
  if (result) {
    // User can make payment
  } else {
    // Handle payment unavailability
  }
});

6. Zahlungs-UI anzeigen

Initiieren Sie den Zahlungsvorgang, indem Sie die Methode show() für das PaymentRequest-Objekt aufrufen:

request.show().then(function(paymentResponse) {
  // Process the payment response
}).catch(function(err) {
  console.error('Payment failed', err);
});

7. Behandeln Sie die Zahlungsantwort

Konvertieren Sie die Zahlungsantwort in JSON und senden Sie sie zur Validierung anhand der API Ihrer Bank an Ihren Server:

function processResponse(paymentResponse) {
  fetch('/your-server-endpoint', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(paymentResponse)
  }).then(function(response) {
    // Handle server response
  });
}

8. Serverüberprüfung

Validieren Sie abschließend die Zahlungsantwort, indem Sie mit der API Ihrer Bank prüfen, ob die Transaktion legitim ist, bevor Sie die Bestellung ausführen.

Testen

Stellen Sie sicher, dass Sie die Implementierung gründlich mit Chrome für Android testen und den Transaktionsfluss von der Initiierung bis zum Abschluss überprüfen.

Schauen Sie sich die Demoseite an, die ich auf Netlify bereitgestellt habe. Sie können zwar keine Zahlung vornehmen, da ich kein Händler bin, aber ich habe es mit dem Merchant VPA des Unternehmens getestet und es funktioniert einwandfrei.

Die nächste Herausforderung: Google Pay mit WooCommerce integrieren

Als E-Commerce-Entwickler habe ich mich kürzlich der Herausforderung gestellt, Google Pay in unsere WooCommerce-Website zu integrieren. Unser Ziel war es, den Zahlungsprozess zu vereinfachen und ihn so nahtlos zu gestalten, wie es Benutzer auf großen Plattformen wie Flipkart erleben.

Die Herausforderung: Probleme bei der Platzierung der Schaltflächen

Anfangs hatten wir Schwierigkeiten, die Google Pay-Schaltfläche auf der Checkout-Seite zu platzieren. Unser Projektleiter schlug eine innovative Lösung vor: Anstelle einer separaten Schaltfläche haben wir uns entschieden, Google Pay als Standard-Optionsschaltfläche in die WooCommerce-Zahlungsmethoden zu integrieren.

Unsere Implementierung – Google Pay UPI Intent Flow in WooCommerce

Wir haben ein benutzerdefiniertes Zahlungs-Gateway-Plugin für WooCommerce erstellt. Hier ist eine Übersicht:

Voraussetzungen:

• Eine WordPress-Website mit installiertem WooCommerce
• Grundkenntnisse in PHP und JavaScript
• Zugriff auf Ihr WordPress-Theme und Ihre Plugin-Dateien

Schritt 1: Einrichten des benutzerdefinierten Zahlungsgateways

Erstellen Sie ein benutzerdefiniertes Zahlungsgateway für Google Pay. Erstellen Sie zunächst eine neue Datei mit dem Namen „custom-gateway.php“ in Ihrem Plugin-Verzeichnis:

<?php
/*
Plugin Name: Google Pay
Description: Google Pay Payment integration for WooCommerce with custom payment selector.
Version: 1.1.0
Author: Kamesh
Author URI: Your website link/
Text Domain: google-pay-integration
Domain Path: /languages
*/

add_action('plugins_loaded', 'woocommerce_myplugin', 0);
function woocommerce_myplugin(){
    if (!class_exists('WC_Payment_Gateway'))
        return;

    include(plugin_dir_path(__FILE__) . 'class-gateway.php');
}

add_filter('woocommerce_payment_gateways', 'add_my_custom_gateway');

function add_my_custom_gateway($gateways) {
  $gateways[] = 'My_Custom_Gateway';
  return $gateways;
}

Diese Datei legt die Grundstruktur unseres Plugins fest und enthält die Haupt-Gateway-Klasse.

Schritt 2: Erstellen der Gateway-Klasse

Erstellen Sie nun die Datei class-gateway.php:

<?php
class My_Custom_Gateway extends WC_Payment_Gateway
{
    public function __construct()
    {
        $this->id = 'my_custom_gateway';
        $this->method_title = __('Google Pay', 'my-custom-gateway');
        $this->method_description = __('Accept payments through Google Pay', 'my-custom-gateway');

        $this->init_form_fields();
        $this->init_settings();

        $this->title = $this->get_option('title');
        $this->description = $this->get_option('description');
        $this->icon = plugins_url('/asset/GPay_Acceptance_Mark_800.png', __FILE__);

        if (!$this->is_android_device()) {
            $this->enabled = 'no';
        }

        if ($this->is_gsa_device()) {
            $this->enabled = 'no';
        }
    }

    public function process_payment($order_id)
    {
        $order = wc_get_order($order_id);
        $order->update_status('pending', __('Awaiting Google Pay payment', 'my-custom-gateway'));

        $processing_page = get_page_by_path('payment-processing');
        if ($processing_page) {
            return array(
                'result' => 'success',
                'redirect' => add_query_arg('order_id', $order_id, get_permalink($processing_page->ID)),
            );
        } else {
            wc_add_notice(__('Payment processing page not found. Please contact the administrator.', 'my-custom-gateway'), 'error');
            return;
        }
    }
}

Diese Klasse erweitert das WooCommerce-Zahlungsgateway und übernimmt die grundlegende Einrichtung und Verarbeitung der Google Pay-Zahlung.

Schritt 3: Erstellen der Zahlungsabwicklungsseite

Erstellen Sie eine neue Seitenvorlage mit dem Namen page-zahlungsverarbeitung.php in Ihrem Theme-Verzeichnis:

<?php
/*
Template Name: Payment Processing
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Processing Payment</title>
    <?php wp_head(); ?>
</head>
<body>
    <script>
        jQuery(document).ready(function($) {
            var orderId = <?php echo $order_id; ?>;
            var isProcessing = true;

            function handlePayAndroid(orderId, price) {
                const amount = Number(price);
                if (!window.PaymentRequest) {
                    console.log('Web payments are not supported in this browser.');
                    return;
                }

                const supportedInstruments = [{
                    supportedMethods: ['https://tez.google.com/pay'],
                    data: {
                        pa: 'merchant-vpa@xxx',
                        pn: 'Merchant Name',
                        tr: generateTransactionReferenceID(),//replace with your generating transaction id
                        url: '<?php echo add_query_arg('order_id', "' + orderId + '", get_permalink(page id)); ?>',//replace with your actual page id 
                        mc: '5977',
                        tn: orderId,
                    },
                }];

                const details = {
                    total: {
                        label: 'Total (including shipping)',
                        amount: {
                            currency: 'INR',
                            value: amount.toFixed(2)
                        }
                    },
                };
            }

            handlePay(orderId);
        });
    </script>
    <?php wp_footer(); ?>
</body>
</html>

Diese Seitenvorlage verwaltet den Google Pay UPI Intent-Ablauf und verarbeitet die Zahlung.

Schritt 4: Blockintegration implementieren

Um die Kompatibilität mit WooCommerce-Blöcken sicherzustellen, erstellen Sie eine class-block.php-Datei:

<?php
use Automattic\WooCommerce\Blocks\

Payments\Integrations\AbstractPaymentMethodType;

class WC_Google_Pay_Integration extends AbstractPaymentMethodType
{
    public function initialize()
    {
        // Set up the payment method integration
        add_filter('woocommerce_blocks_payment_method_type_registration', function ($gateways) {
            $gateways['google_pay'] = $this;
            return $gateways;
        });
    }

    public function get_name()
    {
        return 'google_pay';
    }

    public function is_active()
    {
        return true;
    }
}

$wc_google_pay_integration = new WC_Google_Pay_Integration();
$wc_google_pay_integration->initialize();

Step 5 : Testing and Deployment

Test the plugin in your staging environment before deploying it to production. Ensure that all functionalities work as expected, especially the payment processing page.

Here i didn't attach the Successful payment in the gpay because of the security

Integrating Google Pay with your WooCommerce site can greatly enhance your customer’s shopping experience by providing them with a faster, more secure payment option. With this integration, you can simplify the checkout process and potentially increase your conversion rates.

This blog post covers the essential steps to integrate Google Pay into a website and WooCommerce, along with the challenges and solutions I encountered during the process.

Comparison with Flipkart

While our solution achieves the goal of integrating Google Pay, there are some differences compared to how Flipkart handle one-tap payments:

Payment Flow:

• Redirects to a separate processing page, which may add an extra step but allows for more control over the payment flow.

Integration Depth:

• Flipkart : Likely have deeper integration with Google Pay's API, possibly using advanced features.
• Our Solution: Uses the standard Web Payment Request API, which is more accessible for smaller e-commerce sites but may lack some advanced features.

Advantages of Our Approach

While our implementation differs from major e-commerce platforms, it offers several benefits:

1. Ease of Integration: Works within the existing WooCommerce framework.
2. Flexibility: Can be easily adapted to different WooCommerce themes.
3. Familiar UX: Maintains consistency with other WooCommerce payment methods.
4. Cost-Effective: Doesn't require extensive custom development.

Official Documentation link

Additional Features

1. Automatically Generate a Transaction ID:

   • Ensuring each transaction has a unique ID is crucial for tracking and validating payments. In our implementation, the transaction ID is automatically generated using a custom function. This ensures that no two transactions have the same identifier, which is vital for both security and record-keeping.
   • Example:

    function generateTransactionReferenceID() {
        return 'TXN' + Math.random().toString(36).substr(2, 9).toUpperCase();
    }
   

• This function generates a unique alphanumeric string that can be used as a transaction reference ID for each payment.

1. Compatibility Handling:

   • The Google Pay implementation provided in their documentation is primarily compatible with Chrome on Android devices. To ensure a smooth user experience, we’ve implemented a feature that disables Google Pay for non-compatible devices automatically. This prevents users on unsupported platforms from encountering errors or issues during the checkout process.
   • Example:

    if (!window.PaymentRequest || !navigator.userAgent.includes('Android')) {
        // Disable Google Pay option
    }
   

• This check ensures that the Google Pay option is only available for users on compatible devices, providing a seamless payment experience.

1. Bank API and Google Pay Issues:
   • During our implementation, we encountered some issues with the bank's API and Google Pay integration. To address this, we reached out to the Google Pay developer team for support. The team is currently investigating the issue, and we are working closely with them to resolve it. Despite these challenges, the integration has been successful and has already generated approximately ₹1 lakh in revenue within the first week.
   • This emphasizes the importance of ongoing support and communication with service providers when integrating complex payment solutions.

Transaction Fees:

Razorpay and PhonePe charge a fee of 2% + GST on all successful transactions.

Regarding Google Pay (Gpay), it can indeed offer lower transaction fees, especially for UPI-based transactions. UPI transactions typically have lower or no fees, which can help reduce overall costs compared to traditional payment gateways.

Wenn Sie die Transaktionsgebühren für Ihr Unternehmen minimieren möchten, könnte die Integration von Gpay für UPI-Zahlungen eine kostengünstige Lösung sein.

Abschluss

Obwohl unsere Implementierung möglicherweise nicht so rational ist wie die von Flipkart, bietet sie eine praktische Lösung für die Integration von Google Pay in eine WooCommerce-Website. Es bringt die Funktionalität mit den Einschränkungen der Arbeit innerhalb des WordPress-Ökosystems in Einklang und bietet Kunden eine bequeme Zahlungsoption, ohne dass eine vollständige Überarbeitung des Checkout-Prozesses erforderlich ist.

Die Implementierung des Google Pay UPI Intent-Flows in WordPress WooCommerce umfasst mehrere Schritte, von der Erstellung eines benutzerdefinierten Zahlungsgateways über die Abwicklung des Zahlungsprozesses bis hin zur Sicherstellung der Kompatibilität mit WooCommerce-Blöcken. Wenn Sie dieser Anleitung folgen, können Sie Ihren Kunden eine nahtlose und sichere Zahlungsoption mit Google Pay anbieten.

Denken Sie daran, gründlich in einer Staging-Umgebung zu testen, bevor Sie es auf Ihrer Live-Site bereitstellen. Stellen Sie außerdem sicher, dass Sie bei der Abwicklung von Zahlungen alle erforderlichen Sicherheitsstandards und -vorschriften einhalten.

Durch die kontinuierliche Weiterentwicklung unseres Ansatzes wollen wir die Lücke zwischen unserer Implementierung und denen großer E-Commerce-Akteure schließen und sind stets bestrebt, unseren Kunden das bestmögliche Benutzererlebnis zu bieten.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonOne-Tap-Zahlung mit Ihrer Website: Erleichtern Sie Zahlungen mit Google Pay. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!