Slope.js widget

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

1. Embed the 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>

2. Initialize the widget

The widget has several configuration options to customize for a specific use case. All available parameters are listed below. View more interactive options at demo.slope.so.

Parameter KeyRequiredAcceptable valuesDescription
flowcheckout| pre_qualifyWhether to display integrated checkout mode or standalone prequalification mode.
intentSecretstringA short-lived order intentor customer intent token generated through the API.
primaryColor6-character string, eg 9aa739A hexadecimal color, minus the #, that will modify the widget's theme.
preventFullScreentrue|falseDefault: false. If true, displays the widget as a full screen instead of a popup.
offerTypepay_now|bnplWhether to only display a specific subset of offer terms.
deferOpenOrdertrue|falseDefault: false. Whether or not to change the order status to open or submitted. More reading here.
useVendorNametrue|falseDefault: false. Whether or not to display order.vendor.name on the confirmation page, rather than the merchant business name.

Initialize the widget like so:

<script type="text/javascript">
  window.initializeSlope({
    flow: 'checkout', 
    intentSecret: '{{ORDER_INTENT_SECRET}}',
		...additionalParameters,
    /**
    * 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"
    */
    onOrderOpen: function(payload) {},
    /**
    * Called when an order has been successfully open.
    */
    onFailure: function(payload) {},
    /**
    * Called when a tracking event occurs. See "Event callbacks page"
    */
    onEvent: function(payload) {}
  });
</script>

3. Open the widget

Using a button or some other event handler, open the Slope widget so that it gets displayed to the user.

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

Slope widget