Build Your Own UI

We provide the flexibility to build your own UI for accepting payments in your React Native app.

Build Your Own Credit Card UI

We need to prepare the CreditCardRequestSource and PaymentRequest objects as follows:

import {
  createPayment,
  CreditCardRequestSource,
  PaymentRequest,
  PaymentResponse,
  CreditCardResponseSource,
  PaymentStatus,
} from 'react-native-moyasar-sdk';

const ccSource = new CreditCardRequestSource({
  name: 'John Doe',
  number: '4111111111111111',
  cvc: '123',
  month: '12',
  year: '28',
  tokenizeCard: false,
  manualPayment: false,
});

const ccPaymentRequest = new PaymentRequest({
  amount: 1000,
  currency: 'SAR',
  description: 'Test payment',
  metadata: { size: '250 g' },
  source: ccSource,
  callbackUrl: 'https://example.com/callback', // Replace with the URL to be redirected to after a 3D secure transaction
});

Next, call the createPayment function with the ccPaymentRequest object and your public API key, then handle the response:

const paymentResponse = await createPayment(ccPaymentRequest, 'YOUR_PUBLISHABLE_API_KEY');

if (paymentResponse instanceof PaymentResponse) {
  if (paymentResponse.status != PaymentStatus.initiated) {
    // Handle cases where payment status could be paid, failed, authorized, etc...
    return;
  }

  // Start the 3D secure webview process
  startCcPaymentAuthProcess(paymentResponse);
} else {
  // Handle MoyasarError
}

async function startCcPaymentAuthProcess(paymentResponse: PaymentResponse) {
  if (paymentResponse.source instanceof CreditCardResponseSource) {
    // Show the 3D secure webview using the URL in `paymentResponse.source.transactionUrl`
  } else {
    // Handle unexpected Credit Card payment error
  }
}

info

• You can utilize our WebviewPaymentAuth component for handling the 3D Secure webview.
• You can checkout further payment handling here: Payment Handling

Build Your Own Apple Pay Button

We need to prepare the ApplePayRequestSource and PaymentRequest objects as follows:

import {
  ApplePayRequestSource,
  createPayment,
  PaymentRequest,
  PaymentResponse,
} from 'react-native-moyasar-sdk';

const applePaySource = new ApplePayRequestSource({
  applePayToken: 'APPLE_PAY_PAYMENT_TOKEN', // Replace with actual Apple Pay payment token from Apple Pay APIs
});

const applePayPaymentRequest = new PaymentRequest({
  amount: 1000,
  currency: 'SAR',
  description: 'Test payment',
  metadata: { size: '250 g' },
  source: applePaySource,
});

Next, call the createPayment function with the applePayPaymentRequest object and your public API key, then handle the response:

const paymentResponse = await createPayment(applePayPaymentRequest, 'YOUR_PUBLISHABLE_API_KEY');

Build Your Own Stc Pay UI

We need to prepare the StcPayRequestSource and PaymentRequest objects as follows:

import {
  createPayment,
  StcPayRequestSource,
  PaymentRequest,
  PaymentResponse,
  StcPayResponseSource,
  PaymentStatus,
  sendOtp,
} from 'react-native-moyasar-sdk';

const stcPaySource = new StcPayRequestSource({
  mobile: '0512345678',
});

const stcPayPaymentRequest = new PaymentRequest({
  amount: 1000,
  currency: 'SAR',
  description: 'Test payment',
  metadata: { size: '250 g' },
  source: stcPaySource,
});

Next, call the createPayment function with the stcPayPaymentRequest object and your public API key, then handle the response:

const paymentResponse = await createPayment(stcPayPaymentRequest, 'YOUR_PUBLISHABLE_API_KEY');

if (paymentResponse instanceof PaymentResponse) {
  if (paymentResponse.status != PaymentStatus.initiated) {
    // Handle cases where payment status could be paid, failed, authorized, etc...
    return;
  }

  if (!(paymentResponse.source instanceof StcPayResponseSource)) {
    // Handle unexpected Stc Pay payment error
    return;
  }

  // After the user enters the OTP, send it to Moyasar using the `sendOtp` function
  await sendOtp('123456', paymentResponse.source.transactionUrl);
  // Handle result
} else {
  // Handle MoyasarError
}

info

• You can checkout further payment handling here: Payment Handling

Build Your Own Credit Card Token UI

We need to prepare the TokenRequest object as follows:

import { createToken, TokenRequest } from 'react-native-moyasar-sdk';

const tokenRequest = new TokenRequest({
  name: 'John Doe',
  number: '4111111111111111',
  cvc: '123',
  month: '12',
  year: '28',
  saveOnly: true,
  callbackUrl: 'https://example.com/callback', // Replace with the URL to be redirected to after a 3D secure transaction
});

Next, call the createToken function with the tokenRequest object and your public API key, then handle the response:

const tokenResponse = await createToken(tokenRequest, 'YOUR_PUBLISHABLE_API_KEY');