This is Part 6 of our WooCommerce Payment Gateway series.
In this article, we move our tested mobile payments gateway API code and integrate it into the WooCommerce Payment Gateway. This will allow us to make proper payments for our goods straight from the WooCommerce store with mobile payments.
In the previous article, we created a Sandbox Test Payments PI for WooCommerce Payment Gateway. We created an admin menu item, and all you need to do is hit the admin menu item and on clicking it, you will receive a message on our phone prompting you to make payment and that message will be stored.
That means our API is working. All the variables that we need are working and we are ready to have this particular API integrated inside our WooCommerce Payment Gateway.
If you prefer, you can watch the full video here.
In this tutorial, we shall cover the following
- Introduction to wordpress webhooks
- Reviewing the API
- Posting Content to our REST API
- Creating the Plugin
- Wp_remote_retrieve_response_code function
Integrating the Mobile API into WooCommerce Payment Gateway
Copy this code from query-api.php and take it into our Payleo payment gateway. Class-wc-payment-gateway-payleo.php
We shall go all the way down till we find our process_payment function because we’re going to apply the payments processing there.
Codesnippet from the query-api.php
$api_key = '5384z9XT7';
$widget_key = '53525880bd675362d449b60185f82ddf';
$phone = '2578288658885555';
$amount = 500;
$network_id = '1'; // mtn
$reason = 'Test';
$url = 'https://e.patasente.com/phantom-api/pay-with-patasente/' . $api_key . '/' . $widget_key . '?phone=' . $phone . '&amount=' . $amount . '&mobile_money_company_id=' . $network_id . '&reason=' . 'Test';
var_dump($url);
$response = wp_remote_post( $url, array( 'timeout' => 45 ) );
if ( is_wp_error( $response ) ) {
$error_message = $response->get_error_message();
return "Something went wrong: $error_message";
} else {
echo '<pre>';
var_dump( wp_remote_retrieve_body( $response ) );
echo '</pre>';
}
}
So whenever our value is actually greater than zero, then we run this function payleo_payment_processing(). For this API, you need to have a value that is above UGX 1000 but for now, we leave it at zero and then allow this to run.
I am going to paste everything inside here and from that, we shall be able to make it dynamic based on the information that is coming from our WooCommerce Order. So let’s save this here.
CodeSnippet showing the first part of the process payment function
private function payleo_payment_processing( $order ) {
$api_key = '5384z9XT7';
$widget_key = '53525880bd675362d449b60185f82ddf';
$phone = '2578288658885555';
$amount = 500;
$network_id = '1'; // mtn
$reason = 'Test';
$url = 'https://e.patasente.com/phantom-api/pay-with-patasente/' . $api_key . '/' . $widget_key . '?phone=' . $phone . '&amount=' . $amount . '&mobile_money_company_id=' . $network_id . '&reason=' . 'Test';
var_dump($url);
$response = wp_remote_post( $url, array( 'timeout' => 45 ) );
if ( is_wp_error( $response ) ) {
$error_message = $response->get_error_message();
return "Something went wrong: $error_message";
} else {
echo '<pre>';
var_dump( wp_remote_retrieve_body( $response ) );
echo '</pre>';
}
}
Make this Dynamic.
There are a couple of things that we need to add to our payment settings. For example, we don’t always change our API key and our widget key so we shall have to make some forms for them.
// Get settings.
$this->title = $this->get_option( 'title' );
$this->description = $this->get_option( 'description' );
$this->api_key = $this->get_option( 'api_key' );
$this->widget_id = $this->get_option( 'widget_id' );
$this->instructions = $this->get_option( 'instructions' );
$this->enable_for_methods = $this->get_option( 'enable_for_methods', array() );
$this->enable_for_virtual = $this->get_option( 'enable_for_virtual', 'yes' ) === 'yes';
We shall also set up the general properties and then for our API key and widget key, we shall just add a message that says this is our API key and widget ID.
Codesnippet showing the setup for general properties.
/**
* Setup general properties for the gateway.
*/
protected function setup_properties() {
$this->id = 'payleo';
$this->icon = apply_filters( 'woocommerce_payleo_icon', plugins_url('../assets/icon.png', __FILE__ ) );
$this->method_title = __( 'Payleo Mobile Payments', 'payleo-payments-woo' );
$this->api_key = __( 'Add API Key', 'payleo-payments-woo' );
$this->widget_id = __( 'Add Widget ID', 'payleo-payments-woo' );
$this->method_description = __( 'Have your customers pay with Payleo Mobile Payments.', 'payleo-payments-woo' );
$this->has_fields = false;
}
The next thing we have to do is add them here in the init_form_fields
Codesnippet showing the init_form_fields() function
public function init_form_fields() {
$this->form_fields = array(
'enabled' => array(
'title' => __( 'Enable/Disable', 'payleo-payments-woo' ),
'label' => __( 'Enable Payleo Mobile Payments', 'payleo-payments-woo' ),
'type' => 'checkbox',
'description' => '',
'default' => 'no',
),
'title' => array(
'title' => __( 'Title', 'payleo-payments-woo' ),
'type' => 'text',
'description' => __( 'Payleo Mobile Payment method description that the customer will see on your checkout.', 'payleo-payments-woo' ),
'default' => __( 'Payleo Mobile Payments', 'payleo-payments-woo' ),
'desc_tip' => true,
),
'api_key' => array(
'title' => __( 'API Key', 'payleo-payments-woo' ),
'type' => 'text',
'description' => __( 'Add your API key', 'payleo-payments-woo' ),
'desc_tip' => true,
),
'widget_id' => array(
'title' => __( 'Widget ID', 'payleo-payments-woo' ),
'type' => 'text',
'description' => __( 'Add your Widget key', 'payleo-payments-woo' ),
'desc_tip' => true,
),
'description' => array(
'title' => __( 'Description', 'payleo-payments-woo' ),
'type' => 'textarea',
'description' => __( 'Payleo Mobile Payment method description that the customer will see on your website.', 'payleo-payments-woo' ),
'default' => __( 'Payleo Mobile Payments before delivery.', 'payleo-payments-woo' ),
'desc_tip' => true,
),
'instructions' => array(
'title' => __( 'Instructions', 'payleo-payments-woo' ),
'type' => 'textarea',
'description' => __( 'Instructions that will be added to the thank you page.', 'payleo-payments-woo' ),
'default' => __( 'Payleo Mobile Payments before delivery.', 'payleo-payments-woo' ),
'desc_tip' => true,
),
'enable_for_methods' => array(
'title' => __( 'Enable for shipping methods', 'payleo-payments-woo' ),
'type' => 'multiselect',
'class' => 'wc-enhanced-select',
'css' => 'width: 400px;',
'default' => '',
'description' => __( 'If payleo is only available for certain methods, set it up here. Leave blank to enable for all methods.', 'payleo-payments-woo' ),
'options' => $this->load_shipping_method_options(),
'desc_tip' => true,
'custom_attributes' => array(
'data-placeholder' => __( 'Select shipping methods', 'payleo-payments-woo' ),
),
),
'enable_for_virtual' => array(
'title' => __( 'Accept for virtual orders', 'payleo-payments-woo' ),
'label' => __( 'Accept payleo if the order is virtual', 'payleo-payments-woo' ),
'type' => 'checkbox',
'default' => 'yes',
),
);
}
Let’s save this and go back to our WooCommerece payment gateway settings and see what that looks like. We now have a new field API key and Widget ID field.
So instead of having the API key and widget ID inside your code, just copy and save them in your database. You can always change them and save settings again. The information that will be dynamically needed will be added there.
Codesnippet showing dynamic information that will always be changed.
$api_key = $this => api_key;
$widget_key = $this => widget_key;Get your Phone number
The next thing that we need to do is get our phone number. When you look at the payment checkout, we already have post payment_number inside our payment gateway in payleo-checkout-description-fields.php
function techiepress_checkout_update_order_meta( $order_id ) {
if( isset( $_POST['payment_number'] ) || ! empty( $_POST['payment_number'] ) ) {
update_post_meta( $order_id, 'payment_number', $_POST['payment_number'] );
}
}So we shall copy it and paste it into our payleo_payment_pricessing() function.
$phone = esc_attr( $_POST['payment_number'] );So that we have dynamic information always coming in from our form.
Because we’re sending this to our API we need to sanitize it. So we shall esc_attr() which escapes it and makes it clean for our API to receive.
We need the order amount. Since we already have the order Id, we shall just get the order total and pass it inside an argument and then after passing it, we shall also receive it here -in the payleo_payment_processing() so we shall just call it total.
$total = intval( $order->get_total() );We can also change the API key and widget key. We’re reducing our code to make it cleaner and neater.
Codesnippet showing sanitized API key and widget ID code
$url = 'https://e.patasente.com/phantom-api/pay-with-patasente/' . $this->api_key . '/' . $this->widget_id . '?phone=' . $phone . '&amount=' . $total . '&mobile_money_company_id=' . $network_id . '&reason=' . 'Payment for Order: ' .$order_id;Let’s run the function and see what response we get on our mobile.
Ensure your plugin is activated.
Go to your shop and add a couple of items and go to view, fill in the form. Choose Payleo mobile payments as the gateway.
Put in your payment number and choose a payment network and click place order.
You will notice a request on your phone asking you to make a payment. The API is now waiting to get a signal from your side to see if you have made a payment.
So if you make your payment and it is approved, then you know that that payment is successful. You will get a thank you response.
We can change our order status to ‘payments have been made’ and if it fails, then the status should be, ‘payments pending’.
Wp_remote_retrive_response_code() function
If our remote response code is not 200, we return an error and that will automatically show our payment gateway that there’s an issue. We can also echo what the problem is. Here we return ‘payments pending’.
Codesnippet showing a failed payment
if ( 200 !== wp_remote_retrieve_response_code( $response ) ) {
$order->update_status( apply_filters( 'woocommerce_payleo_process_payment_order_status', $order->has_downloadable_item() ? 'wc-invoiced' : 'processing', $order ), __( 'Payments pending.', 'payleo-payments-woo' ) );
}Then if our remote response is 200, we return a success message showing the order payment completed
Codesnippet showing a successful payment
if ( 200 === wp_remote_retrieve_response_code( $response ) ) {
$response_body = wp_remote_retrieve_body( $response );
var_dump($response_body['message']);
if ( 'Thank you! Your payment was successful' === $response_body['message'] ) {
$order->payment_complete();Codesnippet showing payleo_process_payment function
private function payleo_payment_processing( $order ) {
$total = intval( $order->get_total() );
var_dump($total);
$phone = esc_attr( $_POST['payment_number'] );
$network_id = '1'; // mtn
$reason = 'Test';
$url = 'https://e.patasente.com/phantom-api/pay-with-patasente/' . $this->api_key . '/' . $this->widget_id . '?phone=' . $phone . '&amount=' . $total . '&mobile_money_company_id=' . $network_id . '&reason=' . 'Payment for Order: ' .$order_id;
var_dump($url);
$response = wp_remote_post( $url, array( 'timeout' => 45 ) );
if ( is_wp_error( $response ) ) {
$error_message = $response->get_error_message();
return "Something went wrong: $error_message";
}
if ( 200 !== wp_remote_retrieve_response_code( $response ) ) {
$order->update_status( apply_filters( 'woocommerce_payleo_process_payment_order_status', $order->has_downloadable_item() ? 'wc-invoiced' : 'processing', $order ), __( 'Payments pending.', 'payleo-payments-woo' ) );
}
if ( 200 === wp_remote_retrieve_response_code( $response ) ) {
$response_body = wp_remote_retrieve_body( $response );
var_dump($response_body['message']);
if ( 'Thank you! Your payment was successful' === $response_body['message'] ) {
$order->payment_complete();
// Remove cart.
WC()->cart->empty_cart();
// Return thankyou redirect.
return array(
'result' => 'success',
'redirect' => $this->get_return_url( $order ),
);
}
}
}Testing the response messages
Try out one more it, fail it for example by refusing to make the payment and see if it returns our error message and also place another order and complete the payment to see if it returns the success message.
Go back to your shop and make some orders to test this out.
Conclusion
I am pretty sure you have done that we have our mobile payments API integration working successfully.
Get all the code here on Github.
Leave a Reply