Web SDK

Integrate payments into your web application with @yassir/payments-js

Installation

Install the SDK using your preferred package manager:

Bash

npm install @yassir/payments-js

npm install @yassir/payments-js

Bash

yarn add @yassir/payments-js

yarn add @yassir/payments-js

Bash

pnpm add @yassir/payments-js

pnpm add @yassir/payments-js

Quick Start

Initialize the SDK with a client secret obtained from your backend:

Initialize SDK

import { YassirPayment } from '@yassir/payments-js';

const payment = new YassirPayment({
  clientSecret: 'pa_xxx_secret_yyy',
  locale: 'en-US',

  onReady: () => {
    console.log('Payment form is ready');
  },

  onSuccess: (result) => {
    console.log('Payment succeeded:', result.paymentId);
    // Redirect to success page
  },

  onError: (error) => {
    console.error('Payment failed:', error.code, error.message);
    // Show error message to user
  },

  onCancel: () => {
    console.log('Payment was canceled');
    // Handle cancellation
  },
});

// Mount the payment form
payment.mount('#payment-container');

import { YassirPayment } from '@yassir/payments-js';

const payment = new YassirPayment({
  clientSecret: 'pa_xxx_secret_yyy',
  locale: 'en-US',

  onReady: () => {
    console.log('Payment form is ready');
  },

  onSuccess: (result) => {
    console.log('Payment succeeded:', result.paymentId);
    // Redirect to success page
  },

  onError: (error) => {
    console.error('Payment failed:', error.code, error.message);
    // Show error message to user
  },

  onCancel: () => {
    console.log('Payment was canceled');
    // Handle cancellation
  },
});

// Mount the payment form
payment.mount('#payment-container');

Configuration Options

Option	Type	Description
`clientSecret`	string	Required. Payment-scoped secret from your backend.
`locale`	string	UI language. Supported: en-US, fr-FR, ar-DZ
`appearance`	object	Customize the look and feel of the payment form.

Coming Soon

Detailed React, Vue, and vanilla JS integration examples will be added in Phase 2.