Fermer

juillet 3, 2025

Intégration de la bande dans les applications Blazor

Intégration de la bande dans les applications Blazor


Apprenez à ajouter des capacités de paiement Stripe à votre application Web Blazor.

Dans cet article, je vais vous montrer le processus étape par étape que vous devez suivre pour intégrer Stripe dans vos applications basées sur le blazor. Ceci est très utile pour traiter les paiements en ligne via les cartes de débit / crédit rapidement et facilement. Commençons!

Qu’est-ce que Stripe?

Stripe est une plate-forme complète tout-en-un qui fournit des outils pour traiter en toute sécurité les paiements en ligne. Parmi ses avantages, nous pouvons souligner:

  • Création de produits avec des variations
  • Gestion des coupons
  • Génération d’abonnements
  • Automatisation de facturation

De plus, il a la possibilité d’activer un environnement de test où vous pouvez facilement simuler les transactions de vos produits, ce qui permet un développement rapide et fiable.

Intégrer les paiements de rayures dans Blazor

Nous effectuerons l’intégration des paiements via Stripe à différentes étapes, en commençant par la création d’une page de composante de rasoir avec un exemple de test, comme indiqué ci-dessous.

Créer un exemple pratique pour recevoir des paiements

La première chose que nous ferons est de configurer un projet qui simule la génération d’images à l’aide de l’IA. L’idée est qu’après avoir généré cinq images, l’utilisateur sera invité à acheter des crédits pour continuer à générer des images. Les étapes pour y parvenir sont:

  1. Créer un nouveau projet en utilisant le Application Web Blazor modèle, avec Mode de rendu interactif se mettre à Serveur et Emplacement d’interactivité se mettre à Par page / composant.
  2. Suivez les étapes 1 à 4 du guide d’installation pour les commandes de Telerik.
  3. À l’intérieur Composants | Pages dossier, créez un nouveau composant nommé Purchase.razor et ajouter le code suivant:
@page "https://www.telerik.com/"
@using Telerik.Blazor.Components
@using System.ComponentModel.DataAnnotations

@rendermode InteractiveServer

<style>
    .card-style {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border: none;
        border-radius: 10px;
        overflow: hidden;
    }

    .card-header-content {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        padding: 20px;
        text-align: center;
    }

        .card-header-content h3 {
            margin: 0;
            font-size: 1.5rem;
        }

        .card-header-content .card-price {
            margin: 5px 0 0;
            font-size: 1.2rem;
            font-weight: bold;
        }

    .card-body {
        padding: 20px;
        text-align: center;
    }

    .card-footer {
        background-color: #f7f7f7;
        padding: 15px;
        text-align: center;
    }

    .buy-button {
        font-weight: bold;
        font-size: 1rem;
        padding: 10px 20px;
    }
</style>

