Safepay logo
Docs
Safepay logo
Launch Safepay

JS SDK

Learn how to integrate Safepay into your JS application


A set of components allowing easy integration of Safepay Button and Safepay Checkout into your website, powered by zoid

1. Install through NPM or Yarn

In your project root you can run either one of the below commands (depending on what package manager you use)

Yarn

NPM

Install using Yarn:

$ yarn add @sfpy/checkout-components

2. Add a script tag

Now add a script tag inside the head tag of your html file. You can choose whichever version suits your integration from the releases. The releases include v0.0.1, v0.0.2, v0.0.3, v0.0.5 and v0.0.9. You can find more abou the releases in our github repo the link to which is attached at the top of the page.

3. Define Safepay Button Instance

Now define Safepay Button Instance within the script tag inside the body tag of your html file or in a separate js file. Set the values of parameters accroding to your requirements.

4. Set currency and amount

Set the values for currency and amount. The currencies that we support include USD, PKR, GBP, AED, EUR, and SAR. You can choose one of these from the dropdown. the value for amount should be greater than 0.

5. Add your logic inside the onPayment() method

The onPayment() function is called when your customer has approved the payment. Inside your onPayment(), you can show a success message or make an API request to your servers to add the data.

Checkout Preview

You can see Safepay Checkout button preview by opening the dropdown at the top of the code block window. By entering your Merchant API Key and clicking the Safepay Checkout button, you will be redirected to Safepay's checkout page and can make a test payment.

Github Repository

You can find more about our Javascript SDK here:

JavaScript SDK Github

Feedback

What do you think of our integration document? Let us know here support@getsafepay.com

Preview
<html>
<head>
<!-- ..... -->
<script src="https://unpkg.com/@sfpy/checkout-components
@0.1.0/dist/sfpy-checkout.js"></script>
<!-- ..... -->
</head>
<body>
<!-- ..... -->
</body>
</html>
Previous
Overview
Next
Python SDK