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, Stc Pay or Samsung 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,
  SamsungPay,
  SamsungPayConfig,
  TokenResponse,
  PaymentResult,
} from 'react-native-moyasar-sdk';

const paymentConfig = new PaymentConfig({
  givenId: 'PAYMENT_UNIQUE_ID', // Optional. A UUID for the payment provided by you to support Idempotency, UUID v4 is recommended.
  publishableApiKey: 'YOUR_PUBLISHABLE_API_KEY', // Your Moyasar public API key
  // Amount in the smallest currency unit.
  // For example:
  // 10 SAR = 10 * 100 Halalas which will be 1000 in the amount field
  // 10 KWD = 10 * 1000 Fils which will be 10000 in the amount field
  // 10 JPY = 10 JPY (Japanese Yen does not have fractions) which will be 10 in the amount field
  amount: 20000, // 20000 Halalas = 200.00 SAR
  currency: 'SAR', // Optional (default: SAR)
  merchantCountryCode: 'SA', // Optional. Specify your merchant's principle place of business for Apple Pay and Samsung Pay (default: SA)
  description: 'order #1324',
  metadata: { size: '250 g' }, // Optional
  supportedNetworks: ['mada', 'visa', 'mastercard', 'amex'], // Optional
  creditCard: new CreditCardConfig({ saveCard: false, manual: false }), // Optional
  applePay: new ApplePayConfig({
    // Required for Apple Pay payments
    merchantId: 'YOUR_MERCHANT_ID',
    label: 'YOUR_STORE_NAME',
    manual: false, // Optional (default: false)
  }),
  createSaveOnlyToken: false, // Optional. For save only token flow
  samsungPay: new SamsungPayConfig({
    // Required for Samsung Pay payments
    serviceId: 'YOUR_SERVICE_ID', // Your Samsung Pay service ID in the Samsung Pay Merchant dashboard
    merchantName: 'YOUR_STORE_NAME',
    orderNumber: 'TRANSACTION_ORDER_NUMBER', // Optional (default: random UUID)
    manual: false, // Optional (default: false)
  }),
});
info
  • The orderNumber for Samsung Pay is needed for refunds, chargebacks, and Visa card payments. If you do not provide it, a random UUID will be generated. It will appear in the response's metadata in a samsungpay_order_id field upon a successful payment (e.g. paymentResult.metadata.samsungpay_order_id).
  • Read more about Idempotency to understand the givenId parameter and avoid duplicate payments.

Configuring Components​

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

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

function PaymentView() {
  return (
    <ScrollView>
      <CreditCard
        paymentConfig={paymentConfig}
        onPaymentResult={onPaymentResult}
        style={{ textInputs: { borderWidth: 1.25 } }}
      />
      <SamsungPay
        paymentConfig={paymentConfig}
        onPaymentResult={onPaymentResult}
      />
      <ApplePay
        paymentConfig={paymentConfig}
        onPaymentResult={onPaymentResult}
        style={{ buttonType: 'buy' }}
      />
      <StcPay
          paymentConfig={paymentConfig}
          onPaymentResult={onPaymentResult}
          style={{ textInputs: { borderWidth: 1.25 } }}
      />
    </ScrollView>
  );
}
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, Samsung 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) {
    } else if (paymentResult instanceof UnexpectedError) {
    }
  }
}
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.