Créer une vitrine personnalisée

Découvrez comment créer une vitrine personnalisée prenant en charge les fonctionnalités de paiement de Stripe.

Adobe Commerce fonctionne comme une plateforme commerciale headless, dissociée de sa vitrine. Vous pouvez utiliser l’API REST ou l’API GraphQL pour créer des vitrines personnalisées, telles que des applications Web progressives (PWA), des applications mobiles ou du contenu front-end basé sur React, Vue ou d’autres frameworks.

Le module Stripe enrichit l’API REST et l’API GraphQL des fonctionnalités suivantes :

Configurer les tokens de moyen de paiement lors de la commande
Procéder à l’authentification du client avec 3D Secure
Gérer les moyens de paiement enregistrés des clients

Le module Stripe utilise l’API REST sur la page de paiement. Vous trouverez des exemples d’utilisation de l’API dans le répertoire du module Stripe, sous le sous-répertoire resources/examples/. Ce guide utilise l’API GraphQL pour créer une vitrine personnalisée.

Récupérer les paramètres d'initialisation

Pour initialiser Stripe.js et le formulaire de paiement sur le front-end, vous avez besoin de la clé API publique Stripe que vous avez configurée dans l’espace administrateur. Vous pouvez récupérer la clé et d’autres paramètres d’initialisation en utilisant la mutation GraphQL suivante :

query {
getStripeConfiguration {
	apiKey
		locale
		appInfo
		options {
			betas
			apiVersion
		}
	elementsOptions
	}
}

Tokeniser un moyen de paiement au cours du tunnel de paiement

Vous pouvez utiliser le composant PaymentElement pour collecter un moyen de paiement auprès du client lors du paiement. Une fois que le client a fourni ses informations de paiement et cliqué sur Passer la commande, vous pouvez tokeniser le moyen de paiement et l’utiliser pour passer la commande. L’appel à createPaymentMethod génère un token de moyen de paiement à partir des informations fournies dans le PaymentElement.

var stripe = Stripe(API_PUBLISHABLE_KEY);

var options = {
  mode: 'payment',
  amount: 1099,
  currency: 'eur'
};

var elements = stripe.elements(options);
var paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

var placeOrder = function()
{
    elements.submit().then(function()
    {
        stripe.createPaymentMethod({
            elements: elements,
            params: {
                billing_details: {
                    name: 'Jenny Rosen'
                }
            }
        }).then(function(result)
        {
            if (result && result.paymentMethod)
            {
                // Success
            }
        });
    });
}

Transmettre le moyen de paiement tokenisé

Après avoir obtenu un token de moyen de paiement, vous devez appeler setPaymentMethodOnCart pour définir le moyen de paiement sur la commande.

mutation {
  setPaymentMethodOnCart(input: {
      cart_id: "CART_ID"
      payment_method: {
        code: "stripe_payments"
        stripe_payments: {
          payment_method: "PAYMENT_METHOD_ID"
          save_payment_method: true
        }
      }
  }) {
    cart {
      selected_payment_method {
        code
      }
    }
  }
}

Utilisez les paramètres suivants pour setPaymentMethodOnCart :

Paramètre	Type	Description
`payment_method`	Chaîne	Utilisez ce paramètre pour transmettre l’identifiant du moyen de paiement tokenisé. Vous pouvez également transmettre des tokens de moyen de paiement enregistré lorsqu’un client choisit un moyen de paiement enregistré lors du paiement.
`save_payment_method`	Booléen	Indiquer si le moyen de paiement doit être enregistré ou non.
`cvc_token`	Chaîne	Si le CVC est activé pour les cartes enregistrées, utilisez ce paramètre pour transmettre le token CVC et procéder à la vérification.

Passer la commande

Après avoir défini le token du moyen de paiement, vous pouvez utiliser la mutation placeOrder d’Adobe Commerce pour passer une commande :

mutation {
  placeOrder(input: {cart_id: "CART_ID"}) {
    order {
      order_number
      client_secret
    }
  }
}

L’exemple ci-dessus demande un paramètre client_secret, qui n’est pas un paramètre de mutation placeOrder par défaut. Le module Stripe ajoute ce paramètre pour que vous puissiez l’utiliser une fois la commande passée afin de finaliser les détails spécifiques au moyen de paiement sélectionné. Vous pouvez finaliser le paiement avec la méthode stripe.handleNextAction(client_secret). Les options comprennent une étape d’authentification 3D Secure pour les cartes bancaires, l’affichage d’un coupon imprimable pour certains moyens de paiement ou la redirection du client vers un site externe pour s’identifier.

Flux de passation de commande

Les moyens de paiement de type card ou link qui nécessitent une authentification client 3D Secure (3DS) passent par le processus suivant :

La commande passe à l’état Pending Payment.
La clé secrète du client est transmise au front-end pour effectuer l’authentification.
Une fois l’authentification réussie, le paiement est encaissé côté client et le client est redirigé vers la page de confirmation de la commande.
L’événement de webhook charge.succeeded arrive sur votre site Web côté serveur.
Le module gère l’événement et modifie l’état de la commande, qui passe de Payment Pending à processing.

Cette procédure est la procédure par défaut pour GraphQL, mais pas pour l’API REST. Avec l’API REST, si l’authentification du client est requise, la passation de commande échoue et l’erreur Authentication Required: client_secret s’affiche. Vous devez authentifier le paiement à l’aide du client_secret, et repasser la commande une fois l’authentification réussie. Cette approche présente un avantage : le stock n’est pas bloqué tant que le paiement n’a pas été effectué. Pour utiliser cette procédure avec GraphQL, modifiez le fichier etc/config.xml du module en ajoutant card et link sous le nœud <graphql_api> :

<manual_authentication>
     <rest_api>card,link</rest_api>
     <graphql_api>card,link</graphql_api>
</manual_authentication>

Récupérer les moyens de paiement enregistrés

Vous pouvez utiliser listStripePaymentMethods pour récupérer la liste des moyens de paiement enregistrés d’un client dans une session Checkout active.

mutation {
  listStripePaymentMethods {
    id
    created
    type
    fingerprint
    label
    icon
    cvc
    brand
    exp_month
    exp_year
  }
}

Enregistrer un moyen de paiement

Vous pouvez utiliser addStripePaymentMethod pour enregistrer des moyens de paiement sur le compte d’un client. Le paramètre payment_method est l’ID du moyen de paiement tokenisé. Le processus de tokenisation est similaire au processus de tokenisation au cours du tunnel de paiement.

mutation {
  addStripePaymentMethod(
    input: {
      payment_method: "PAYMENT_METHOD_ID"
    }
  ) {
    id
    created
    type
    fingerprint
    label
    icon
    cvc
    brand
    exp_month
    exp_year
  }
}

Supprimer un moyen de paiement enregistré

Vous pouvez utiliser deleteStripePaymentMethod pour offrir à vos clients la possibilité de supprimer des moyens de paiement enregistrés de leur compte.

Dans la plupart des cas, nous vous recommandons de transmettre une empreinte d’identification du moyen de paiement, ce qui supprime tous les moyens de paiement correspondant à l’empreinte d’identification. La mutation listStripePaymentMethods supprime automatiquement les doublons avant de renvoyer les moyens de paiement récemment ajoutés qui correspondent à une empreinte d’identification spécifique. En revanche, si vous supprimez uniquement un moyen de paiement par ID, les résultats de listStripePaymentMethods peuvent inclure un ancien moyen de paiement enregistré avec la même empreinte d’identification.

mutation {
  deleteStripePaymentMethod(
    input: {
      payment_method: "paste a payment method ID here"
      fingerprint: null
    }
  )
}