<div class="container" style="max-width: 800px; margin: auto; padding: 20px;">
    <h1>AI Image Generator Demo</h1>
    <div class="generator-section" style="padding: 20px; border: 1px solid #ccc; border-radius: 8px;">        
        <TelerikForm Model="@generatorInput">
            <FormValidation>
                <DataAnnotationsValidator />
            </FormValidation>
            <FormItems>
                <FormItem Field="@nameof(generatorInput.Prompt)" LabelText="Prompt">
                    <Template>
                        <TelerikTextBox @bind-Value="generatorInput.Prompt"
                                        Placeholder="Enter your prompt here"
                                        Class="full-width" />
                    </Template>
                </FormItem>
                <FormItem Field="@nameof(generatorInput.Dimensions)" LabelText="Dimensions (px)">
                    <Template>
                        <TelerikNumericTextBox @bind-Value="generatorInput.Dimensions"
                                               Min="64" Max="1024" Step="64"
                                               Class="full-width" />
                    </Template>
                </FormItem>
                <FormItem Field="@nameof(generatorInput.Style)" LabelText="Style">
                    <Template>
                        <TelerikTextBox @bind-Value="generatorInput.Style"
                                        Placeholder="Enter style"
                                        Class="full-width" />
                    </Template>
                </FormItem>
            </FormItems>
            <FormButtons></FormButtons>
        </TelerikForm>
    
        <div class="generate-button" style="text-align: center; margin-top: 20px;">
            <TelerikButton OnClick="@GenerateImage" Enabled="@(!isGenerating && generationCount < generationLimit)">
                @if (isGenerating)
                {
                    <span>Generating...</span>
                }
                else
                {
                    <span>Generate</span>
                }
            </TelerikButton>
        </div>
        
        @if (generationCount >= generationLimit)
        {
            <div class="alert alert-warning" style="margin-top: 20px; text-align: center;">
                You have reached the generation limit.
            </div>
        }
        
        @if (!string.IsNullOrEmpty(currentImageUrl))
        {
            <div class="generated-image" style="margin-top: 20px; text-align: center;">
                <img src="@currentImageUrl" alt="Generated Image" style="max-width: 100%; border: 1px solid #ddd; border-radius: 4px;" />
            </div>
        }
    </div>
    
    <div class="credits-sale-section" style="margin-top: 40px; padding: 20px; border: 1px solid #ccc; border-radius: 8px;">
        <h2 style="text-align: center;">Buy Credits</h2>
        <TelerikCard Class="card-style">
            <CardHeader>
                <div class="card-header-content">
                    <h3>1000 Credits</h3>
                    <p class="card-price">$10</p>
                </div>
            </CardHeader>
            <CardBody>
                <p>Enhance your creative journey with 1000 additional credits. Unlock more image generations and explore endless possibilities.</p>
            </CardBody>
            <CardFooter>
                <TelerikButton OnClick="@BuyCredits" ThemeColor="primary" Class="buy-button">Buy Now</TelerikButton>
            </CardFooter>
        </TelerikCard>
        
        @if (!string.IsNullOrEmpty(purchaseMessage))
        {
            <div class="alert alert-success" style="margin-top: 20px; text-align: center;">
                @purchaseMessage
            </div>
        }
    </div>
</div>

@code {    
    public class ImageGenerationInput
    {
        public string Prompt { get; set; } = string.Empty;
        public int Dimensions { get; set; } = 256;
        public string Style { get; set; } = string.Empty;
    }
    
    private ImageGenerationInput generatorInput = new ImageGenerationInput();
    
    private bool isGenerating = false;
    
    private string currentImageUrl = string.Empty;
    
    private int generationCount = 0;
    
    private int generationLimit = 5;
    
    private readonly List<string> allImageUrls = new List<string>
    {
        "https://th.bing.com/th/id/OIG3.GgMpBxUXw4K1MHTWDfwG?pid=ImgGn",
        "https://th.bing.com/th/id/OIG2.fwYLXgRzLnnm2DMcdfl1?pid=ImgGn",
        "https://th.bing.com/th/id/OIG3.80EN2JPNx7kp5VqoB5kz?pid=ImgGn",
        "https://th.bing.com/th/id/OIG2.DR0emznkughEtqI1JLl.?pid=ImgGn",
        "https://th.bing.com/th/id/OIG4.7h3EEAkofdcgjDEjeOyg?pid=ImgGn"
    };
    
    private List<string> availableImageUrls = new List<string>();
    
    private string purchaseMessage = string.Empty;

    protected override void OnInitialized()
    {        
        availableImageUrls = new List<string>(allImageUrls);
    }

    private async Task GenerateImage()
    {        
        if (generationCount >= generationLimit)
        {
            return;
        }

        isGenerating = true;
        
        await Task.Delay(1500);

        if (availableImageUrls.Count == 0)
        {
            availableImageUrls = new List<string>(allImageUrls);
        }
        
        currentImageUrl = availableImageUrls[0];

        availableImageUrls.RemoveAt(0);
        
        generationCount++;

        isGenerating = false;
    }

    private void BuyCredits()
    {        
        purchaseMessage = "Thank you for your purchase of 1000 credits!";
    }
}

