Accepting payments with Stripe in APEX, Part 1

I've just been investigating a payment gateway for an APEX application. I already knew about the recent startup Stripe, and their fees seemed just as good (if not better) than the other well-known contenders - I figured there would be a good place to start.

Now, I haven't actually worked with the others, but so far, I'm very impressed with the system/API available. From my little bit of research, all the card information will be stored on Stripe's servers, so we need not deal with storing and encrypting customers card information. With that, we are left with this general workflow:

1. Include a form for customers to enter there card information
2. The form gets submitted to Stripe's servers
3. Returned is a token. We use this to then complete the charge

For this first part, I'll be focusing on the form. In particular, Stripe provides a form for us that we can re-use. Check out the documentation on the form here - https://stripe.com/docs/tutorials/checkout. Keep in mind, you can just as easily develop your own form if you have your own design in mind.

The basic example (for a form) they give on the docs is:

<form action="" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="[redacted]"
    data-amount="2000"
    data-name="Demo Site"
    data-description="2 widgets"
    data-image=""
    data-locale="auto">
  </script>
</form>

Side note: In your account, you can retrieve your API tokens (and test tokens) from: https://dashboard.stripe.com/account/apikeys

So, if you add that to a static region on your page, you will see a nice checkout button and form:

What would then happen after submitting the payment information, is the form would get submitted, with some additional parameters being sent in the POST request. Being on APEX, this won't do since the whole page is wrapped around a form - resulting in this being an embedded form (unsupported).

Looking at the documentation some more, they have a more advanced example giving us more control over what happens once the Pay button is selected.

We still need to leave a reference to checkout.js on our page, so for now this can live in our region where the pay button will live. The next part will be to add a regular APEX button to our region - with the action being Defined by a Dynamic Action.

Then, we need a dynamic action for when the button is clicked - with the true action being to execute a block of JavaScript code (the handler could be set up on page load, but just chucked it in one spot for simplicity)

var handler = StripeCheckout.configure({
    key: '[redacted]',
    locale: 'auto',
    token: function(token) {
        console.log(token);
    }
});

handler.open({
    name: 'Demo Site',
    description: '2 widgets',
    currency: "aud",
    amount: 2000
});

So, now with our advanced implementation, we are left with much the same form:

(This is just test card information supplied with by Stripe - see: https://stripe.com/docs/testing)

So, when the user submits the payment information, the token function will be called. With that we are returned with the following information:

Further, if we look in our dashboard on Stripe for the account, we should see this activity logged:

So, with that information, you would then want to initiate a request to a PL/SQL process to make the actual charge to the customers card. A post for another day.