rn-amazon-payment-services v0.2.3

rn-amazon-payment-services

Amazon Payment Service Sdk react native package

Installation

npm install rn-amazon-payment-services

Android

You need to add the repository to your build file. Add it in your root build.gradle (/android/build.gradle) at the end of repositories

allprojects {
  repositories {
    ...
      maven { url "https://android-sdk.payfort.com" }
  }
}

You need to also make sure that following two permission are set in the AndroidManifest.xml (android/app/src/main/AndroidManifest.xml):

    < uses-permission android:name="android.permission.INTERNET" />
    < uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

iOS

1- Add the following code to your Podfile (inside the target section):

pod 'PayFortSDK'

2- Add the following to the bottom of your Podfile:

   post_install do |installer|
        installer.pods_project.targets.each do |target|
          if ['PayFortSDK'].include? target.name
            target.build_configurations.each do |config|
                config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
            end
          end
        end
      end

Usage

import {
  getDeviceId,
  FortRequestObject,
  StandardCheckout,
} from 'rn-amazon-payment-services';

// ...

export default function App() {

  const [deviceId, setDeviceId] = useState<string>('');
  const [showStandardCheckout, setShowStandardCheckout] = useState<boolean>(false);

  const setupDeviceId = async () => {
    const id: string = await getDeviceId();
    setDeviceId(id);
  };

  const onSuccess = (response: any) => {
    console.log('success', response);
    setShowCustomScreen(false);
  };

  const onFailure = (response: any) => {
    console.log('failure', response);
    setShowCustomScreen(false);
  };

  const onCancel = (response: any) => {
    console.log('cancel', response);
    setShowStandardCheckout(false);
  };

  // request object example for standard and custom ui checkout
  const requestObject: FortRequestObject = {
    command: 'PURCHASE',
    merchant_reference: 'ORD-0000007682',
    amount: '100',
    currency: 'AED',
    language: 'en',
    customer_email: 'sam@gmail.com',
    sdk_token: sdkToken,
    payment_option: 'VISA',
  };

  //...

  // Standard Checkout component
  return(
      <StandardCheckout
        showStandardCheckoutPage={showStandardCheckout}
        environment={'TEST'}
        requestCode={123455}
        showLoading={true}
        showResponsePage={true}
        requestObject={requestObject}
        onSuccess={onSuccess}
        onFailure={onFailure}
        onCancel={onCancel}
      />
  )
}

// ...

Standard Checkout Props

Custom UI Checkout

import {
  CustomCheckoutView,
} from 'rn-amazon-payment-services';


// ...


// Custom Checkout UI component
  return(
    <CustomCheckoutView
      requestObject={requestObject}
      environment={'TEST'}
      style={{ width: 300, height: 400 }}
      payButtonProps={{
        marginLeft: 20,
        marginTop: 20,
        backgroundColor: '#026cff',
        text: 'Pay',
        textSize: 20,
        textColor: '#ffffff',
        buttonWidth: 40,
        buttonHeight: 40,
        borderRadius: 20,
        borderWidth: 1,
        borderColor: '#383333',
      }}
      onFailure={onFailure}
      onSuccess={onSuccess}
    />
  )

Direct Pay Checkout

import {
  DirectPayButton,
  FortRequestObjectDirectPay,
} from 'rn-amazon-payment-services';

//...

  const requestObjectDirectPay: FortRequestObjectDirectPay = {
    command: 'AUTHORIZATION',
    merchant_reference: 'ORD-0000007682',
    amount: '100',
    currency: 'AED',
    language: 'en',
    customer_email: 'sam@gmail.com',
    sdk_token: sdkToken,
    payment_option: 'VISA',
    token_name: tokenName,
    card_security_code: '123',
  };


  return(
      <DirectPayButton
        requestObject={requestObjectDirectPay}
        environment={'TEST'}
        style={{ width: 200, height: 100 }}
        payButtonProps={{
          marginLeft: 20,
          marginTop: 20,
          backgroundColor: '#026cff',
          text: 'Pay',
          textSize: 20,
          textColor: '#ffffff',
          buttonWidth: 40,
          buttonHeight: 40,
          borderRadius: 20,
          borderWidth: 1,
          borderColor: '#383333',
        }}
        onFailure={onFailure}
        onSuccess={onSuccess}
      />
    )

Custom UI and Direct Checkout Props

Request Parameters (FortRequestObject)

License

MIT