Skip to main content
important

Make sure you have visited both Installation & Configuration and Basic Integration documents before proceeding with building your own UI.

info
  • You can checkout payment and errors handling here: Payment Handling
  • You can checkout Moyasar's APIs for all kinds of below payments here and here.
  • Learn more about Idempotency to avoid duplicate payments.

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({
  givenId: 'UUID_V4', // Optional. A UUID for the payment provided by you to support Idempotency, UUID v4 is recommended. It is going be the ID of the created payment.
  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 cases
}

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
  }
}

After showing the 3D secure webview, listen for a redirection to your provided callback URL above and extract the following values:

if (url.host === callbackUrlHost) {
  const id = url.searchParams.get('id') ?? '';
  const status = url.searchParams.get('status') ?? '';
  const message = url.searchParams.get('message') ?? '';

  // Handle the new payment status where it could be paid, failed, authorized, etc...
}
info
  • You can utilize our WebviewPaymentAuth component for handling the 3D Secure webview.
  • Refer to this document to verify the payment after the 3D secure flow.

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({
  givenId: 'UUID_V4', // Optional. A UUID for the payment provided by you to support Idempotency, UUID v4 is recommended. It is going be the ID of the created payment.
  amount: 20000,
  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');
info
  • Checkout how to extract the Apple Pay payment token from the Apple Pay APIs here.

Build Your Own Samsung Pay Button​

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

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

const samsungPaySource = new SamsungPayRequestSource({
  samsungPayToken: 'SAMSUNG_PAY_PAYMENT_TOKEN', // Replace with actual Samsung Pay payment token from Samsung Pay APIs
});

const samsungPayPaymentRequest = new PaymentRequest({
  givenId: 'UUID_V4', // Optional. A UUID for the payment provided by you to support Idempotency, UUID v4 is recommended. It is going be the ID of the created payment.
  amount: 20000,
  currency: 'SAR',
  description: 'Test payment',
  metadata: { size: '250 g' },
  source: samsungPaySource,
});

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

const paymentResponse = await createPayment(samsungPayPaymentRequest, '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({
  givenId: 'UUID_V4', // Optional. A UUID for the payment provided by you to support Idempotency, UUID v4 is recommended. It is going be the ID of the created payment.
  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
  const paymentResponse = await sendOtp('123456', paymentResponse.source.transactionUrl);

  // Handle the result
  if (paymentResponse instanceof PaymentResponse) {
    // Handle cases where payment status could be paid, failed, etc...
  } else {
    // Handle MoyasarError cases
  }
} else {
  // Handle MoyasarError cases
}

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',
  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');