Dans le code précédent, nous avons créé un composant de page Blazor utilisant des commandes Telerik pour un bel écran, rapidement réalisé grâce aux propriétés disponibles dans les commandes.

  1. Dans le Home composant, modifiez le @page Directive pour pointer une URL différente, afin que le nouveau composant devienne la page principale:
@page "/home"

Avec les étapes ci-dessus, une fois l’application démarrée, vous devriez voir un exemple comme ce qui suit:

Un exemple d'application simulant des images générées par l'IA

Maintenant que nous avons créé une page de test, voyons comment acheter des crédits à l’aide de Stripe.

Configuration d’un produit en bande

Après avoir créé l’exemple de page, accédez à votre tableau de bord Stripe pour créer un produit. Il est important d’activer le Mode de test Option située en haut à droite de votre compte avant d’apporter des modifications pour éviter d’affecter votre configuration réelle, y compris les transactions, les paramètres, etc .:

Activation du mode de test dans Stripe

Une fois le mode de test activé, accédez au Catalogue de produits Section située dans la barre latérale:

La section du catalogue de produits dans le tableau de bord Stripe

Sur Catalogue de produits page, cliquez sur le Créer un produit bouton pour commencer à créer un nouveau produit:

Sélection du bouton pour créer un nouveau produit

En cliquant sur le bouton, faire apparaître un vol où vous devez remplir les informations du produit de test. Une fois fait, appuyez sur le Ajouter le produit bouton comme indiqué ci-dessous:

Configuration d'un nouveau produit dans Stripe

Dans le cadre de la configuration du produit, notez que j’ai sélectionné le Ponctuel Option, indiquant que l’achat n’est pas un abonnement.

Après avoir ajouté le produit, vous le verrez répertorié dans le Catalogue de produits. Si vous cliquez sur le nouveau produit, vous serez emmené sur la page du produit où vous trouverez le ID de produitqui est l’identifiant du produit.

De plus, si vous cliquez sur les trois points dans les détails du prix, vous pouvez voir le ID de prixdont nous aurons besoin pour effectuer l’achat à partir de la demande Blazor:

Récupération de l'identification du produit et de l'ID de prix d'un produit dans Stripe

Je recommande de sauver les deux, comme nous les utiliserons plus tard.

Création d’une clé API pour l’accès externe aux services de rayures

Après avoir mis en place le produit à vendre, nous avons besoin d’une clé API pour accéder aux services de Stripe. Pour ce faire, accédez à Tableau de tableau de bord des développeurs à rayures.

Dans ce tableau de bord, allez au Clés API onglet où vous pouvez générer une clé pour l’accès à l’API. Tu vas voir ça sous Clés standardil y a deux types: Clé publiable et Clé secrète. Le premier est utile pour les opérations non critiques et peut être exposé en toute sécurité dans un frontend. La clé secrète, cependant, ne doit jamais être exposée et doit être stockée dans une variable d’environnement ou un emplacement sécurisé similaire.

Le tableau de bord des touches API en bande

Dans mon exemple, j’ai copié la clé secrète et l’ai stockée dans une variable d’environnement nommée Stripe__SecretKeyque j’utiliserai dans le code.

Configuration du projet pour interagir avec Stripe

Il est temps de retourner à Visual Studio et d’intégrer Stripe dans notre projet. Tout d’abord, installez le Stripe.net emballer. Ensuite, ouvrez le Program.cs fichier et ajouter la touche API obtenue à la configuration de Stripe à l’aide du ApiKey propriété comme suit:

...
StripeConfiguration.ApiKey = Environment.GetEnvironmentVariable("Stripe__SecretKey");

app.Run();

Remplacer Stripe__SecretKey avec le nom que vous avez affecté à la variable d’environnement.

Créer des pages de succès et d’annulation

