How to pass first name and last name parameters to Paystack

Question

I want to store more customer information from my Paystack form such as first name, last name and shipping address, but only email and amount is stored. I discovered this can be done using metadata but I really don't know how to go about it. I'd be glad if anyone can help.

The HTML payment form

    <form class="container" id="paymentForm">
      <h3>Please fill the form below</h3>
      <div class="form-group">
        <label for="first_name">First Name</label>
        <input class="form-control" type="text" id="first-name" required />
      </div>
      <div class="form-group">
        <label for="last_name">Last Name</label>
        <input class="form-control" type="text" id="last-name" required />
      </div>
      <input type="text" class="amount" id="amount" value="" hidden>
      <div class="form-group">
        <label for="email">Email Address</label>
        <input class="form-control" type="email" id="email-address" required />
      </div>
      <div class="form-group">
        <label for="address">Shipping Address</label>
        <input class="form-control" type="text" id="shipping-address" required />
      </div>
      <div class="form-submit">
        <button type="submit" class="btn btn-primary btn-lg" onclick="payWithPaystack()"> Pay </button>
      </div>
    </form>

Here's Paystack Js code

const paymentForm = document.getElementById('paymentForm');
    paymentForm.addEventListener("submit", payWithPaystack, false);

    function payWithPaystack(e) {
      e.preventDefault();
      let handler = PaystackPop.setup({
        key: 'pk_test_xxxxxxxxxx', // Replace with your public key
        email: document.getElementById("email-address").value,
        amount: document.getElementById("amount").value * 100,
        //these three values (first_name, last_name and address) aren't retrieved
        first_name: document.getElementById("first-name").value,
        last_name: document.getElementById("last-name").value,
        address: document.getElementById("shipping-address").value,
        ref: 'CLE-BPS' + Math.floor((Math.random() * 1000000000) + 1), // generates a pseudo-unique reference. Please replace with a reference you generated. Or remove the line entirely so our API will generate one for you
        // label: "Optional string that replaces customer email"
        onClose: function() {
            window.location = "https://my-url/?transaction=cancelled";
          alert('Transaction cancelled.');
        },
        callback: function(response) {
          let message = 'Payment complete! Reference: ' + response.reference;
          alert(message);
          window.location = "https://my-url/verify_transaction.php?reference=" + response.reference;
        }
      });

      handler.openIframe();
    }

verify_transaction.php

<?php
$ref = $_GET['reference'];
if ($ref == "") {
    header("Location: javascript://history.go(-1)");
    exit();
}


$curl = curl_init();

curl_setopt_array($curl, array(
    CURLOPT_URL => "https://api.paystack.co/transaction/verify/" . rawurlencode($ref),
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "GET",
    CURLOPT_HTTPHEADER => array(
        "Authorization: Bearer SECRET_KEY",
        "Cache-Control: no-cache",
    ),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
    echo "cURL Error #:" . $err;
} else {
    //echo $response;
    $result = json_decode($response);
}
 if ($result->data->status == 'success') {
    $status = $result->data->status;
    $reference = $result->data->reference;
    $amount = $result->data->amount;
    $l_name = $result->data->customer->last_name;
    $f_name = $result->data->customer->first_name;
    $fullname = $f_name . " " . $l_name;
    $customer_email = $result->data->customer->email;
    $shipping_address = $result->data->customer->address;
    $customer_id = $result->data->customer->id;
    $date = date('d-m-Y H:i:s');

    include "config.php";
    $stmt = $link->prepare("INSERT INTO transactions (status, reference, fullname, amount, customer_email, shipping_address, customer_id, date_purchased) VALUES (?, ?, ?, ?, ?, ?, ?, ?)");
    $stmt->bind_param("ssssssss", $status, $reference, $fullname, $amount, $customer_email, $shipping_address, $customer_id, $date);
    $stmt->execute();
    if (!$stmt) {
        echo "Oops...Something went wrong";
    } else {
        header("Location: https://my-url/success.php?status=success");
        exit();
    }
    $stmt->close();
    $link->close();
} else {
    header("Location: error.php");
    exit();
}
 

Answer 1

Adding metadata to Paystack payment is very simple. Just visit Paystack Meta Docs and get it hooked into your project.

For my case this is what I have:

  metadata: {
    custom_fields: [
      {
        display_name: 'First name',
        variable_name: 'first_name',
        value: authStore.user.first_name
      },
      {
        display_name: 'Last name',
        variable_name: 'last_name',
        value: authStore.user.last_name
      },
      {
        display_name: 'Phone number',
        variable_name: 'phone_number',
        value: authStore.user.phone
      }
    ],
  }

It is similar to the one in the documentation.

Answer 2

modify your paystack js code to look like this:

metadata:{
          custom_field:[
                {
                    first_name: document.getElementById("first-name").value,
                    last_name: document.getElementById("last-name").value,
                    address: document.getElementById("shipping-address").value,
                }
            ]
        }

so from the code above, I am creating a property, metadata and value is an object, and inside of the object, I am creating another property, custom_field and the value is an array. Place the additional fields you want to add in an object and place it inside of the custom_field property defined. You can place an many object as you want inside the custom_field array defined.

modify your verify_transaction.php to get the values;
After $result = json_decode($response);

 
$first_name = $result->data->metadata->custom_field[0]->first_name,
$last_name  = $result->data->metadata->custom_field[0]->last_name,
$address    = $result->data->metadata->custom_field[0]->address,

However, you can echo $response to see where the defined metadata is.