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()
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
onSuccess
callbackPerform 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 12 days ago