Paiement en un seul clic avec votre site Web : facilitez les paiements avec Google Pay

Intégrer Google Pay à votre site Web : un guide étape par étape

Si vous souhaitez intégrer Google Pay à votre site Web pour des transactions fluides, ce guide vous guidera tout au long du processus. Que vous soyez une petite ou une grande entreprise, cette intégration peut vous aider à rationaliser votre processus de paiement, permettant ainsi aux clients de finaliser plus facilement leurs achats.

Conditions préalables :

Avant de commencer, assurez-vous d'avoir mis en place les éléments suivants :

1. Vérification du marchand : assurez-vous que votre entreprise est un marchand UPI vérifié.
2. Accès API : obtenez les API nécessaires auprès de votre banque pour vérifier les statuts de paiement.
3. ID de transaction unique : chaque transaction doit utiliser un identifiant de transaction unique pour garantir un traitement sécurisé.

Processus de configuration :

1. Inscrivez-vous

Enregistrez votre entreprise sur la console Google Pay et Wallet et acceptez les conditions d'utilisation. Cela vous donnera accès aux outils dont vous avez besoin pour intégrer Google Pay à votre site Web.

2. Créer un mode de paiement

Utilisez JavaScript pour créer un objet de mode de paiement avec les champs UPI nécessaires tels que pa, pn, tr, mc et am. Voici un exemple :

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. Définir les détails de la commande

Ensuite, définissez le montant de la commande et la devise dans un objet de détails :

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

4. Créer un objet de demande de paiement

Construisez un objet PaymentRequest en utilisant le mode de paiement pris en charge et les détails de la commande :

let request = new PaymentRequest(supportedInstruments, details);

5. Vérifier l'état de préparation du paiement

Utilisez la méthode canMakePayment() pour vérifier si l'utilisateur peut effectuer des paiements :

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

6. Afficher l'interface utilisateur de paiement

Initiez le processus de paiement en appelant la méthode show() sur l'objet PaymentRequest :

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

7. Gérer la réponse au paiement

Convertissez la réponse de paiement en JSON et envoyez-la à votre serveur pour validation par rapport à l'API de votre banque :

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. Vérification du serveur

Enfin, validez la réponse de paiement en vérifiant auprès de l'API de votre banque pour vous assurer que la transaction est légitime avant d'exécuter la commande.

Essai

Assurez-vous de tester minutieusement la mise en œuvre à l'aide de Chrome pour Android et de vérifier le flux des transactions du lancement à la fin.

Consultez le site de démonstration que j'ai déployé sur Netlify. Bien que vous ne puissiez pas effectuer de paiement puisque je ne suis pas un commerçant, je l'ai testé en utilisant le Merchant VPA de l'entreprise, et cela fonctionne bien.

Le prochain défi : intégrer Google Pay à WooCommerce

En tant que développeur e-commerce, j'ai récemment relevé le défi de l'intégration de Google Pay dans notre site WooCommerce. Notre objectif était de simplifier le processus de paiement, le rendant aussi transparent que ce que les utilisateurs expérimentent sur les principales plateformes comme Flipkart.

Le défi : problèmes de placement des boutons

Au départ, nous avons rencontré des difficultés pour placer le bouton Google Pay sur la page de paiement. Notre chef de projet a suggéré une solution innovante : au lieu d'un bouton séparé, nous avons décidé d'intégrer Google Pay comme option de bouton radio par défaut dans les méthodes de paiement WooCommerce.

Notre implémentation - Flux d'intentions Google Pay UPI dans WooCommerce

Nous avons créé un plugin de passerelle de paiement personnalisé pour WooCommerce. Voici un aperçu :

Conditions préalables :

• Un site WordPress avec WooCommerce installé
• Connaissance de base de PHP et JavaScript
• Accès à votre thème WordPress et aux fichiers de votre plugin

Étape 1 : Configuration de la passerelle de paiement personnalisée

Créez une passerelle de paiement personnalisée pour Google Pay. Commencez par créer un nouveau fichier appelé custom-gateway.php dans le répertoire de votre plugin :

<?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;
}

Ce fichier définit la structure de base de notre plugin et inclut la classe de passerelle principale.

Étape 2 : Création de la classe Gateway

Maintenant, créez le fichier 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;
        }
    }
}

Cette classe étend la passerelle de paiement WooCommerce et gère la configuration et le traitement de base du paiement Google Pay.

Étape 3 : Création de la page de traitement des paiements

Créez un nouveau modèle de page appelé page-payment-processing.php dans votre répertoire de thème :

<?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>

Ce modèle de page gère le flux d'intention UPI de Google Pay et traite le paiement.

Étape 4 : implémentation de l'intégration des blocs

Pour assurer la compatibilité avec les blocs WooCommerce, créez un fichier class-block.php :

<?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.

Si vous cherchez à minimiser les frais de transaction pour votre entreprise, l'intégration de Gpay pour les paiements UPI pourrait être une solution rentable.

Conclusion

Bien que notre mise en œuvre ne soit peut-être pas aussi simple que celle de Flipkart, elle fournit une solution pratique pour intégrer Google Pay dans un site WooCommerce. Il équilibre les fonctionnalités avec les contraintes liées au travail au sein de l'écosystème WordPress, offrant aux clients une option de paiement pratique sans nécessiter une refonte complète du processus de paiement.

La mise en œuvre du flux d'intention Google Pay UPI dans WordPress WooCommerce implique plusieurs étapes, de la création d'une passerelle de paiement personnalisée à la gestion du processus de paiement et à la garantie de la compatibilité avec les blocs WooCommerce. En suivant ce guide, vous pouvez proposer à vos clients une option de paiement transparente et sécurisée via Google Pay.

N'oubliez pas de tester minutieusement dans un environnement de test avant de déployer sur votre site en ligne. Assurez-vous également de respecter toutes les normes et réglementations de sécurité nécessaires lors du traitement des paiements.

En affinant continuellement notre approche, nous visons à réduire l'écart entre notre mise en œuvre et celle des principaux acteurs du e-commerce, en nous efforçant toujours d'offrir la meilleure expérience utilisateur possible à nos clients.

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!