@wasel-finance/payment-browser

Drop-in browser SDK for Wasel Payment System. Renders a styled "Pay" button on any page — no backend required.

دليل عربي مفصّل في payment-pro/docs/gateway/09-sdk-browser.ar.md

CDN usage

<div id="pay-button"></div>

<script src="https://cdn.wasel.example.com/v1/wasel.min.js"></script>
<script>
  Wasel.init({
    publishableKey: 'pk_live_xxxxxxxx',
    baseUrl: 'https://api.wasel.example.com'
  });

  Wasel.mount('#pay-button', {
    paymentId: 'abc-123',   // create this on your server via the Node SDK
    popup: false            // true → opens checkout in a popup
  });
</script>

How it works

1. Your backend creates a payment using the Node SDK and receives { payment_id, payment_url }.
2. You pass payment_id to the Browser SDK in the user's page.
3. The SDK fetches public payment info (amount, currency, status) and renders the button.
4. Clicking the button redirects (or opens a popup) to the hosted checkout page where the user approves via wallet.

API

Wasel.init(options)

• publishableKey (required) — your pk_* key (never use secret keys in the browser).
• baseUrl — API base URL.
• checkoutBaseUrl — override the URL where the hosted checkout lives.

Wasel.mount(selector, options)

• selector — CSS selector or DOM element.
• options.paymentId (required).
• options.popup — open checkout in a popup window.

Wasel.redirect(paymentId, options)

• Sends the user directly to the hosted checkout without rendering a button.

Bundle size

~4 KB minified (no dependencies, no React).

License

MIT