服务器端提交的条纹支付意图示例

Question

我正在研究带有支付意图 API 的 Stripe 支付网关。官方页面上的所有示例都包含带有功能的 jquery 提交示例 - payWithCard（功能名称）。

我们是否有任何示例可以在服务器上提交并在发送付款之前进行一些验证？

使用 Charge API，我们可以在服务器上发布数据，然后我们可以发送付款。

是否可以使用 Payment Intent API 或者我需要使用 Jquery？

Answer 1

您可以通过 Stripe 文档了解详细信息。在实现 Stripe 时，我们实际上同时使用了服务器端和 Javascript。我在这里提供示例工作代码。

下载 Stripe 包，我在这里使用来自 Github 存储库的 PHP。

然后在html页面中使用下面的javascript

    function handleStripe() {               

        var stripe = Stripe("STRIPE PUBLISHABLE KEY");

        var data = {
            "sess": "Some valuable data",
            "rcom": "Some valuable data"
        };
    
        fetch("stripe-intent-book.php", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        })
        .then(function(result) {
            return result.json();
        })
        .then(function(data) {
            var elements = stripe.elements({
                fonts: [
                    {
                        cssSrc: 'https://fonts.googleapis.com/css?family=Quicksand',
                    },
                ],
                locale: window.__exampleLocale,
            });         

            var elementStyles = {
                base: {
                    color: '#32325D',
                    fontWeight: 500,
                    fontFamily: 'Source Code Pro, Consolas, Menlo, monospace',
                    fontSize: '16px',
                    fontSmoothing: 'antialiased',

                    '::placeholder': {
                        color: '#CFD7DF',
                    },
                    ':-webkit-autofill': {
                        color: '#e39f48',
                    },
                },
                invalid: {
                    color: '#E25950',

                    '::placeholder': {
                        color: '#FFCCA5',
                    },
                },
            };

            var elementClasses = {
                focus: 'focused',
                empty: 'empty',
                invalid: 'invalid',
            };
        
            var cardNumber = elements.create('cardNumber', {
                style: elementStyles,
                classes: elementClasses,
            });
            cardNumber.mount('#card-number');

            var cardExpiry = elements.create('cardExpiry', {
                style: elementStyles,
                classes: elementClasses,
            });
            cardExpiry.mount('#card-expiry');

            var cardCvc = elements.create('cardCvc', {
                style: elementStyles,
                classes: elementClasses,
            });
            cardCvc.mount('#card-cvc');
        
            var inputs = document.querySelectorAll('.stripeCC .input');
            Array.prototype.forEach.call(inputs, function(input) {
                input.addEventListener('focus', function() {
                    input.classList.add('focused');
                });
                input.addEventListener('blur', function() {
                    input.classList.remove('focused');
                });
                input.addEventListener('keyup', function() {
                    if (input.value.length === 0) {
                        input.classList.add('empty');
                    } else {
                        input.classList.remove('empty');
                    }
                });
            });

            cardNumber.on("change", function (event) {
                document.querySelector("button").disabled = event.empty;
                document.querySelector("#card-error").textContent = event.error ? event.error.message : "";
            });
        
            $('#submit').click(function() {
                payWithCard(stripe, cardNumber, data.clientSecret);
            });

        });
    
    }

以及下面的服务器端PHP代码

    <?php   

        \Stripe\Stripe::setApiKey("Stripe Secret key");

        header('Content-Type: application/json');

        try {

            $json_str = file_get_contents('php://input');
            $json_obj = json_decode($json_str);
            $sess           = $json_obj->sess;
            $rcom           = $json_obj->rcom;
    
            $amt            = 10; /* Specify the amount to be charged here */
            $amt            = $amt * 100;

            $paymentIntent = \Stripe\PaymentIntent::create([
                'amount' => $amt,
                'currency' => 'gbp'
            ]);

            $output = [
                'clientSecret' => $paymentIntent->client_secret,
            ];

            echo json_encode($output);
        } catch (Error $e) {
            http_response_code(500);
            echo json_encode(['error' => $e->getMessage()]);
        }

    ?>

来自下面的 Stripe API 参考是 .Net 代码，请您通过Stripe API doc 请

    // Set your secret key. Remember to switch to your live secret key in production.
    // See your keys here: https://dashboard.stripe.com/apikeys
    StripeConfiguration.ApiKey = "sk_test_tR3PYbcVNZZ796tH88S4VQ2u";

    var options = new PaymentIntentCreateOptions
    {
        Amount = 1099,
        Currency = "usd",
        PaymentMethodTypes = new List<string> {
            "card",
        },
    };

    var service = new PaymentIntentService();
    var intent = service.Create(options);