Avant de mettre en œuvre la redirection vers la page de paiement, il est important de créer une page de réussite pour les achats réussis et une page d’annulation pour les achats échoués ou annulés. J’ai créé deux pages simples:

Page d’achat.

@page "/purchase-success"


<div class="container mt-5">
    <div class="card mx-auto" style="max-width: 500px;">
        <div class="card-header bg-success text-white text-center">
            <h3>Purchase Successful</h3>
        </div>
        <div class="card-body text-center">
            <p class="card-text">
                Thank you for your purchase! Your transaction was completed successfully.
            </p>
            <a href="/" class="btn btn-primary">Return Home</a>
        </div>
    </div>
</div>

Page d’achatfailed.razor:

@page "/purchase-failed"


<div class="container mt-5">
    <div class="card mx-auto" style="max-width: 500px;">
        <div class="card-header bg-danger text-white text-center">
            <h3>Purchase Failed</h3>
        </div>
        <div class="card-body text-center">
            <p class="card-text">
                Unfortunately, your purchase could not be processed. Please try again later or contact support.
            </p>
            <a href="/" class="btn btn-primary">Return Home</a>
        </div>
    </div>
</div>

Ces pages feront partie de la demande d’achat, il est donc essentiel de les créer avant de continuer.

Redirection de l’utilisateur vers la page de paiement de Stripe

Après avoir terminé les étapes précédentes, accédez à Purchase.razor déposer. Ici, modifiez le BuyCredits Méthode pour créer une session d’achat et rediriger l’utilisateur vers la page de paiement Stripe pour simuler un achat:

@page "https://www.telerik.com/"
@using Stripe.Checkout
@using Telerik.Blazor.Components
@using System.ComponentModel.DataAnnotations

@inject NavigationManager NavManager

...

private async Task BuyCredits()
{    
    var options = new SessionCreateOptions
        {
            LineItems = new List<SessionLineItemOptions>
                {
                    new()
                    {                            
                        Price = "price_1QpwY7FBZGBGO2FB2pcv0AHp",
                        Quantity = 1,
                    },
                },                
            Mode = "payment",
            SuccessUrl = "https://localhost:7286/purchase-success",
            CancelUrl = "https://localhost:7286/purchase-failed",
            CustomerCreation = "always"
        };

    var service = new SessionService();
    var session = await service.CreateAsync(options);
    NavManager.NavigateTo(session.Url);
}

Dans le code ci-dessus, notez les points clés suivants:

  • UN SessionCreateOptions L’objet est créé pour définir le type d’achat.
  • Le LineItems la propriété spécifie le produit à vendre via le price ID et attribue la quantité de produit en utilisant le Quantity propriété.
  • Le Mode Indique si l’achat est une transaction unique ou un abonnement.
  • SuccessUrl et CancelUrl Spécifiez les URL pour rediriger l’utilisateur en cas d’achat réussi ou échoué.
  • CustomerCreation Détermine si l’utilisateur doit être créé en bande.
  • L’utilisateur est redirigé vers la page de paiement après la création de la session.

Lors de l’exécution de la demande, en appuyant sur le bouton d’achat vous redirigera vers la page de paiement de Stripe. Pour effectuer un achat de test, vous pouvez utiliser un carte de test de la documentation Stripe.

Que vous ayez réussi à terminer l’achat ou à l’annuler, vous serez redirigé vers la page respective en fonction de la configuration.

Processus d'achat initié à Stripe avec un paiement réussi

Lorsque vous êtes prêt à passer à la production, vous devrez générer une véritable clé API et configurer un vrai produit. Vous pouvez également traiter les informations de paiement en fonction des événements reçus via un webhook, mais c’est un sujet pour un autre article.

Conclusion

Tout au long de cet article, vous avez appris à intégrer Stripe dans Blazor, à commencer par la création de produits, la génération de clés de l’API et la mise en place d’une session d’achat pour rediriger les utilisateurs vers la page de paiement. Il est maintenant temps de commencer et de commencer à accepter les paiements dans votre application Blazor.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link