Slope.js

Use the slope.min.js Javascript library on any website (or Javascript application) to collect your customers' preferred payment terms and payment method

Embedding Javascript library

To get started, add slope.min.js to your website.

<!-- For production -->
<script src="https://checkout.slope.so/slope.min.js"></script>
             
<!-- For sandbox: -->
<script src="https://checkout.sandbox.slope.so/slope.min.js"></script>

Opening the pop-up

Once you have Created an Order and are ready to collect payment terms and preferred payment method from the customer, initialize Slope.js with the an order's intent secret and call the open method. You may specify callback methods to be called when the customer submits or fails to submit required information.

<script type="text/javascript">
  window.initializeSlope({
    /**
    * flow is either "checkout" or "pre_qualify". Defaults to "checkout"
    */
    flow: 'checkout', 
    
    /**
    * intentSecret is the short-lived token returned by Slope's API when
    * creating the order. It allows the customer to select their preferred
    * payment terms and payment method without needing to share your
    * Slope API keys.
    */
    intentSecret: '{{ORDER_INTENT_SECRET}}',
    
    /**
    * The primary color code to use for the Slope popup theme.
    */
    primaryColor: '#9aa739',
    
    /**
    * The IDs of the payment terms to display in the widget. Only approved
    * terms will be displayed. This parameter is useful if you want to display
    * different terms for different customers.
    */
    allowedTerms: ['pymt_term_abc'],
    
    /**
    * Prevents the user from viewing in full screen. Default: false
    */
    preventFullScreen: false,
    
    /**
    * This field is optional. Shows only pay now terms if available, or 
    * only buy now pay later terms if available.  
    * 
    * If you want to offer only pay now, put 'pay_now.' 
    # If you only want to offer pay later, put 'bnpl'.
    * If both want to offer both pay now and pay later, remove this field. 
    */
    offerType: 'pay_now',
    
    /**
    * Changes the final order status from "Open" to "Submitted".
    * This way the order will not be considered open and count against
    * the customer's credit limit.
    * To open the order, thet merchant would
    * need to make the Open Order API call.
    */
    deferOpenOrder: false,
    
    /**
    * Called when the user has closed the popup. See "Event callbacks page"
    */
    onClose: function(payload) {},
    
    /**
    * Called when flow reaches completion. See "Event callbacks page"
    */
    onSuccess: function(payload) {},
    
    /**
    * Called when user reaches an terminal error page. See "Event callbacks page"
    */
    onFailure: function(payload) {},
    
    /**
    * Called when a tracking event occurs. See "Event callbacks page"
    */
    onEvent: function(payload) {}
  });
</script>

<button onclick="window.Slope.open()">Pay with Slope</button><html></html>