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 Key

Required

Acceptable values

Description

code

string

A unique code per order generated by Slope API during order creation

primaryColor

6-character string, eg

9aa739

A hexadecimal color, minus the

#

, that will modify the widget's theme.

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

.

paymentMethodId

string

If 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