0

Just trying to make a merchandise web shop with Craft CMS 3 and Craft Commerce 3. However, whenever payment is attempted to be made for merchandise on checkout page with commerce/payments/pay, there is the flash error: "Invalid payment or order. Please Review."

There is nothing listed in attempted payments in the craft commerce Orders tab, and there is nothing in the logs tab either.

My html form for posting payment looks like:

<form method="POST" class="form-horizontal" id="paymentForm">
<input type="hidden" name="action" value="commerce/payments/pay"/>
<input type="hidden" name="redirect" value="{{'/shop/complete?number={number}'|hash}}"/>
<input type="hidden" name="cancelUrl" value="{{'/shop/checkout'|hash}}"/>
{{ csrfInput() }}
                            
{% if cart.itemTotal == "0" %}
    <button type="submit" class="btn btn-primary btn-lg">Complete Order</button>

{% elseif cart.itemTotal > "0" %}
{% set stripeGatewayId = "3" %}
{% set stripeGateway = craft.commerce.gateways.getGatewayById(stripeGatewayId) %}
                                    
<noscript>
<div class="alert alert-danger">
<h4>JavaScript is not enabled!</h4>
            
<p>This payment form requires your browser to have JavaScript enabled. Please activate JavaScript and reload this page. Check <a
                                                            href="http://enable-javascript.com" target="_blank">enable-javascript.com</a>for more informations.</p>
</div>
</noscript>

<span class="payment-success"></span>           
                
<script src="https://checkout.stripe.com/checkout.js"></script>
                
<div id="payment-request-button" style="display: inline-block; width: 100px; vertical-align: middle">
<!-- A Stripe Element will be inserted here. -->
</div>
                
<button id="stripeButton" class="btn btn-primary btn-lg">Pay with Card</button>
                
{% set amount = cart.totalPrice|commerceCurrency(cart.paymentCurrency,convert=true,format=false) * 100 %}
{% set description = names|join(', ') %}
                
<script>
var stripeDone = function(token) {
$('#paymentForm').append($('<input>').attr({ type: 'hidden', name: 'stripeToken', value: token.id })).submit();
};
                    
var handler = StripeCheckout.configure({
key: '{{ stripeGateway.settings.publishableKey ?? '' }}',
locale: 'auto',
token: stripeDone
});
                    
document.getElementById('stripeButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'AMSS',
description: '{{ description }}',
email: '{{ cart.email }}',
currency: '{{ cart.paymentCurrency|lower }}',
amount: {{ amount }}
});
e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
                            
<script src="https://js.stripe.com/v3/"></script>
                                                
<script>
var stripe = Stripe('{{ stripeGateway.settings.publishableKey ?? '' }}');
                
var paymentRequest = stripe.paymentRequest({
country: 'AU',
currency: '{{ cart.paymentCurrency|lower }}',
total: {
    label: '{{ description }}',
    amount: {{ amount }},
    },
});
                
var elements = stripe.elements();
var prButton = elements.create('paymentRequestButton', {
    paymentRequest: paymentRequest,
    style: {
    paymentRequestButton: {
        height: '45px'
            },
        },
    });
                
// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result) {
if (result) {
prButton.mount('#payment-request-button');
} else {
document.getElementById('payment-request-button').style.display = 'none';
}
});
                
paymentRequest.on('token', function(ev) {
stripeDone(ev.token);
});
</script>
{% endif %}
</form>

My html form for adding the merchandise to cart looks like (which add manages to add cart successfully and can be seen in backend):

<form method="POST" id="product-form">
<input type="hidden" name="action" value="commerce/cart/update-cart">
<input type="hidden" name="redirect" value="{{ (craft.app.request.getQueryParam('next') ?: (product.defaultVariant.maxQty == 1 ? 'shop/checkout' : (product.type == 'merchandise' ? 'merchandise' : product.url)~'?showCart=1'))|hash }}">
                        
<input type="hidden" name="redirect" value="{{'merchandise'|hash}}">
<input type="hidden" name="qty" value="1">
{{ csrfInput() }}

Any help on the error would be much appreciated

2
  • 1
    What gateway are you using? I don’t see cart.gateway.getPaymentFormHtml() in your code at all? Jul 12, 2021 at 15:38
  • Sorry, I have now added it in the response Jul 13, 2021 at 3:41

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy