@sfpy/checkout-components

v1.0.1

Published

4 months ago

Safepay Checkout components, for integrating checkout products.

Downloads

2,720

0High
0Medium
0Low

sfpy

Safepay Checkout and Button

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

Prerequisites

This integration sets up online payment options using this library, which presents the Safpepay Button to your buyers.

Complete the steps in Get started to get the following sandbox information from the Developer Dashboard

Email ID and password of a sandbox account, to login and verify a checkout purchase
Sandbox API key of your Safepay sandbox account

Technical flow

You add the payment button to your webpage
Your buyer clicks a button
The button calls the Safepay Order API to set up a payment session
The button launches the Safepay Checkout experience
The buyer approves the payment
The button calls the Safepay Order API to finalize the transaction
You show a confirmation message to your buyer

Installation

You can install the Safepay Checkout Components library either through NPM or Yarn, or include the library inside a script tag in your index.html file. Both options are described below

A. 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)

NPM

npm i --save @sfpy/checkout-components

Yarn

yarn add @sfpy/checkout-components

B. Add a script tag

<html>
  <head>
    <!-- ..... -->
    <script src="https://unpkg.com/@sfpy/[email protected]/dist/sfpy-checkout.js"></script>
    <!-- ..... -->
  </head>
  <body>
    <!-- ..... -->
  </body>
</html>

You can choose whichever version suits your integration from the releases

Integration

To accept payments on your website, after you've successfuly installed the Safepay Checkout Components library, You'll have to add buttons to your website. We also have a fully working demo on the Quick Start Guide.

Support for all the popular frameworks like React, Angular and Vue comes out of the box but you can also use Vanilla javascript as showb below.

<!DOCTYPE html>
<html>
  <head>
    <title>Safepay checkout demo</title>
    <script
      type="text/javascript"
      src="https://unpkg.com/@sfpy/[email protected]/dist/sfpy-checkout.js"
    ></script>
  </head>
  <body>
    <!-- Set up a container element for the button -->
    <div id="safepay-button-container"></div>
    <script>
      safepay
        .Button({
          env: "sandbox",
          client: {
            sanbox: "sec_733defcf-835f-4cd1-99fd-b3e62dd83fe0",
          },
          style: {
            mode: "light", // dark or light
            size: "large", // small medium large
            variant: "primary", // primary dark
          },
          orderId: "12344", // Your custom order ID
          source: "website" // The source of the payment
          // Details to set up the transaction
          // when a payment button is clicked
          payment: {
            currency: "PKR",
            amount: 1000.5,
          },
          // Finalize the transaction after payer approval
          onPayment: function (data) {
            // At this point your customer has approved the payment
            // and you can show a success message or make an API request
            // to your servers to add the data.
            return fetch(`/api/orders/mark-paid`, {
              method: "post",
            });
          },
          onCancel: function () {
            console.log("cancelled");
          },
        })
        .render("#safepay-button-container");
    </script>
  </body>
</html>

Props

The Safepay Checkout Button expects the following props to be passed to it in order to your configure a purchase for your buyer

React Integration

Since we're huge fans of React at Safepay, we've integrated this library into our products like Quick Links through the following React integration that ships out of the box with this library

import safepay from "@sfpy/checkout-components";
import React from "react";
import ReactDOM from "react-dom";

const SafepayButtonInstance = safepay.Button.driver("react", {
  React: React,
  ReactDOM: ReactDOM,
});

export default SafepayButtonInstance;

And then in another file you import SafepayButtonInstance and render is using familiar React and JSX.

import SafepayButtonInstance from './safepay-button-intance'

const MyCheckoutPage = ({ orderId }) => (
  <div>
    <p>Checkout for order id {orderId}</p>
    <SafepayButtonInstance
      env={'sandbox'}
      client={{
        'sandbox': 'sec_733defcf-835f-4cd1-99fd-b3e62dd83fe0'
      }}
      style={{
        mode: 'light',
        size: 'medium',
        variant: 'primary'
      }}
      orderId={"12344"},
      payment={{
        "currency": "PKR",
        "amount": 1000.50
      }}
      onPayment={(data) => {
        // At this point your customer has approved the payment
        // and you can show a success message or make an API request
        // to your servers to add the data.
        return fetch(`/api/orders/mark-paid`, {
          method: "post",
        })
      }}
      onCancel={() => {
        console.log('payment cancelled')
      }}
    />
  </div>
)

Local development

If you want to contribute or you're looking to run the demo included in this package, please read on.

Clone this repository on your local machine

git clone https://github.com/getsafepay/safepay-checkout-components.git

cd into the directory and install node_modules

~/safepay-checkout-components: yarn install

To run the demo, run yarn run serve or npm run serve and follow the instructions printed on the terminal

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme