react-native-amazon-payment-services

Amazon Payment Service Sdk react native

TFS creation

Installation

npm install react-native-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 'react-native-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: '[email protected]',
    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

| Name | Value | Description | Mandatory | | ---------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------|---------------| | showStandardCheckoutPage | boolean | Navigates to Amazon Payment Service Standard Checkout screen | Yes | | environment | 'TEST', 'PRODUCTION' | Parameter used to determine whether the request is going to be submitted to the test or production environment. | Yes | | requestCode | number | Unique ID for this request. | Yes | | showLoading | boolean | Flag to show or hide the loading dialog. | Yes | | showResponsePage | boolean | Flag to show or hide response page after payment is done. | Yes | | requestObject | object | Parameters you need to send when you send a request (the full list of parameters is in the last section of the document) | Yes | | onSuccess | function | Callback to handle when the transaction is processed successfully. | Yes | | onFailure | function | Callback to handle when the transaction is failed. | Yes | | onCancel | function | Callback to handle when the user cancels the payment by clicking the back button. | No |

Custom UI Checkout

import {
  CustomCheckoutView,
} from 'react-native-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 'react-native-amazon-payment-services';

//...

  const requestObjectDirectPay: FortRequestObjectDirectPay = {
    command: 'AUTHORIZATION',
    merchant_reference: 'ORD-0000007682',
    amount: '100',
    currency: 'AED',
    language: 'en',
    customer_email: '[email protected]',
    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

| Name | Value | Description | Mandatory | | ---------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------|---------------| | environment | 'TEST', 'PRODUCTION' | Parameter used to determine whether the request is going to be submitted to the test or production environment. | Yes | | style | object | Set the height and width of the view | Yes | | payButtonProps | object | Customization of the pay button | Yes | | requestObject | object | Parameters you need to send when you send a request (the full list of parameters is in the last section of the document) | Yes | | onSuccess | function | Callback to handle when the transaction is processed successfully. | Yes | | onFailure | function | Callback to handle when the transaction is failed. | Yes |

Request Parameters (FortRequestObject)

| Attribute | Type | Description | Mandatory | Maximum | Example | |----------------------|--------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|---------|-----------------------------------------------------------------------| | command | Alpha | Command.Possible/ expected values: AUTHORIZATION, PURCHASE | Yes | 20 | PURCHASE | | merchant_reference | Alphanumeric | The Merchant’s unique order number. | Yes | 40 | XYZ9239-yu898 | | amount | Numeric | The transaction’s amount. *Each currency has predefined allowed decimal points that should be taken into consideration when sending the amount | Yes | 10 | 10000 | | currency | Alpha | The currency of the transaction’s amount in ISO code 3. | Yes | 3 | AED | | language | Alpha | The checkout page and messages language.Possible/ expected values: en/ ar | Yes | 2 | en | | customer_email | Alphanumeric | The customer’s email.Special characters: _ - . @ + | Yes | 254 | [email protected] | | sdk_token | Alphanumeric | An SDK Token to enable using the Amazon Payment Services Mobile SDK. | Yes | 100 | Dwp78q3 | | token_name | Alphanumeric | The Token received from the Tokenization process.Special characters: . @ - _ | No | 100 | Op9Vmp | | payment_option | Alpha | Payment option.Possible/ expected values:- MASTERCARD- VISA- AMEX- MADA (for Purchase operations and eci Ecommerce only) Click here to download MADA Branding Document - MEEZA (for Purchase operations and ECOMMERCE eci only) | No | 10 | VISA | | eci | Alpha | Ecommerce indicator.Possible/ expected values: ECOMMERCE | No | 150 | ECOMMERCE | | order_description | Alphanumeric | A description of the order.Special characters:'/ . _ - # : $ Space | No | 150 | iPhone 6-S | | customer_ip | Alphanumeric | It holds the customer’s IP address. *It’s Mandatory, if the fraud service is active. *We support IPv4 and IPv6 as shown in the example below. | No | 45 | IPv4 → 192.178.1.10IPv6 → 2001:0db8:3042:0002:5a55:caff:fef6:bdbf | | customer_name | Alpha | The customer’s name.Special characters: _ \ / - .' | No | 40 | John Smith | | phone_number | Alphanumeric | The customer’s phone number.Special characters: + - ( ) Space | No | 19 | 1234567890789 | | settlement_reference | Alphanumeric | The Merchant submits unique value to Amazon Payment Services. The value is then passed to the Acquiring bank and displayed to the merchant in the Acquirer settlement file. | No | 34 | XYZ9239-yu898 | | merchant_extra1 | Alphanumeric | Extra data sent by merchant. Will be received and sent back as received. Will not be displayed in any report. | No | 250 | TFS | | merchant_extra2 | Alphanumeric | Extra data sent by merchant. Will be received and sent back as received. Will not be displayed in any report. | No | 250 | TFS | | merchant_extra3 | Alphanumeric | Extra data sent by merchant. Will be received and sent back as received. Will not be displayed in any report. | No | 250 | TFS | | merchant_extra4 | Alphanumeric | Extra data sent by merchant. Will be received and sent back as received. Will not be displayed in any report. | No | 250 | Team TFS | | merchant_extra5 | Alphanumeric | Extra data sent by merchant. Will be received and sent back as received. Will not be displayed in any report. | No | 250 | TFS |