SDK API Telesales
Intégrez le SDK de l'API Télévente pour soutenir les agents commerciaux dans l'assistance aux clients par téléphone. Envoyez des liens de caisse, suivez la progression de la demande en temps réel et gérez les transactions de manière fluide. Comprend les mises à jour des liens de rappel, les étapes de mise en œuvre et les options de personnalisation de l'interface utilisateur.
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.
How It Works
L'API SDK Telesales fonctionne en plusieurs étapes :
- 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.
- L’application utilise des liens de rappel pour mettre à jour l’interface de l’agent en fonction de la progression du client dans l’application Affirm.
- Si le client ne reçoit pas le courriel initial, l'agent peut cliquer sur Renvoyer le paiement pour envoyer un autre courriel.
- 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.
Flux logique
- POST l'Affirm
checkout_object
au[checkout/store](https://docs.affirm.com/developers/reference/store)
endpoint. - Les webhooks envoient les mises à jour du statut de l'événement au serveur.
- 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 pour vous assurer que les informations correctes sur les articles sont extraites de l'interface utilisateur de l'agent de télévente.
Mises à jour des espaces réservés
Vous devrez peut-être mettre à jour les espaces réservés dans la variable
checkout_object
, tels queitem_URL
oushipping_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
Toutes les valeurs comprises dans le checkout_object
doivent être transmises à Affirm sous forme de centimes (par ex., 100 $ équivalent à 10 000 cents). 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 lien de rappel. Les réponses de liens de rappel 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
du client correspond à celui de la réponse du lien de rappel.
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é.
Entente de partage de données
Affirm nécessite un accord de partage de données pour activer le partage des événements de lien de rappel. Vous devrez également configurer une URL de lien de rappel pour compléter l'intégration. Contactez Affirm par l'intermédiaire de votre équipe de compte ou du widget d'assistance pour obtenir de l'aide.
À propos de telesalesserver.js
Le fichier telesalesserver.js représente le point de terminaison où les données du lien de rappel seront envoyées. Sa fonction est d’acheminer les données d’événement de lien de rappel 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>
Mis à jour 2 months ago