Skip to main content

Basic Integration

We will walk you through the basic integration of Moyasar's React Native SDK to accept payments through Apple Pay, Credit Card or Stc Pay in your React Native app.

Configuring a Payment​

We need to prepare a PaymentConfig object:

import {
  ApplePay,
  ApplePayConfig,
  CreditCard,
  CreditCardConfig,
  GeneralError,
  NetworkEndpointError,
  NetworkError,
  PaymentConfig,
  PaymentResponse,
  PaymentStatus,
  StcPay,
  TokenResponse,
  PaymentResult,
} from 'react-native-moyasar-sdk';

const paymentConfig = new PaymentConfig({
  publishableApiKey: 'YOUR_PUBLISHABLE_API_KEY',
  // Amount in the smallest currency unit.
  // For example:
  // 10 SAR = 10 * 100 Halalas
  // 10 KWD = 10 * 1000 Fils
  // 10 JPY = 10 JPY (Japanese Yen does not have fractions)
  amount: 10000, // 10000 Halalas = 100.00 SAR
  currency: 'SAR', // Optional (default: SAR)
  description: 'order #1324',
  metadata: { size: '250 g' }, // Optional
  supportedNetworks: ['mada', 'visa', 'mastercard', 'amex'], // Optional
  creditCard: new CreditCardConfig({ saveCard: true, manual: false }), // Optional
  applePay: new ApplePayConfig({
    // Required for Apple Pay payments
    merchantId: 'YOUR_MERCHANT_ID',
    label: 'YOUR_STORE_NAME',
    manual: false, // Optional
  }),
  createSaveOnlyToken: false, // Optional for save only token flow
});

Configuring Components​

You can now configure the Credit Card, Apple Pay, and Stc Pay components in your view as shown in the following example:

function onPaymentResult(paymentResult: PaymentResult) {
  // ...
}

function PaymentView() {
  return (
    <View>
      <CreditCard
        paymentConfig={paymentConfig}
        onPaymentResult={onPaymentResult}
        style={{ textInputs: { borderWidth: 1.25 } }}
      />
      <ApplePay
        paymentConfig={paymentConfig}
        onPaymentResult={onPaymentResult}
        style={{ buttonType: 'buy' }}
      />
      <StcPay
          paymentConfig={paymentConfig}
          onPaymentResult={onPaymentResult}
          style={{ textInputs: { borderWidth: 1.25 } }}
      />
    </View>
  );
}
info
  • You can customize the Credit Card, Apple Pay and Stc Pay components by utlizing the style parameter. Learn more

Handling Payment Result​

Now, we can handle Credit Card, Apple Pay and Stc Pay payments result as follows:

function onPaymentResult(paymentResult: PaymentResult) {
  if (paymentResult instanceof PaymentResponse) {
    switch (paymentResult.status) {
      case PaymentStatus.paid:
        // Handle success
        break;
      case PaymentStatus.failed:
        // Handle failure
        break;
      // Handle other statuses if needed
    }
  } else if (paymentResult instanceof TokenResponse) {
    // Not needed if not utilizing 'createSaveOnlyToken' flow
    // Handle token response
  } else {
    // Handle error

    if (paymentResult instanceof NetworkEndpointError) {
    } else if (paymentResult instanceof NetworkError) {
    } else if (paymentResult instanceof GeneralError) {
    }
  }
}
info
  • Make sure to dismiss Moyasar’s components after getting the result.
  • You can find payment statuses here: Payment Status Reference

Migration guide​

Visit changelog page for migration guide from previous versions.