Manually init payment? detect starts of payment?

⚙️ API
1

Hello everybody,
I’m implementing Rapyd Checkout Toolkit.
I’m not sure now if I’m missing something or this Toolkit library is the actually missing these functionalities.

  1. Is it possible to init the payment via javascript?
    We have the method displayCheckout() to show the payment’s form. I can’t find a way to trigger the click on the button Pay.

We have a payment page where we ask the customers other information, like their email. To allow a smoother process and have just one page where they can get registered and pay at the same time. Unfortunately if we cannot trigget the payment-button this seems to be impossible to achive.

  1. Detect click on payment button?
    Once a customer clicks pays, it seems we can detect only what happens after the payment has been made - successful or not - but not just before that.
    That would be usefull to show a custom waiting page and indeed have a real custom payment flow.
1 Like
2

Hi @salvosav, Welcome to Rapyd Community. I have solved a similar issue before. This might get you started

Here is a Dynamic working sample with jquery/ajax and php

Here is how it works.

When a User Click on the Purchase button, An Ajax Call is used to Post the Purchased items to dynamically generate a Payment Checkout Page Id on the fly by passing the data to Process_checkout.php. If the Checkout Page is successfully created, Then Rapyd Payment System is loaded for user to complete Payments.

Upon Visa or Master Card Payments, An Ajax Call is automatically made to Rapyd Checkout Retrieval API to update and get Payments ID, Payment Status etc.

If Other Payments method other than Card is used, Upon Payments, The User will be redirected to Rapyd Payments Completion Page to complete his Payments and payments status and other details are automatically fetched…

Here is the steps for testing:

1.)Edit settings.php to configure your Rapyd Payments API details, Languages, Payment methods etc. where appropriates.

2.) Edit Rapyd_access_keys.php to configure your Sandbox Rapyd Access Keys and Secret.

To use it in production, You can also change the API URL to point to productions API Endpoint and also remember to enter access credentials for Productions.

3.) Whatever Payment method that you configure in setting.php must correspond dynamically with the one coded in the process_checkout.php. please see this line of code


"payment_method_types_include"  => [
$payment_method_types_include_grabpay,
    "$payment_method_types_include_visacard",
   "$payment_method_types_include_mastercard",

    ]
];

You can call up browser and test your code at

http://localhost/rapyd_ajax/index.php

You can download sample from my google drive Drive Sample

If have any further problem, let me know. Thanks

3 Likes
3

Hello @fredjinbility , thanks for your detailed answer.

Yes I can see how your solution works and it’s an okeysh workaroud.
Yesterday I’ve been workin to a very similar solution with the only difference that, instead of redirecting the user to the payment page, I’m trying to load Rapyd checkout in the same page directly on the fly.

This anyway confirms that it’s not possible to init the actual payment. What I mean is that it would be great, once the customer adds their car’s details, to start the payment via js.
Yours (and mine) solution both require an additional action by the customer. From my experience the less a customer has to click the higher is the conversion rate.

I’m not really sure why such basic functionality is not part of the API.

1 Like
5

Thanks for getting back @salvosav I believe its still possible. You will need to make an ajax call dynamically to load rapyd payments toolkit once you are ready to proceed with card payments

1 Like
6

What I can do is to initiate Rapyd Checkout Toolkit, but I can’t init the payment flow.
Let’s assume that the checkout is being displayed on the page. Apart from the card’s payment info, I have an additional email field and I give the user the option to flag a checkbox if they also want to be registered in the website.

This is where the problem starts. If I show all the inputs data at once, email + card’s info, I should check - before processing the payment - if that users is registered or not. Basically I may or may not trigger actions before processing the actual payment.

The problem is this scenario is not achievable with rapyd toolkit. Because we only have a payment’s button that cannot either be hidden nor triggered in any other way than the user actually clicking on it.

The best would be:

  1. I init the checkout toolkit without a payment button;
  2. The user clicks on a button that I have created and that is not part of the checkout (it’s not inside the checkout’s iframe);
  3. I run an async check and do additional operations if needed;
  4. I trigger the payment itself;

Like we have a displayCheckout() it would be enough to have a sendCheckout() or something similar.

1 Like
7

@salvosav, I can bet you the Rapyd Checkout Tool meets your needs. it just for you to figure a way out.

I think bootstrap 5 modal popup will help you hide and unhide some certain things. Again you can put displayCheckout() function into a clickable Jquery/Ajax call so that it can be triggered when button is clicked.
something like


<script>
$(document).ready(function(){
$('#purchase_btn').click(function(){

alert('Clicked');

displayCheckout();
	});				
});

</script>

Here is an example of clickable button


<button class="btn btn-primary" id="purchase_btn">Purchase</button>
1 Like
8

@fredjinbility thanks for your reply.

What you call purchase_btn is not a purchase button. With this solution you, basically, show the form to add the card’s detail. No attempt to pay has happened till now.

Once the customer has added the card’s detail he needs to click on ‘Pay’ - a button provided by the toolkit integration.
It seems there’s no way to trigger the click on this button via js.

1 Like
9

If “purchase_btn is not a purchase button”, you run the risk of confusing yourself 6 months from now when this code is no longer fresh in your mind. Call it what it is, then refactor as required.

1 Like