# Manually init payment? detect starts of payment?

**URL:** <https://community.rapyd.net/t/manually-init-payment-detect-starts-of-payment/9545>\
**Category:** ⚙️ API\
**Tags:** checkout-toolkit\
**Created:** [June 24, 2022, 4:50pm UTC](https://community.rapyd.net/t/manually-init-payment-detect-starts-of-payment/9545 "2022-06-24T16:50:58Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![salvosav](https://sea2.discourse-cdn.com/flex016/user_avatar/community.rapyd.net/salvosav/32/4396_2.png) [@salvosav](https://community.rapyd.net/u/salvosav)\
**Post date:** [June 24, 2022, 4:50pm UTC](https://community.rapyd.net/t/manually-init-payment-detect-starts-of-payment/9545/1 "2022-06-24T16:50:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fredjinbility](https://avatars.discourse-cdn.com/v4/letter/f/22d042/32.png) [@fredjinbility](https://community.rapyd.net/u/fredjinbility)\
**Post date:** [June 24, 2022, 8:36pm UTC](https://community.rapyd.net/t/manually-init-payment-detect-starts-of-payment/9545/2 "2022-06-24T20:36:38Z")

</div>

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

```auto

"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](http://localhost/rapyd_ajax/index.php)

You can download sample from my google drive [Drive Sample](https://drive.google.com/file/d/186qHVCd3pmCjyfsFVg_0D3pdzJG5D7m3/view?usp=sharing)

If have any further problem, let me know. Thanks

---

<div class="post-metadata">

**Author:** ![salvosav](https://sea2.discourse-cdn.com/flex016/user_avatar/community.rapyd.net/salvosav/32/4396_2.png) [@salvosav](https://community.rapyd.net/u/salvosav)\
**Post date:** [June 25, 2022, 1:28pm UTC](https://community.rapyd.net/t/manually-init-payment-detect-starts-of-payment/9545/3 "2022-06-25T13:28:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fredjinbility](https://avatars.discourse-cdn.com/v4/letter/f/22d042/32.png) [@fredjinbility](https://community.rapyd.net/u/fredjinbility)\
**Post date:** [June 26, 2022, 8:48am UTC](https://community.rapyd.net/t/manually-init-payment-detect-starts-of-payment/9545/5 "2022-06-26T08:48:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![salvosav](https://sea2.discourse-cdn.com/flex016/user_avatar/community.rapyd.net/salvosav/32/4396_2.png) [@salvosav](https://community.rapyd.net/u/salvosav)\
**Post date:** [June 27, 2022, 9:57am UTC](https://community.rapyd.net/t/manually-init-payment-detect-starts-of-payment/9545/6 "2022-06-27T09:57:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fredjinbility](https://avatars.discourse-cdn.com/v4/letter/f/22d042/32.png) [@fredjinbility](https://community.rapyd.net/u/fredjinbility)\
**Post date:** [June 27, 2022, 7:14pm UTC](https://community.rapyd.net/t/manually-init-payment-detect-starts-of-payment/9545/7 "2022-06-27T19:14:44Z")

</div>

@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

```auto

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

alert('Clicked');

displayCheckout();
	});				
});

</script>

```

**Here is an example of clickable button**

```auto

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

```

---

<div class="post-metadata">

**Author:** ![salvosav](https://sea2.discourse-cdn.com/flex016/user_avatar/community.rapyd.net/salvosav/32/4396_2.png) [@salvosav](https://community.rapyd.net/u/salvosav)\
**Post date:** [June 28, 2022, 11:29pm UTC](https://community.rapyd.net/t/manually-init-payment-detect-starts-of-payment/9545/8 "2022-06-28T23:29:16Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![CharlesDorsett](https://sea2.discourse-cdn.com/flex016/user_avatar/community.rapyd.net/charlesdorsett/32/47_2.png) [@CharlesDorsett](https://community.rapyd.net/u/CharlesDorsett)\
**Post date:** [June 29, 2022, 5:39am UTC](https://community.rapyd.net/t/manually-init-payment-detect-starts-of-payment/9545/9 "2022-06-29T05:39:57Z")

</div>

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.