Oracle APEX and Stripe v3 - part 3

  

Oracle APEX 20.x and Stripe v3 integration

Stripe v3 integration Server side - part 3

If you have taken part in this blog series exploring new Stripe APIs we have already seen how to integrate APEX with new Stripe checkout form on a client side. 

 

Today we will look into how the same can be done by using a server side processing where payment will be triggered from APEX PL/SQL over doing it directly in Stripe checkout form we have been redirected to so far. 

 

This post is de-facto an upgraded version of Trent's post we used originally to get Stripe up and running. We will apply the same principles just using latest Stripe APIs and libraries.

 

First difference to my previous two posts is that our APEX apps will not be redirected for a payment to Stipe integrated checkout.

 

Pretty much we will be doing the exact opposite we will build a form in APEX and send it using REST API for processing. 

 

Secondly we will be using amounts instead of Stripe defined products and prices in post 1 and post 2.

Stripe checkout form:

 

will be replaced with APEX built form:

 

Of course this is where the freedom and control come into play for us as developers. 

 

We can build forms as we are used to as in any standard APEX page. 

 

Let's see how. Create a new app page with Blank with Attributes region with this code as a source. 

 

On a page level we will add a reference to Stripe JS

https://js.stripe.com/v3/ 

We need to add CSS that will handle the look and feel of the form and Javascript code that will initiate Stripe payment form for us.

 

Both codes can be found at the link above under CSS and JavaScript sections.

 

What the JS code will do is among other bits and pieces is initialize Stripe card component, create elements on the form and finally attach an event listener using

document.querySelector('.payStripe').addEventListener('click',

Most importantly it will catch the token returned by Stripe which we can use later in our PL/SQL processing to charge the card.

 

If you run the page now you should see the new form with card fields added to it. 

 

Great thing is that Stripe injects everything needed for our form to be able to accept payments. This includes all card validations and processing. Isn't this great!

 

Okay to be fair our job is still not done so we will add few fields to store tokens return by Stripe payments. 

 

Create two new fields  

Now let's make sure we update the JS lines with public key and with your page item name.

//update this line with your ITEM NAME
$s('PX_STRIPE_TOKEN',result.token.id);

Run the page at this stage and click on a Pay button. You should see a token ID returned into PX_STRIPE_TOKEN.

This is the most critical part as without it the next step will not work. Please make sure you get the token back from Stripe.

 

At this stage it does not creates a charge on a card but only 'initializes it'. 

 

The rest of the code is pretty much exactly the same as in an old version of the form checkout. What we will do now is create an on change DA on PX_STRIPE_TOKEN that will execute PL/SQL call:

begin
    stripe_api.set_secret(:STRIPE_SECRET);
    
    :PX_PAYMENT_STATUS :=
        stripe_api.charge_card (
            p_amount => 2500
          , p_source => :PX_STRIPE_TOKEN
          , p_description => 'Charged from a D.A page X at '|| sysdate
        );
end;

Once we got this in, our form becomes fully operational and is able to send payments to Stripe API. 

 

If details are entered and payment is successful we will use another DA to notify the user that transaction was successful.

 

In case you did not get stripe_api.charge_card package so far here is a code for it.

 

How do we check if payment was successful from Stripe side - you can open Payments link in Dashboard 

https://dashboard.stripe.com/test/payments 

also you can check all logs under Developers -> Logs:  

https://dashboard.stripe.com/test/logs

 

Further to this we can easily create a new REST data source in APEX

with simple credentials

 

and then leverage this in interactive report based on REST data source we just created to help us monitor transactions from our applications. ;)
  

I am hoping this will be of help. Lots to take in and read so thank you for sticking with me till the end.

Happy APEXing,
Lino