Implementing Snap Checkout
JavaScript

JavaScript SDK

Snap Checkout Button Overview

Implementing Snap Checkout Button

The Snap Checkout button is designed to be a payment option for your website. When a customer clicks on the button, a modal window launches a customer application. When complete, the window will close and if financing is approved, an “Approved” event will be sent to your site with the associated ‘applicationId’. If financing is denied, a "Denied" event will be sent to your site with the associated 'applicationId.'

The merchant site may also monitor Notification and Error events sent from the process. Error messages and runtime errors will be returned to the merchant site if the token or the transaction is invalid.

Upon approval, the merchant may store the returned 'applicationId' value for later use in completing the transaction. The 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.

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.

copy

<head>
   <script src="
   https://js.snapfinance.com/v1/snap-sdk.js">
   </script>
</head>

Step 2. Add Button Container

Add an element to your website to contain the Snap Checkout button.

copy
 
<div id="snap-checkout-button"></div>

Step 3. Setup Transaction

Obtain a reference to your shopping cart data. Format the transaction in JSON as shown. The transaction should confirm to this specification. You will pass this transaction to launchCheckout action.

copy
 
<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

First initialize Snap with the web token you obtained for testing.

Replace this with the production token when you go live.

copy
 
<script>
    // Supply the snap JWT obtained 
      through Auth0 endpoint
snap.init(get('token'));
</script>

Step 5. Add Snap Checkout Button

Add this script (inline) to your checkout page, passing in the access token and transaction. This code will render the button to your page which, when clicked, will launch 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.

copy
 
<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 a branding marks to be 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 will adjust relative to the height.

See advanced implementation below for more options.

copy
 
<label>
   <input type="radio" name="payment-
      option" value="snap" checked>
    <div id="snap-checkout-mark"></div>
</label>
copy
 
<script> 
   snap.checkoutMark({
        style: {
            color: 'dark',
            height: 40
        }
    }).render();
</script>

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.

copy

<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>

Finish Snap Checkout Implementation

Web Development
Dedicated Tech Support
We want to hear from you! Email devsupport@snapfinance.com for help or questions.

Alert

Are you still there? Your session will time out in 5 minutes. Click OK to continue

OK