Slope.js SDK API

Use the slope.min.js Javascript library on any website to launch the checkout widget.

1. Embed the Javascript library

To get started, embed the slope.min.js to your website:

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

2. Start checkout with window.SlopeJs.start()

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.slopepay.com.

Parameter KeyRequiredAcceptable valuesDescription
codestringA unique code per order generated by Slope API during order creation
primaryColor6-character string, eg 9aa739A hexadecimal color, minus the #, that will modify the widget's theme.
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.
paymentMethodIdstringIf provided, this customer's payment-method will be auto selected for them and that page will be skipped. NOTE: The user will be prevented from changing a payment method when this is selected. If an invalid payment-method is provided then it will fallback to null. See Get a customer's payment methods to fetch list of payment methods

Example HTML for opening the widget like so:

<script type="text/javascript">
  function payWithSlope() {
    // optional call to instantly display the Slope modal loading screen
    window.SlopeJs.open();

    // perform optional backend calls to generate checkout code

    // pass the checkoutCode from Slope backend API here:
    window.SlopeJs.start({
      code: '{{CHECKOUT_CODE}}',
      ...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 an order has been successfully open.
      */
      onFailure: function(payload) {},
      /**
      * Called when a tracking event occurs. See "Event callbacks page"
      */
      onEvent: function(payload) {}
    });
  }
</script>
<button onclick="payWithSlope()">Pay with Slope</button>

3. Handle the onSuccess callback

Perform a request to your backend server to mark this order as paid on your end. Once you're ready to finalize the order, make an API call to /v4/orders/:id/finalize