📱Dime Pay React Native SDK

The official React Native SDK for embedding the Dime Pay secure payment experience into any native mobile app.
Supports Android and iOS using a WebView-based architecture.

🚀 Installation

Install via npm:

npm install @dimepay/react-native-sdk

Install peer dependencies:

npm install react-native-webview

If using Expo:

npx expo install react-native-webview

🧩 Usage

Example Card Payment

import React from 'react';
import { SafeAreaView } from 'react-native';
import { DimePayWebView } from '@dimepay/react-native-sdk';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <DimePayWebView
        total={5000}
        currency="JMD"
        test={true}
        order_id="TEST-001"
        client_id="ck_jtfEtqbrX2Nf7U_evqKVy"
        styles={{
          primaryColor: '#936c6c',
          buttonColor: '#936c6c',
          buttonTextColor: '#FFFFFF',
          noBorderRadius: false,
          backgroundColor: '#DDDDDD'
        }}
        payment_methods={{
          apple_pay: true,
          google_pay: true,
          samsung_pay: true
        }}
        data="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
        onReady={(data) => console.log('✅ Ready:', data)}
        onSuccess={(data) => console.log('✅ Success:', data)}
        onFailed={(err) => console.log('❌ Failed:', err)}
        onError={(err) => console.log('❌ Error:', err)}
        onCancel={() => console.log('⚠️ Cancelled')}
        onLoading={() => console.log('⏳ Loading...')}
      />
    </SafeAreaView>
  );
}

Example Save Card

import React from 'react';
import { SafeAreaView } from 'react-native';
import { DimePayWebView } from '@dimepay/react-native-sdk';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <DimePayWebView
        test={true}
        client_id="ck_e8fgghjghnhfHfdhHHD"
        card_request_token="cr_sdffgbj_gggf"
        data="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
        origin="https://staging.dimepay.app"
        styles={{
          primaryColor: '#936c6c',
          buttonColor: '#936c6c',
          buttonTextColor: '#FFFFFF',
          noBorderRadius: false,
          backgroundColor: '#DDDDDD'
        }}
        onReady={(data) => console.log('✅ Ready:', data)}
        onSuccess={(data) => console.log('✅ Success:', data)}
        onFailed={(err) => console.log('❌ Failed:', err)}
        onError={(err) => console.log('❌ Error:', err)}
        onCancel={() => console.log('⚠️ Cancelled')}
        onLoading={() => console.log('⏳ Loading...')}
      />
    </SafeAreaView>
  );
}

🔐 Secure Payment Flow with JWT

You must generate a signed JWT on your backend and pass it to the SDK via the data prop.

Example Card Payment payload:

{
  "id": "ORDER-001",
  "total": 5000,
  "subtotal": 5000,
  "description": "This is an order from the sdk",
  "tax": 0,
  "currency": "JMD",
  "fees": [],
  "items": [{
    "id": "xxxx-xxxx-xxxx-xxxx",
    "price": 1060,
    "sku": "ABCA-IAC",
    "quantity": 1,
    "shortDescription": "",
    "name": "iMac",
    "imageUrl": "https://example.com/images/xxxxxx.jpg",
    "merchant_id": null, // Only required for Dime bridge
    "selectedOptions": [
      {
        "name": "Color",
        "value": "red",
        "type": "CHOICE"
      }
    ]
  }],
  "fulfilled": true,
  "shippingPerson": {
    "name": "Shamir Saddler",
    "street": "1 Test Ave",
    "city": "Kingston 6",
    "stateOrProvinceName": "Kingston",
    "postalCode": "00000",
    "countryName": "Jamaica"
  },
  "billingPerson": {
    "name": "Shamir Saddler",
    "street": "1 Test Ave",
    "city": "Kingston 6",
    "stateOrProvinceName": "Kingston",
    "postalCode": "00000",
    "countryName": "Jamaica"
  },
  "split": null, // Only required for Dime bridge,
  "webhookUrl": "https://yourservice.com/webhook"
}

For Dime Bridge, add the block below to the payload:

      split: [
        {
          fee: 10,
          merchant_id: 'm4D8mQ1wMrdTUIg',
          amount: 500,
        },
        {
          fee: 30,
          merchant_id: 'm7UarSiV9zWxN6v',
          amount: 1500,
        }
      ]

Also for Dime bridge the corresponding item needs to be tagged with a merchant_id

Example Card Save Payload:

{
  "webhookUrl": "https://webhook.com",
  "card_request_token": "<card_request_token>",
}

Use a backend library like jsonwebtoken to sign the payload with your secret key. Never expose your secret key in your app.

⚙️ Configuration Options

Card Payment:

| Prop | Type | Required | Description | |--------------------------|-----------|----------|--------------------------------------------------| | total | number | ✅ | The total amount to charge | | currency | string | ✅ | The currency code (e.g. JMD, USD) | | order_id | string | ✅ | Your order reference | | client_id | string | ✅ | Client ID for your integration | | data | string | ✅ | Signed JWT with payment details | | payment_methods | object | optional | Defines payment methods to enable | | styles | object | optional | Customizes UI (colors, border radius, etc.) | | test | boolean | optional | Set true for sandbox environment | | onReady | func | optional | Called when payment page is ready | | onSuccess | func | optional | Called when payment completes successfully | | onFailed | func | optional | Called if payment fails | | onError | func | optional | Called on internal error | | onCancel | func | optional | Called when user cancels | | onLoading | func | optional | Called when payment widget begins loading |

Card Save:

| Prop | Type | Required | Description | |---------------------------|-----------|----------|---------------------------------------------------| | cardRequestToken | string | ✅ | The total amount to charge | | clientId | string | ✅ | The currency code (e.g. JMD, USD) | | origin | string | ✅ | Your order reference | | clientId | string | ✅ | Client ID for your integration | | data | string | ✅ | Signed JWT with payment details | | styles | object | optional | Customizes UI (colors, border radius, etc.) | | test | boolean | optional | Set true for sandbox environment | | onReady | func | optional | Called when payment page is ready | | onSuccess | func | optional | Called when payment completes successfully | | onFailed | func | optional | Called if payment fails | | onError | func | optional | Called on internal error | | onCancel | func | optional | Called when user cancels | | onLoading | func | optional | Called when payment widget begins loading |

🧪 Notes for Expo Developers

• This SDK uses react-native-webview, which is fully supported in Expo.
• For web fallback or testing, use your web SDK or browser-based test harness.

🧾 Changelog

[1.0.13] - 2025-10-01

• Fix webviews

[1.0.12] - 2025-08-19

• Add support for Dime Bridge

[1.0.9] - 2025-07-07

• Add support for Card Tokenization

[1.0.8] - 2025-06-26

• Add support for Apple Pay, Google Pay, Samsung Pay

[1.0.5] - 2025-05-14

• Add support for webhook urls

[1.0.4] - 2025-05-13

• 🚀 Initial release
• ✅ Supports full payment flow with JWT + WebView
• 📡 Handles events: onReady, onSuccess, onError, onCancel, etc.

🛡️ License

MIT License © Dime Pay