Stripe payment_method

Wappler General How To
14

Hey Jon,

Given your description, perhaps you have a standard server connect form, instead of a Stripe Checkout form?

Here is a basic payment intent flow that shows how to have a single purchase (very much the same as Ben’s), using an in-app payment method (as opposed to using Stripe checkout portal). Maybe it will trigger something for you.

checkout api:

Screenshot 2023-04-23 at 9.50.30 AM
Screenshot 2023-04-23 at 9.50.30 AM2998×992 322 KB

And you will need the secret key configured:

Screenshot 2023-04-23 at 9.55.17 AM
Screenshot 2023-04-23 at 9.55.17 AM1648×870 58.2 KB

Here’s the stripe component on the client side:

<dmx-stripe id="stripe1" key="pk_test_9v8bV-REDACTED-Q2Hom" dmx-bind:line-items="" checkout="server">
</dmx-stripe>

There also must be a Stripe Checkout Form:

<form id="form_purchase" is="dmx-stripe-checkout-form" method="post" action="/api/checkout" dmx-on:error="notifies1.warning(error)" dmx-on:success="notifies1.success('Valid order')">

        <div class="row">
            <div class="col-12 col-md-8 col-lg-7 col-xl-5 text-start">
                <div class="row">
                    <div class="col">
                        <h1>Purchase</h1>
                        <p class="text-h3">Enter your details below.</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <dmx-stripe-payment-method id="input1" payment-methods="card" display="tabs"></dmx-stripe-payment-method>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col">
                        <button id="form_purchase.submit" class="btn btn-primary" type="submit">Buy now&nbsp;<span class="spinner-border spinner-border-sm" role="status" dmx-show="processing"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
2 Likes