React Native SePay Payment WebView

Use SePay Checkout in React Native and React Native Web through a WebView-based integration. Supports Android, iOS, and Web without ejecting.

Description

The library allows you to integrate SePay Checkout into React Native and React Native Web using a WebView-based payment flow.

It automatically generates and submits the required POST form to SePay and supports:

• React Native (Android & iOS)
• React Native Web
• Deep Linking
• Success/Error/Cancel callbacks
• Local HTML mode
• Remote hosted HTML mode
• Full WebView props support

Prerequisites

This library relies on react-native-webview.

Install it first:

npm install react-native-webview

or

yarn add react-native-webview

If your project uses React Native Web:

npm install @chainplatform/react-native-web-webview

or

yarn add @chainplatform/react-native-web-webview

Then follow the setup guide:

https://github.com/ChainPlatform/react-native-web-webview#readme

Installation

npm install react-native-sepay-payment-webview

or

yarn add react-native-sepay-payment-webview

Usage

Import

import SePayPayment from "react-native-sepay-payment-webview";

Basic Example

<SePayPayment
    actionUrl="https://pay-sandbox.sepay.vn/v1/checkout/init"
    useRemote={false}
    params={{
        merchant: "SP-TEST-CT43B94A",
        currency: "VND",
        order_amount: "100000",
        operation: "PURCHASE",
        order_description: "Payment for Order #12345",
        order_invoice_number: "INV_1780239530",
        customer_id: "customer_001",
        success_url: "myapp://payment/success",
        error_url: "myapp://payment/error",
        cancel_url: "myapp://payment/cancel",
        signature: "YOUR_SIGNATURE"
    }}
    successUrl="myapp://payment/success"
    errorUrl="myapp://payment/error"
    cancelUrl="myapp://payment/cancel"
    onSuccess={(url) => {
        console.log("success", url);
    }}
    onError={(url) => {
        console.log("error", url);
    }}
    onCancel={(url) => {
        console.log("cancel", url);
    }}
/>

Example POST Form

The component automatically generates and submits a form similar to:

<form method="POST" action="https://pay-sandbox.sepay.vn/v1/checkout/init" id="sepay-payment-form" class="payment-form">
    <input type="hidden" name="merchant" value="SP-TEST-CT43B94A">
    <input type="hidden" name="currency" value="VND">
    <input type="hidden" name="order_amount" value="100000">
    <input type="hidden" name="operation" value="PURCHASE">
    <input type="hidden" name="order_description" value="Payment for Order #12345">
    <input type="hidden" name="order_invoice_number" value="INV_1780239530">
    <input type="hidden" name="customer_id" value="customer_001">
    <input type="hidden" name="success_url" value="myapp://payment/success">
    <input type="hidden" name="error_url" value="myapp://payment/error">
    <input type="hidden" name="cancel_url" value="myapp://payment/cancel">
    <input type="hidden" name="signature" value="YOUR_SIGNATURE">
    <button type="submit">Proceed to Payment</button>
</form>

Component Props

| Prop | Type | Required | Description | |--------|--------|--------|--------| | actionUrl | string | Yes | SePay checkout endpoint | | params | object | Yes | POST parameters sent to SePay | | successUrl | string | No | URL used to detect payment success | | errorUrl | string | No | URL used to detect payment failure | | cancelUrl | string | No | URL used to detect payment cancellation | | onSuccess | function | No | Called when successUrl is reached | | onError | function | No | Called when errorUrl is reached | | onCancel | function | No | Called when cancelUrl is reached | | onUrlChange | function | No | Called whenever the WebView URL changes | | useRemote | boolean | No | Use hosted HTML instead of bundled HTML | | forceAndroidUserAgent | boolean | No | Force custom Android user agent | | ...WebViewProps | any | No | All react-native-webview props |

Local HTML Mode

Default mode.

<SePayPayment
    actionUrl="https://pay-sandbox.sepay.vn/v1/checkout/init"
    params={params}
/>

The payment form is generated locally inside the WebView and automatically submitted.

Remote HTML Mode

Useful when hosting sepay.html on GitHub Pages or another static hosting service.

<SePayPayment
    useRemote={true}
    actionUrl="https://pay-sandbox.sepay.vn/v1/checkout/init"
    params={params}
/>

Deep Linking

Configure your URLs:

params={{
    success_url: "myapp://payment/success",
    error_url: "myapp://payment/error",
    cancel_url: "myapp://payment/cancel"
}}

Listen for callbacks:

<SePayPayment
    successUrl="myapp://payment/success"
    errorUrl="myapp://payment/error"
    cancelUrl="myapp://payment/cancel"
    onSuccess={(url) => console.log(url)}
    onError={(url) => console.log(url)}
    onCancel={(url) => console.log(url)}
/>

WebView Props

The component supports all props from react-native-webview.

Example:

<SePayPayment
    actionUrl={actionUrl}
    params={params}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    startInLoadingState={true}
/>

Contributing

Pull requests are highly appreciated.

For major changes, please open an issue first to discuss what you would like to change.

Related Projects

• https://github.com/ChainPlatform
• https://github.com/ChainPlatform/react-native-web-webview

🪪 License

MIT © 2026 Chain Platform

💖 Support & Donate

If you find this package helpful, consider supporting the development:

| Currency | Address | |----------------|----------| | MB Bank | MB Bank | | Bitcoin (BTC) | 17grbSNSEcEybS1nHh4TGYVodBwT16cWtc | | Ethereum (ETH) | 0xa2fd119a619908d53928e5848b49bf1cc15689d4 | | Tron (TRX) | TYL8p2PLCLDfq3CgGBp58WdUvvg9zsJ8pd | | DOGE (DOGE) | DDfKN2ys4frNaUkvPKcAdfL6SiVss5Bm19 | | USDT (SOLANA) | cPUZsb7T9tMfiZFqXbWbRvrUktxgZQXQ2Ni1HiVXgFm |

Your contribution helps maintain open-source development under the Chain Platform ecosystem 🚀