React Native

Integration Options Mobile / APP React Native

React Native | Novalnet Docs

Mobile commerce of late has been on the rise, Novalnet allows it's customers to use React Native as one of the key components. This option allows merchants to integrate seamlessly with their Mobile customers. Setting up almost all the state-of-the-art payment methods haven't been so easy before, as you can now use Novalnet's customizable hosted payment page in your mobile app.

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.

How does it work?

When the customer clicks on the order button in his/her mobile app to confirm the purchase, Novalnet's hosted payment form will be displayed into the app as WebView. The customer can choose the preferred payment type and once the customer completes the payment process, you will receive the payment result to your corresponding return URL's (transaction.return_url, transaction.error_return_url). Besides that, you can perform the /transaction/details API call to retrieve the additional transaction result

Requirements

To implement this methodology, you need to have the following libraries installed in your server

react-native-webview
react-native-base64

Steps to complete the purchase via WebView

Follow the below steps for the integration via mobile app using React Native:

Step 1: Generating payment URL

Post all the required transaction parameters to Novalnet in advance without the user interaction, thus submitting all the transaction based data (user/order details, merchant credentials, etc. other than the sensitive payment data) through server call, to create the payment URL (hosted at Novalnet server).

Merchant-defined identifier for the capture request. Used for tracking, reconciliation, auditing, or mapping the capture to an internal order, invoice, or reference ID.

The sample in the steps below will contain only the minimal parameters for the demo execution and explanation. To know more about all the parameters, it's descriptions, header explanation and results, refer this >>link<<.

Customization of payment page with your choice of layout & design

The payment page hosted at Novalnet is completely customizable with respect to the layout and design, you can adjust it as per your desire. Please refer the hosted_page block on the parameter reference link to customize the layout per stylesheet, header, footer, etc.

REACT JS

componentDidMount() {
  // Need to enter your payment access key value here
  const payment_access_key  = '###YOUR_PAYMENT_ACCESS_KEY###';

  // Now, have to encode the payment_access_key value with the base64 encode
  const encoded_data        = base64.encode(payment_access_key);

  // Action Endpoint
  const endpoint            = 'https://payport.novalnet.de/v2/seamless/payment';

  // Build the Headers
  const headers = {
    // The Content-Type should be "application/json"
    "Content-Type": "application/json",

    // The charset should be "utf-8"
    "Charset":"utf8",

    // Optional
    "Accept":"application/json",

    // The formed authenticate value (case-sensitive)
    "X-NN-Access-Key": encoded_data
  };

  const data = {};

  // Build Merchant Data
  data.merchant = {
    // Your API signature value
    "signature": "###YOUR_API_SIGNATURE###",

    // Your corresponding tariff ID
    "tariff": "###YOUR_TARIFF_ID###"
  };

  // Build Customer Data
  data.customer = {
    // Shopper's first name
    "first_name": "Max",

    // Shopper's last name
    "last_name": "Mustermann",

    // Shopper's email
    "email": "test@novalnet.de",

    // Shopper's customer number from the shop
    "customer_no": "###CUSTOMER_NUMBER###",

    // Shopper's Telephone number
    "tel": "+49 089 123456",

    // Shopper's Mobile number
    "mobile": "+49 174 7781423",

    // Shopper's IP address - Decomment it based on your usage
    // "customer_ip": "###CUSTOMER_IP###",

    // Shopper's birthdate value YYYY-MM-DD - Decomment it based on your usage
    // "birth_date": "1992-06-10",

    // Shopper's gender - Decomment it based on your usage
    // "gender": "u",

    // Shopper's company vat ID value - Decomment it based on your usage
    // "vat_id": "DE123456",

    // Shopper's company regestration number - Decomment it based on your usage
    // "reg_no": "HRB1234",

    // Shopper's company tax ID value - Decomment it based on your usage
    // "tax_id": "123/123/123",

    // Shopper's session value - Decomment it based on your usage
    // "session": "fedgrgst5653653hdgfsvgdsf622627e",

    // Shopper's fax number - Decomment it based on your usage
    // "fax": "+49 89 654321",

    // Shopper's billing address
    "billing": {
      // House number
      "house_no": "2",

      // Street
      "street": "Musterstr",

      // City
      "city": "Musterhausen",

      // zip
      "zip": "12345",

      // Country's ISO code
      "country_code": "DE",

      // Name of the company - Decomment it based on your usage
      // "company": "ABC GmbH"
    }
  };

  // Build Transaction Data
  data.transaction = {
    // The Payment type of the transaction
    "payment_type": "###PAYMENT_TYPE###",

    // The transaction amount in smaller currency unit
    // For the predefined tariff, amount is not required to be passed explicitly
    "amount": "###TRANSACTION_AMOUNT###",

    // The transaction currency's ISO code
    // For the predefined tariff, currency is not required to be passed explicitly
    "currency": "###TRANSACTION_CURRENCY###",

    // The mode of the transaction
    "test_mode": "###TEST_MODE###",

    // The order no of the transaction
    "order_no": "###TRANSACTION_ORDER_NUMBER###",

    // Need to be specify this for the Redirect payment types to which you need to redirect on SUCCESS
    "return_url": "###YOUR_RETURN_URL###",

    // Need to be specify this for the Redirect payment types to which you need to redirect on FAILURE (optional)
    "error_return_url": "###YOUR_ERROR_RETURN_URL###",

    // The Notify URL value for this particular transaction
    "hook_url": "###HOOK_URL###",

    // The flag to create the token for the payment data - Decomment it based on your usage
    // "create_token": 1,
  };

  // Hosted Payment page customizations
  data.hosted_page = {
    // Change logo in the Hosted payment page
    "logo": "###YOUR_SHOP_LOGO###",

    // Change the styling of the Hosted payment page - Decomment it based on your usage
    // "css_url": "###YOUR_CSS_URL###",

    // Payment types to be displayed in the Hosted Payment Page
    "display_payments": [
        "CREDITCARD",
        "DIRECT_DEBIT_SEPA",
        "INVOICE",
        "IDEAL",
         
        "PAYPAL"
    ],

    // Payment types to be hidden in the Hosted Payment Page - Used when necessary and display_payments when not in use
    //"hide_payments": [
    //    "CREDITCARD",
    //    "DIRECT_DEBIT_SEPA",
    //    "INVOICE",
    //    "IDEAL",
    //     
    //    "PAYPAL"
    //],

    // Hide the following sections from the Hosted Payment Page
    "hide_blocks": [
        "ADDRESS_FORM",
        "SHOP_INFO",
        "LANGUAGE_MENU",
        "HEADER",
        "TARIFF"
    ],

    // Customize the display of the following pages
    "skip_pages": [
        "CONFIRMATION_PAGE",
        "SUCCESS_PAGE",
        "PAYMENT_PAGE"
    ]
  };

  let request_data = {
    method: 'POST',
    body: JSON.stringify(data),
    headers: headers
  }
  return fetch(endpoint, request_data)
        .then(response => response.json())
        .then((responseJson) => {
          // Handle Response
          if(responseJson.result.redirect_url && responseJson.transaction.txn_secret) {
            this.setState({
              nnJsonData: responseJson
            })
          } else {
            //Handle the failure cases here
            console.log('Failure message:'+responseJson.result.status_text);
          }
        })
        .catch((error) => {
          //Handle the error
          console.error(error);
        });
  }

