SDK API Telesales

Aperçu

L'API SDK de télévente fournit une interface simplifiée pour aider les agents de vente par téléphone. Avec cette API, les agents peuvent envoyer des courriels aux clients et les aider à utiliser Affirm. Cela permettra à vos agents de vente de suivre les processus de demande des clients en temps réel et de les aider à effectuer leurs transactions Affirm.

Comment ça fonctionne

L'API SDK Telesales fonctionne en plusieurs étapes :

1. L'agent de vente lance la demande en cliquant sur Envoyer le paiement, ce qui déclenche l'envoi au client d'un courriel et/ou d'un texte contenant des instructions pour compléter sa demande Affirm.
2. La demande utilise des webhooks pour mettre à jour l’interface de l’agent, en fonction de l’emplacement du client dans l’application Affirm.
3. Si le client ne reçoit pas le courriel initial, l'agent peut cliquer sur Renvoyer le paiement pour envoyer un autre courriel.
4. Une fois que l'agent voit le statut Confirmé, le système Affirm crée la commande.

Pour collecter les informations relatives à la transaction, vous devrez mettre en œuvre une logique supplémentaire pour autoriser et capturer le paiement de la transaction. Vous pouvez réutiliser cette logique en mettant à jour les clés API avec les clés spécifiques aux téléventes si vous avez implémenté Affirm dans votre canal de commerce électronique. Voir notre documentation sur la télévente pour plus de détails.

Flux logique

1. POST l'Affirm checkout_object au [checkout/store](https://docs.affirm.com/developers/reference/store) endpoint.
2. Les webhooks envoient les mises à jour du statut de l'événement au serveur.
3. L'application veille sur les mises à jour du serveur et fournit des informations pertinentes à l'agent.

Implémentation

Étape 1 : Ouvrir et mettre à jour le fichier app.js

Ouvrez le fichier app.js et mettez à jour les noms des classes/éléments HTML pertinents afin de vous assurer que les informations correctes sur les articles sont extraites de l'interface utilisateur de l'agent de télévente. Remarque: vous devrez peut-être mettre à jour les espaces réservés dans la variable checkout_object , tels que item_URL ou shipping_type.

// Grab form values so we can map them to the Affirm checkout_object
var billingFirst = document.getElementById('firstName').value,
billingLast = document.getElementById('lastName').value,
billingAddress1 = document.getElementById('addressLine1').value,
billingAddress2 = document.getElementById('addressLine2').value,
billingCity = document.getElementById('city').value,
billingState = document.getElementById('state').value,
billingEmail = document.getElementById('email').value,
billingZip = document.getElementById('zipcode').value,
billingPhone = document.getElementById('phoneNumber').value,
productName = document.getElementById('productName').value,
productQuantity = document.getElementById('productQuantity').value,
unitPrice = document.getElementById('unitPrice').value,
productName2 = document.getElementById('productName2').value,
productQuantity2 = document.getElementById('productQuantity2').value,
unitPrice2 = document.getElementById('unitPrice2').value,
tax = document.getElementById('tax').value,
shipping = document.getElementById('shipping').value,
discount = document.getElementById('discount').value,
discount2 = document.getElementById('discount').value,
total = document.getElementById('total').value;
order_id = document.getElementById('order_id').value;

Étape 2 : transmettre les valeurs en centimes

Notez que toutes les valeurs comprises dans le checkout_object doivent être transmises à Affirm sous forme de centimes (par ex., 100 $ équivalent à 10 000 centimes). La fonction toInteger à la ligne 19 gère cette conversion.

// Money helper - Affirm calculates all values in cents e.g. $100 is 10000
function toInteger(a) {
	var b;
	a = a.replace(/[$,]/g,"");
	if (a.indexOf('.') > 0) {
		b = a.replace(/[.]/g,"");
	}
	else {
		b = a * 100;
	}
	return b
}

Fonction de paiement Affirm

Le fichier app.js contient également la fonction affirmCheckout . Cette fonction envoie le checkout_object à Affirm et met à jour l'interface utilisateur Affirm à la réception de réponses positives au webhook. Les réponses webhook sont stockées dans une base de données et envoyées toutes les trois secondes par la fonction getWHR . L'interface de l'agent ne sera mise à jour que si le order_id correspond à cela dans la réponse du webhook.

Comprendre les mises à jour des événements Webhook

Les mises à jour des événements Webhook incluent les éléments suivants :

• Sent: confirme que le courriel a été envoyé au client.
• Opened: confirme que le client a bien ouvert son courriel.
• Approved: indique que la demande du client a été approuvée.
• Not_approved: indique que la demande du client a été refusée.
• Confirmed: confirme que le client a terminé son prêt Affirm et que le paiement de la commande est terminé.

📘

Note

Notez que nous avons besoin d'un accord de partage de données pour partager des événements webhook. Une URL de webhook doit également être configurée pour terminer l'intégration. Veuillez contacter Affirm par le biais de votre équipe de compte ou du widget d'assistance.

Notez que nous avons besoin d'un accord de partage de données pour partager des événements webhook. Une URL de webhook doit également être configurée pour terminer l'intégration. Veuillez contacter Affirm par le biais de votre équipe de compte ou du widget d'assistance.

À propos de telesalesserver.js

Le fichier telesalesserver.js représente le point de terminaison où les données du webhook seront envoyées. Sa fonction est d’acheminer les données d’événement webhook vers le côté client, permettant à l’interface de l’agent de se mettre à jour correctement.

Mettre à jour le code HTML de l'agent

Le code HTML de l'agent se trouve sur le telesales-orderform.html. Vous pouvez personnaliser le style de la fenêtre de l'agent à l'aide du fichier style.css .

<div class="max-width">
    <h3 class="header">Affirm payment details</h3>
    <div class="steps-container">
      <button class="sendcheckout">Send Checkout</button>
      <button class="resendcheckout inactive">Re-send checkout</button>
    </div>
    <div class="progress-container">
      <div class="progress-bar"></div>
    </div>
    <p class="helper-text visually-hidden">A link to start the Affirm loan application has been emailed to the customer. They can start the application on their own device</p>
  </div>

<script async="" src="affirm.js"></script>
<script src="app.js" type="text/javascript"></script>