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.

How It Works

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. The application uses webhooks to update the agent's interface based on the customer's progress in the Affirm application.
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.

To collect payment information for the transaction, you will need to implement additional logic to authorize and capture the payment for the transaction. You can repurpose this logic by updating the API keys to the Telesales-specific keys if you implemented Affirm in your e-commerce channel.

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

Step 1: Open and Update the app.js File

Open the app.js file and update the relevant HTML class/element names to ensure that the correct item information is pulled from the telesales agent’s user interface.

📘

Placeholder Updates

You may need to update placeholders within the checkout_object variable, such as item_URL or 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;

Step 2: Pass the Values as Cents

All the values within the checkout_object must be passed to Affirm as cents (e.g., $100 is 10000 cents). The toInteger function on line 19 handles this 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
}

Affirm Checkout Function

The app.js file also contains the affirmCheckout function. This function sends the checkout_object to Affirm and updates the agent's Affirm UI upon receipt of successful webhook responses. The webhook responses are stored in a database and pinged every three seconds by the getWHR function. The agent’s interface will only update if the customer’s order_id matches the one in the webhook response.

Understand Webhook Event Updates

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

• Sent: Confirms that the email has been sent to the customer.
• 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é.

📘

Data Sharing Agreement

Affirm requires a data-sharing agreement to enable webhook event sharing. You’ll also need to configure a webhook URL to complete the integration. Contact Affirm through your Account team or the support widget for assistance.

À propos de telesalesserver.js

The telesalesserver.js file represents the endpoint where the webhook data will be sent. Its function is to route the webhook event data to the client side, allowing the agent’s interface to update correctly.

Update HTML Code for the 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>