Last updated 2 hours ago

Payment

The payment, as last part of the checkout process, let you finalize the order. Two payment flows are available:

  • no-payment flow picked by merchant partners
  • payment flow picked by affiliate partners.

Get here the difference between merchant and affiliate partners!

If you picked the no-payment flow as a merchant partner, you make this request:

curl -X POST '{baseUrl}/payments/no/payment' \
-H 'X-Musement-Version: 3.4.0' \
-H 'Authorization: Bearer {accessToken}' \
-H 'Content-Type: application/json' \
--data-raw '{
	"orderUuid": "efbc64fa-ab9f-40aa-84db-590beed8350d"
}'

If you picked the payment flow as an affiliate partner, you connect to Stripe, the Musement payment gateway. Once the order is created, partners connect with our Stripe account and host payments on their platforms. Stripe will process credit cards data and update order status based on outcomes of payment processes.
There are 3 steps to follow:

  1. You implement the Stripe payment on a client side:

We now support 3D Secure 2 verification as it is expected to be the main card authentication method. We strongly recommend to use Stripe Elements to collect credit card information as other solutions are going to be deprecated by Stripe in the near future. As a first step, you load the Stripe script:

<script src="https://js.stripe.com/v3/"></script>  

Secondly, you create and mount the form:

  • in your HTML code:
// optional
<input id="cardholder-name" type="text">
<!-- placeholder for Elements -->
<div id="card-element"></div>
// optional
<div id="card-errors" role="alert"></div>
// optional
<button id="card-button">Submit Payment</button>
  • in your JS code:
var stripe = window.Stripe(public_stripe_api_key);
var elements = stripe.elements({locale: locale});
var cardElement = elements.create('card');
cardElement.mount('#card-element');

Musement public Stripe API keys are available: use pk_test_tulgJ5FZniT3DGCgwzxA3uKo as public_stripe_api_key for testing in the Sandbox enviroment, and use pk_live_ksevD0pPgdOMpQROpAhWHdYE as public_stripe_api_key for the Production environment. We recommend to use the locale parameter: it has to be a two-characters long string in lower case (e.g. en; it).

  1. You get the payment_method_id

To proceed with the payment, you now need the Stripe payment_method_id. See below the JS code to return the value of the payment_method_id:

var cardholderName = document.getElementById('cardholder-name';
var cardButton = document.getElementById('card-button');
cardButton.addEventListener('click', function(ev) {
  stripe.createPaymentMethod('card', cardElement, {
    billing_details: {name: cardholderName.value}
  }).then(function(result) {
    if (result.error) {
      // Show error in payment form
    } else {
        // Call Musement payments API
      // sending result.paymentMethod.id
    }
  });
});

Please note cardButton value is optional if you are using your own CTA.

  1. You make request to the payment endpoint:

Retrieved the payment_method_id, you make this request:

curl -X POST '{baseUrl}/payments/split/payment' \
-H 'X-Musement-Version: 3.4.0' \
-H 'Authorization: Bearer {accessToken}' \
-H 'Content-Type: application/json' \
--data-raw '{
	"orderUuid": "efbc64fa-ab9f-40aa-84db-590beed8350d",
	"stripe_token": "stripe_payment_method_id"
}'

When it comes to responses 200 Success, a 3DS verification can be required or not. If it is not required, the payment was successful and the success message can be shown to customers. If it is required for any kind of Stripe or banks decisions, the JSON response to the above request will return a 3d_secure object:

{
    "3d_secure": {
    "type": "USE_STRIPE_SDK",
    "payment_intent_client_secret": "stripe_payment_intent_client"
  }
}

To end the flow, you need to authenticate the payment using the Stripe paymentintentclient (3DS2 verification code) you just received calling the complete_3d_secure endpoint:

stripe.handleCardAction('stripe_payment_intent_client')
    .then(handleResult)
function handleResult(result) {
    if (result.error) {
    // handle error    
  } else {
    // Call Musement complete_3d_secure API
    // sending result.paymentIntent.id    
  }
}

Once the payment_intent_client is retrieved, it has to be added to this request to finalize the order’s payment:

curl -X POST '{baseUrl}/payments/split/complete_3d_secure' \
-H 'X-Musement-Version: 3.4.0' \
-H 'Authorization: Bearer {accessToken}' \
-H 'Content-Type: application/json' \
--data-raw '{
	"orderUuid": "efbc64fa-ab9f-40aa-84db-590beed8350d",
	"payment_intent_id": "{stripePaymentIntentId}"
}'
Copyright © TUI Musement. All right reserved.