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 Key	Acceptable values	Description
`flow`	`checkout`\| `pre_qualify`	Whether to display integrated checkout mode or standalone prequalification mode.
`intentSecret`	string	A short-lived order intentor customer intent token generated through the API.
`primaryColor`	6-character string, eg `9aa739`	A hexadecimal color, minus the `#`, that will modify the widget's theme.
`preventFullScreen`	`true`\|`false`	Default: false. If true, displays the widget as a full screen instead of a popup.
`offerType`	`pay_now`\|`bnpl`	Whether to only display a specific subset of offer terms.
`deferOpenOrder`	`true`\|`false`	Default: false. Whether or not to change the order status to `open` or `submitted`. More reading here.
`useVendorName`	`true`\|`false`	Default: 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>