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

Updated 10 months ago

Did this page help you?