Checkout Button

Embed a Pay Now button with one line of HTML — no backend required. The script initializes a CSRF session, validates inputs, creates a checkout session, and redirects users to The Hosted Checkout Page.

---

1) Quick Start

📘

This Checkout Button can only be tested on Live Environment. We encourage you to try the Hosted Checkout Page API if you need to try on Sandbox Environment.

Add the widget script to your page and include your Published-Key as a query parameter:

• You can find your Published-Key under Developers Configuration > API Keys in the Paystrator Dashboard.
• You can configure your Allowed Domains under Checkout Page Configuration in the Paystrator Dashboard.

⚠️

Make sure the domain serving your page is listed under Allowed Domains, otherwise requests will fail with 403 ORIGIN_NOT_ALLOWED.

🔒

Secure Session Initialization (CSRF) When button.js loads, it automatically calls /v1/auth/clients/csrf to initialize a secure browser session. This process issues CSRF cookies that are automatically included in subsequent requests, ensuring that API calls triggered by the Pay button can only originate from a real browser with valid session cookies..

Minimal usage (only pubkey is required):

HTML

<script src="https://paystrator.com/v1/buttons.js?pubkey={Published-Key}"></script>

pubkey is mandatory. All other parameters are optional. A Pay Now button will automatically appear.

---

2) Configuration

You can configure the button in two ways:

A. Query Parameters (inline)

Must be in one line (no line breaks).

HTML

<script src="https://paystrator.com/v1/buttons.js?pubkey={Published-Key}&amount=150000&description=Order%20%23123&type=qrcode&text=Pay%20Now"></script>

B. Global Config (ps-config)

Define before the script:

HTML

<script>
  window['ps-config'] = {
    pubkey: "{Published-Key}",   // required
    amount: 25000,               // optional
    description: "Order #456",   // optional
    type: "",                    // optional (empty → show all available methods; auto-select if only one)
    text: "Pay Now"              // optional (default is "Pay Now")
  };
</script>
<script src="https://paystrator.com/v1/buttons.js"></script>

If both are present, ps-config takes priority.

---

3) Parameters

Name	Required	Default	Notes
pubkey	Yes	—	Your Published Key. Checkout won’t work without this.
amount	No	—	Number (e.g. 150000). If omitted, amount can be set later in checkout.
description	No	—	Free text (e.g. Order #123). Use URL encoding if in query params.
type	No	auto	One of virtual_account, ewallet, qrcode, credit_card. If empty/omitted → checkout shows all available methods for the client. If only one method is actually available, it will be auto-selected.
text	No	Pay Now	Button label. Defaults to Pay Now if not provided.

---

4) Button Behavior

• Default label: Pay Now.
• On click: the button is hidden and a “Please wait…” message appears while creating the session, then the page redirects.
• On error: the button reappears, the “Please wait…” text hides, and an inline warning is shown.

IDs you can style:

• Button → #ps-button
• Loading text → #ps-status

(No CSS is injected by the script; all styling is up to you.)

---

5) Examples

Minimal:

HTML

<script src="https://paystrator.com/v1/buttons.js?pubkey={Published-Key}"></script>

Query params (lock to QR Code Payment):

HTML

<script src="https://paystrator.com/v1/buttons.js?pubkey={Published-Key}&amount=50000&description=Test%20Order&type=qrcode&text=Pay%20Now"></script>

Global config (show all methods / auto-select if only one):

HTML

<script>
  window['ps-config'] = {
    pubkey: "{Published-Key}",
    amount: 50000,
    description: "Test Order",
    type: "",        // empty → show all available methods; auto-select if only one is available
    text: "Pay Now"
  };
</script>
<script src="https://paystrator.com/v1/buttons.js"></script>

---

6) Troubleshooting

“Invalid Published Key”

• Cause: pubkey missing, still {Published-Key}, or null/undefined.
• Fix: Replace {Published-Key} with your real key from the dashboard.

“Unable to initialize security session (CSRF)”

• Cause: CSRF init failed (CORS/credentials/cookies).
• Fix: Allow your domain, ensure third-party cookies aren’t blocked, and the browser sends credentials.

“Checkout failed” / “Missing checkoutUrl in response”

• Cause: API /v1/checkout/button didn’t return a valid session.
• Fix: Verify account status, parameters (amount, type), and that your pubkey matches environment.

Button stays disabled

• Cause: Validation issues (e.g., non-numeric or ≤0 amount), CSRF not ready, or invalid type.
• Fix: Correct parameters; wait for CSRF to initialize; use supported type or leave it blank.