Step 2: Loading the payment form in the mobile APP

Once the payment URL is created successfully, you can render the payment page as WebView in your mobile APP.

REACT JS

render() {
   // Load the Payment form URL
   return this.state.nnJsonData ? (
      <webview source="{{" this.state.nnjsondata.result.redirect_url="" uri:="" }=""></webview>
   ) : null; //Handle the UI loading icon/any other failure info display
}

The hosted payment form from Novalnet will be rendered in the following way as WebView,

You can also download the sample code file for the React Native JS from the >>link<<

Step 3: Receiving / Handling payment status

On successful completion of payment, the user will be redirected to the given transaction.return_url passed in the initial payment URL generation request (refer Step 1 above).

The decision making about the WebView result will solely depend on the parameter status under the object result. The parameter can take up either of the values SUCCESS or FAILURE.

RESPONSE

// To handle the API response, we need the TID and STATUS as minimal parameters for the decision making
if (RESPONSE.STATUS && RESPONSE.TID)
{
  if (RESPONSE.STATUS == 'SUCCESS')
  {
    // Perform the success procedure
  }
  else
  {
    // Perform the failure procedure
  }
}
else
{
  // Fatal error as the mandatory parameters for the decision making is not present 
}
?>

Retrieving all the transaction details (optional)

If you are already handling webhook process, this step is not required, because your webhook receives all the transaction details.

The WebView response will give you only the minimum details about the transaction, to retrieve entire transaction details, make the /transaction/details API by using the tid returned in the WebView response from Step 2

To know more about the parameters, sample codes and results for retrieving the transaction details API, refer to this >>link<<

React Native

How does it work?

Requirements

Steps to complete the purchase via WebView

Step 1: Generating payment URL

Merchant-defined identifier for the capture request. Used for tracking, reconciliation, auditing, or mapping the capture to an internal order, invoice, or reference ID.

Customization of payment page with your choice of layout & design

Step 2: Loading the payment form in the mobile APP

Step 3: Receiving / Handling payment status

Retrieving all the transaction details (optional)

Related Topics