Créer une vitrine personnalisée

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.

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

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

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

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

Flux de passage de commandes

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

1. La commande passe à l’état Pending Payment.
2. La clé secrète du client est transmise au front-end pour effectuer l’authentification.
3. 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.
4. L’événement de webhook charge.succeeded arrive sur votre site Web côté serveur.
5. 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
    }
  )
}