JavaScript SDK
Seel JavaScript SDK provides a way to integrate Seel Return Assurance(RA) into your web app.
Integrating RA into a web client includes adding the RA widget to the product detail page, checkout page, setting up RA event listeners, creating a quote when shopper opts in and creating order after shopper has made a purchase.
<!-- Seel SDK -->
<script src="https://cdn.seel.com/scripts/ra/marketplace-embedded.min.js"></script>
<!-- End Seel SDK –->
Paste this code snippet to the product detail page so that RA marketing banner will be displayed when RA is eligible.
<!-- Seel RA marketing banner -->
<div id="seel-ra-marketing-banner-root"></div>
<!-- End RA marketing banner –->
Paste this code snippet to the checkout page for RA widget UI display and underwriting. Shoppers can easily opt in and out RA at checkout by switching the toggle on the widget.
<!-- Seel RA widget -->
<div id="seel-ra-widget-root"></div>
<!-- End RA widget –->
Seel SDK sends all items in the shopping cart to Seel backend to create a quote when shopper lands on the checkout page. Partner can pass additional info to create a quote by using
createQuote() function. This is an optional step for partner. However, we strongly recommend that partner call createQuote() function to pass extra information to get more accurate underwriting result.Create quote may trigger
onUnchecked() when the cart is ineligible for RA, i.e. shipping address is invalid or not supported.const { seelSDK } = window.SeelSDK;
quote_info = {
"items":[{ // all items in the cart
"product_url": "url", // required
"quantity": 1, // required
"price": 34.33, // required
"title": "title_1", // required
"description": "description_1", // required
"extra_info": {} // optional
}],
"shipping_address": { // optional
"address_1": "123 Main St",
"address_2": "Apt 1001",
"city": "San Francisco",
"state": "CA",
"zipcode": "94105",
"country": "US"
},
"extra_info": { //optional
}
}
seelSDK.createQuote(quote_info)
On the checkout page, shopper or partner can opt in or opt out of RA.
- If RA widget is displayed to shoppers on the checkout page and it's shoppers who decide whether to add RA to the order, then partner must set up RA event listeners.
- If it's partner who decides to opt in/ out RA, then partner should call triggerEvent()
Partner must add a listener function to update the order total when shopper opts in RA. Partner needs to add RA price to the item subtotal and applies sales tax accordingly.
const { seelSDK, Events } = window.SeelSDK;
const checkedHandler = (raProductData) => {
// Implemenation required: update order info
const { price, quoteId} = raProductData;
};
seelSDK.setupListener(Events.checked, checkedHandler);
Add a listener function to remove RA from the order total when shopper opts out of RA.
const { seelSDK, Events } = window.SeelSDK;
const uncheckedHandler = (raProductData) => {
// Implemenation required: update order info
const {price, quoteId} = raProductData;
};
seelSDK.setupListener(Events.unchecked, uncheckedHandler);
When it's merchant who decides to add/ remove RA to a checkout. Partner can trigger checked/ unchecked events manually to let Seel know if RA is added or not.
const { seelSDK, Events } = window.SeelSDK;
seelSDK.triggerEvent(Events.checked); //trigger RA checked event
seelSDK.triggerEvent(Events.unchecked); //trigger RA unchecked event
Partner call
placeOrder() when shopper successfully places an order, even when RA is unchecked. This is a required step.const { seelSDK } = window.SeelSDK;
// construct order data
order_data = {
"order_id": "order_1234", // required
"sales_tax_rate": 0.087, // required
"customer": {
"email": "[email protected]", // required
"first_name": "John", // optional
"last_name": "Doe" // optional
},
"extra_info": {} // optional
}
// call placeOrder()
seelSDK.placeOrder(order_data)
Last modified 2mo ago