You must get customer_token, payment_secret and payment_id first at your backend to OJIRE API via request to /v1/payment-intents endpoint
Installation#
Package Managers#
CDN (Script Tag)#
Add the following line inside your <head> tag or before the closing </body> tag:
Integration Workflow#
1. Backend Initialization (Create Payment Intent)#
Before opening the modal on the frontend, your backend must request a payment_id, clientSecret, and customerToken from the Ojire API.Important: Never call this endpoint directly from the frontend to avoid exposing your Secret Key.
2. Frontend Implementation#
A. Using Vanilla JS#
When using the script tag, use the global ArtoPay object.B. Using React / ES Modules#
API Reference#
ArtoPay.openPayment(options)#
| Parameter | Type | Required | Description |
|---|
token | string | Yes | The customerToken received from your backend. |
clientSecret | string | Yes | The clientSecret from the payment intent. |
paymentId | string | Yes | The unique transaction ID (payment_id). |
orderId | string | Yes | Your internal system's order reference ID. |
sandbox | boolean | No | Force sandbox mode (defaults to global config). |
onSuccess | function | No | Triggered when status is settlement or capture. |
onPending | function | No | Triggered for waiting states (e.g., VA waiting for pay). |
onError | function | No | Triggered on failure, expiration, or cancellation. |
Helper Methods#
ArtoPay.closePayment(): Programmatically closes the active modal.
ArtoPay.isPaymentOpen(): Returns true if the modal is currently visible.
ArtoPay.configure({ sandbox: boolean }): Global SDK environment setup.
UI Preview#
The SDK will trigger a responsive payment interface as shown below:Screenshot Example#
