Exercice : créer et tester un formulaire de paiement dans Power Pages
Lors de l’intégration de modes de paiement dans Power Pages, vous avez besoin d’un formulaire et d’une table associée auxquels connecter les données. Pour cet exercice, vous allez créer une table et un formulaire pour vous donner une idée de ce dont vous avez besoin lors de l’intégration de modes de paiement. Si vous disposez déjà de tables et de formulaires à cet effet, vous pouvez les utiliser, puis passer à la création du formulaire à plusieurs étapes.
Créer une table Contact de paiement
Avant de créer des tables et des formulaires, il est recommandé de créer ces ressources dans une solution. Une solution est un package qui vous permet de regrouper, gérer et transporter des personnalisations, applications, composants et configurations entre environnements.
Accédez à Power Pages et connectez-vous au locataire auquel vous avez ajouté des intégrations Stripe.
Cliquez sur Solutions dans le menu de navigation gauche, puis sur + Nouvelle solution dans le menu supérieur.
Nommez la solution Paiements tests (ou quelque chose de similaire), puis utilisez l’éditeur par défaut si vous n’avez pas d’éditeur affecté.
Dans la solution Paiements tests, cliquez sur + Nouveau dans le menu de table, puis sélectionnez Table > Table (propriétés avancées).
Dans le volet Nouvelle table qui s’ouvre à droite, nommez la table Contact de paiement, conservez Name comme colonne principale, puis cliquez sur Enregistrer.
Après avoir accédé à la table Contact de paiement, cliquez sur + Nouveau dans le menu supérieur, puis sélectionnez Colonne.
Nommez la colonne Payment amount, sélectionnez Devise pour le type de données, puis cliquez sur Enregistrer.
Important
Lorsque vous utilisez l’intégration Stripe sur un formulaire à plusieurs étapes, vous avez besoin d’une colonne de devise. Cette colonne détermine le montant à facturer à l’utilisateur. Si vous ne disposez pas d’une colonne de devise, l’intégration ne fonctionne pas.
Ajoutez une autre colonne nommée Email qui suit l’adresse e-mail de l’utilisateur. Utilisez le type de données Une seule ligne de texte avec E-mail comme format.
Vous devriez maintenant disposer d’une table Contact de paiement prête à l’emploi. Dans la section suivante, vous allez créer le formulaire associé à cette table, puis l’ajouter à un formulaire à plusieurs étapes sur votre site web Power Pages.
Modifier le formulaire de la table
Lors de l’association de la table Contact de paiement au formulaire à plusieurs étapes sur votre site, vous devez sélectionner un formulaire associé à la table Contact de paiement. Le formulaire standard associé aux nouvelles tables peut ne pas comporter toutes les informations que vous souhaitez que les utilisateurs renseignent. Pour résoudre ce problème, vous devez ajouter des colonnes au formulaire Informations de type Principal existant.
Depuis la table Contact de paiement, cliquez sur Formulaires sous Expériences de données.
Sur la page Formulaires, sélectionnez le formulaire Informations de type Principal, puis cliquez sur Modifier dans le menu supérieur.
Dans l’éditeur de formulaires Nouveau contact de paiement qui s’ouvre, ajoutez les colonnes suivantes à partir du volet Colonnes de table à gauche en sélectionnant leur nom dans la liste :
- Payment amount
Remarque
Lorsque vous choisissez un montant de paiement, veillez à utiliser la colonne Payment amount SANS (base). En outre, masquer éventuellement la colonne Owner peut améliorer la lisibilité de votre formulaire.
Cliquez sur Enregistrer et publier dans le coin supérieur droit de l’éditeur de formulaires.
Vous devriez maintenant disposer d’une table et d’un formulaire configurés permettant aux utilisateurs d’effectuer des paiements. Dans la section suivante, vous allez intégrer ces ressources à un formulaire à plusieurs étapes sur votre site Power Pages.
Créer un composant de formulaire à plusieurs étapes
Bien que les formulaires soient également directement associés à des tables, vous pouvez créer des formulaires personnalisés dans le studio de conception Power Pages. Les sections suivantes vous montrent comment créer un formulaire à plusieurs étapes et l’intégrer à Stripe.
Commencez par modifier votre site Power Pages depuis la page d’accueil Power Pages pour accéder au studio de conception.
Accédez à la page sur laquelle vous souhaitez placer le formulaire ou cliquez sur + Page pour ajouter une page vide.
Dans la zone + Ajouter une section de votre page, sélectionnez Formulaire à plusieurs étapes dans le menu Choisir un composant pour créer un formulaire à plusieurs étapes.
Si une fenêtre Ajouter un formulaire à plusieurs étapes s’ouvre, cliquez sur + Nouveau formulaire à plusieurs étapes.
Donnez au formulaire un nom similaire à Paiement, puis cliquez sur Terminé pour le créer.
Dans la zone du formulaire créé, cliquez sur + Ajouter la première étape pour ajouter la première étape de votre formulaire.
Dans la fenêtre Ajouter une étape qui s’ouvre, nommez l’étape Recueillir des informations, puis sélectionnez la table Contact de paiement que vous avez créée précédemment. Sous Sélectionner un formulaire, sélectionnez Informations, puis cliquez sur OK.
Remarque
Le formulaire Informations est le même formulaire de type Principal que celui que vous avez modifié précédemment avec les champs Name, Email et Payment amount sélectionnés. Si vous avez masqué le champ Owner, il ne devrait pas s’afficher sur le formulaire à plusieurs étapes.
Cliquez sur + Ajouter une étape dans la partie supérieure du formulaire.
Dans la fenêtre Ajouter une étape qui s’ouvre, nommez l’étape Paiement. Sélectionnez la même table Contact de paiement et le même formulaire Informations que vous avez utilisés à l’étape précédente, puis cliquez sur OK.
Toujours à l’étape 2/2 du formulaire, cliquez sur Paramètres de l’étape.
Accédez à Intégrations d’applications dans la fenêtre de navigation gauche et réglez le bouton bascule en regard d’Activer les paiements numériques pour activer l’intégration Stripe. Sélectionnez Payment amount pour le champ Choisir le champ de montant, puis cliquez sur OK pour terminer le formulaire.
Vous devriez maintenant disposer d’un formulaire complet à plusieurs étapes avec une étape nécessitant une entrée utilisateur pour Name, Email et Payment amount, et l’étape suivante affichant les entrées utilisateur fournies et un formulaire de paiement joint. Le prix doit également être lié au champ Payment amount.
Afin que les utilisateurs puissent voir le formulaire et que vous puissiez le tester, vous devez modifier les autorisations du formulaire. Pour ce faire, Cliquez sur + Nouvelle autorisation dans la partie supérieure du formulaire.
Dans le volet Nouvelle autorisation de table qui s’ouvre à droite, assurez-vous que les champs suivants sont renseignés automatiquement :
- Table : Contact de paiement
- Type d’accès : Accès global
-
Autorisation de
- Lecture
- Création
Cliquez sur + Ajouter des rôles dans la partie inférieure du volet Nouvelle autorisation de table. Sélectionnez les rôles Administrateurs et Utilisateurs authentifiés, puis cliquez sur Enregistrer.
Cliquez sur Synchroniser dans le coin supérieur droit du studio de conception, puis sur Aperçu > Bureau pour prévisualiser la page.
Lorsque vous prévisualisez le formulaire, selon la configuration de votre page web, vous noterez peut-être le message Vous ne disposez pas des autorisations appropriées. Pour afficher le formulaire, vous devez vous connecter au site web.
Si votre site web utilise l’un des modèles Power Pages, procédez comme suit :
Cliquez sur Connexion dans le coin supérieur droit du site web.
Sélectionnez Microsoft Entra ID sous Se connecter avec un compte externe. Connectez-vous à votre abonné et acceptez la demande d’autorisation.
Si vous n’êtes pas encore connecté à votre site, saisissez vos informations, cliquez sur Enregistrer, puis revenez à votre formulaire de paiement.
Votre formulaire devrait maintenant être visible et ressembler à la capture d’écran suivante :
La section suivante couvre vos options de test avec le formulaire Stripe, y compris les numéros de carte de test que vous pouvez utiliser.
Tester le formulaire
Lorsque vous testez les paiements Stripe sur votre site Power Pages, Stripe vous fournit un ensemble de cartes de test à utiliser. La liste fournit également les ID PaymentMethod et Token associés de la marque de carte. Pour obtenir la liste complète, accédez à Cartes de test.
La méthode de test est simple et ne vous oblige qu’à choisir une carte dans la liste, puis à remplir le formulaire de votre site, de la même manière que vous aborderiez un paiement normal.
Accédez à votre formulaire de paiement depuis la fonction d’aperçu du studio de conception, puis saisissez les informations dans les champs Name et Email dont vous vous souvenez. Veillez à vous trouver à l’étape Recueillir des informations du formulaire.
Remarque
Les informations que vous saisissez sont uniquement à des fins de test ; il n’est pas nécessaire qu’il s’agisse d’un vrai nom associé à une véritable adresse e-mail.
Pour Payment amount, saisissez tout nombre, puis cliquez sur Suivant.
Remarque
Les limites de ce nombre dépendent des paramètres de chaque colonne. Lorsque vous configurez une colonne de devise, vous pouvez modifier les limites de valeur. Vous pouvez également désigner le type de devise.
Une fois que vous avez cliqué sur Suivant, le système vous redirige vers l’étape Paiement du formulaire. Cette étape vous permet de saisir un numéro de carte de test provenant de la documentation de Stripe.
Sélectionnez Carte, puis saisissez l’une des cartes de test. Cliquez sur Payer maintenant dans la partie inférieure du formulaire pour terminer le processus. La date d’expiration peut être toute date future, le code de sécurité peut être toute combinaison de trois chiffres et le code postal peut être toute combinaison de cinq chiffres.
Remarque
Les informations que vous avez fournies à partir de l’étape Recueillir des informations devraient maintenant s’afficher dans la partie supérieure de l’étape Paiement, mais en mode Lecture seule.
Une fois que vous avez confirmé le paiement, le système vous redirige vers une vue récapitulative affichant les valeurs Name, Email, Payment amount et transaction ID de la transaction.
Pour vérifier que le paiement a été effectué correctement en interne, vous pouvez consulter les enregistrements de votre table Contact de paiement.
Pour effectuer la vérification dans Stripe, accédez à la page Transactions, où votre transaction devrait afficher le statut Réussite avec l’ID de transaction sous Description.
Étapes suivantes
Maintenant que vous avez de l’expérience dans le développement et le test d’un formulaire de paiement, vous devriez être en mesure d’intégrer ces connaissances à votre propre société ou à vos données personnelles et à des cas d’utilisation.
Lorsque vous passez des clés de test aux clés actives, sachez que vous devez utiliser Azure Key Vault lors du stockage de vos clés API. Le stockage Dataverse n’est pas accepté pour les intégrations de paiements avec des clés actives. Lors de l’ajout de vos clés à Azure Key Vault, procédez comme suit :
Obtenez le nom de votre application à partir de la page Inscriptions d’applications dans Azure. Le nom de l’application dans le portail Azure est le nom de votre site avec un préfixe Portails-. Si le nom de votre site est Contoso Coffee, le nom de l’application dans le portail Azure est Portails-Contoso Coffee.
Accédez à Coffres de clés dans le portail Azure et créez un coffre de clés ou utilisez un coffre existant.
Lors de la création d’un coffre de clés, vous devez choisir un modèle d’autorisation. Vous pouvez choisir Contrôle d’accès en fonction du rôle Azure ou une stratégie d’accès Key Vault.
Ajoutez votre clé restreinte Stripe en tant que secret dans le coffre de clés. Pour en savoir plus sur la création d’un secret dans Azure Key Vault, accédez à Définir et récupérer un secret depuis Azure Key Vault à l’aide du portail Azure.