React Native

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);
        });
  }

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