
JavaScript SDK
The Snap Checkout Button
The Snap Checkout button is designed to be a payment option for your website. When a customer clicks the button, a modal window launches a customer application. When the customer completes the application, the window closes.
Approval
If financing is approved, an Approved event is sent to your site with the associated applicationId. The merchant can store the returned applicationId value for later use in completing the transaction.
On customer application approval, The Snap Checkout button may function as a standalone button or may be used in connection with the Snap Checkout Mark, which provides a Snap authorized graphic for use as a radio selection option.
Denial
If financing is denied, a Denied event is sent to your site with the associated applicationId.
Errors
The merchant site may also monitor notification and error events sent from the process. Error messages and runtime errors return to the merchant site if the token or the transaction is invalid.
Basic Implementation
Step 1. Import SDK Script
Import the script in the <head> section of your website, using the code snippet below. The script should load before your document body loads. The same script is used for both testing and production.
Step 2. Add Button Container
Add an element to your website to contain the Snap Checkout button.
Step 3. Set Up Transaction
Obtain a reference to your shopping cart data. Format the transaction in JSON as shown. The transaction should confirm to this specification. You pass this transaction to the launchCheckout action.
<script>
var transaction = {
orderld:'12345',
totalAmount: 1025,
taxAmount: 25,
products: [{
productId:' AMC47',
quantity: 4,
description: 'Item dose',
price: 250
}],
customer: {
firstName: 'John',
lastName: 'Doe',
email: 'test@snapfinance.com',
homeAddress: {
streetAddress: 'Somewhere St',
city: 'Racoon City',
state: 'UT',
zipcode: '999999'
}
}
};
</script>
Step 4. Initialize Snap
Initialize Snap with the web token you obtained for testing.
Replace this with the production token when you go live.
Step 5. Add Snap Checkout Button
Add this script (inline) to your checkout page, passing in the access token and transaction. This code renders the button to your page which, when clicked, launches the Snap Checkout window.
When the transaction is approved by Snap, the onApproved method will be invoked, passing in the applicationId as a property on the data object. (i.e. data.applicationId). Store this value for use in Order Completion.
<script>
onInit: function(data, actions) {
// Optionally validate
the transaction before checkout
return
actions.validateTransaction(tran
saction);
},
snap.checkoutButton({
onClick: function(data, actions) {
// This action MUST be called to launch the checkout process.
return
actions.launchCheckout(transaction);},
},
onApproved: function(data, actions){
// Store the approved
applicationId for use in calling
endpoint to place the order.
localStorage.setItem('snapApplicationId’,data.applicationId);
},
}).render();
</script>
Step 6. Radio Button Implementation (optional)
For merchant checkout flows that employ radio buttons, Snap provides branding marks to displayed alongside the radio select option.
Include those marks alongside your radio button by adding a <div> element to your page with an id value of snap-checkout-mark. Then separately, add an inline script element for configuration of that mark, as shown.
The snapCheckoutMark configuration supports specification of a ‘light’ or ‘dark’ graphic, and a height between 25 and 55 pixels. The width of the Snap mark adjusts relative to the height.
See Advanced Implementation below for more options.
Advanced Implementation
Follow all the instructions as shown in Basic Implementation.
The Snap Checkout button provides additional features that enable you to enhance your user experience with snap.
<script>
snap.checkoutButton({
onInit: function(data, actions) {
// Optionally validate
the transaction before checkout
return
actions .validateTransaction(tran
saction);
},
onClick: function(data, actions) {
// This action MUST be called to
launch the checkout process.
return
actions.launchCheckout(transaction);
},
onApproved:function(data, actions) {
// Store the approved
applicationId for use in calling
endpoint to place the order.
localStorage.setItem('snapApplic
ationId’,data.applicationId);
},
onDenied:function(data, actions) {
console.log(`Application $
{data.applicationId) was
denied.`);
},
onNotification:function(data,
actions) {
console.log(`Informational
message to merchant site from
snap checkout: ${data}`);
},
onError:function(data, actions) {
console.log(`Error message to
merchant site from snap
checkout process: ${data}`);
},
}).render();
</script>