Make a payment

Payment is the final step in the checkout process, allowing you to finalize an order. There are two payment flows:

no-payment flow for merchant partners
payment flow for affiliate partners

For more information on the differences, check out the Getting started page.

No-payment flow

Access to this flow requires special authorization. To get set up, contact business-support@musement.com.

To "pay" for an order under the no-payment flow, make the following request:

Copy

Copied

curl -X POST '{baseUrl}/payments/no/payment' \
-H 'X-Musement-Application: {applicationValue}' \
-H 'X-Musement-Version: 3.4.0' \
-H 'Authorization: Bearer {accessToken}' \
-H 'Content-Type: application/json' \
--data-raw '{
	"uuid": "{orderUuid}"
}'

Payment flow - Stripe

Affiliate partners using the payment flow must use Musement's payment gateway, Stripe, to pay for an order. Stripe will process credit card data and the order status will update based on the payment result.

Below we outline the basic steps for handling payment with Stripe.

1. Implement Stripe on the client side

We use Stripe's 3D Secure 2 authentication standard as the main credit card processing method. We strongly recommend using Stripe Elements to collect credit card information as their other solutions are being deprecated.

Load the Stripe script:

Copy

Copied

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

Create and mount the form:

HTML

Copy

Copied

<!-- 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>

JavaScript

Copy

Copied

var stripe = window.Stripe('{publicStripeApiKey}');
var elements = stripe.elements({locale: '{locale}'});
var cardElement = elements.create('card');
cardElement.mount('#card-element');

In the JavaScript example above, you need to replace the {publicStripeApiKey} text with our public Stripe API key. The key to use depends on the environment:

Sandbox: pk_test_tulgJ5FZniT3DGCgwzxA3uKo
Production: pk_live_ksevD0pPgdOMpQROpAhWHdYE

We recommend providing a locale as well, replacing {locale} in the example above with one of Stripe's supported locale codes (for example en or it).

2. Get the payment method ID from Stripe

To proceed with payment, you need to get a Stripe payment method ID. In the JavaScript code example below, you can get the ID from result.paymentMethod.id:

Copy

Copied

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 {
			// Send Musement result.paymentMethod.id
		}
	});
});

Please note that the cardButton element is optional if you are using your own call to action (CTA).

3. Call the Musement payment endpoint

Once you have obtained the payment method ID, make the following request to the Musement API:

Copy

Copied

curl -X POST '{baseUrl}/payments/split/payment' \
-H 'X-Musement-Application: {applicationValue}' \
-H 'X-Musement-Version: 3.4.0' \
-H 'Authorization: Bearer {accessToken}' \
-H 'Content-Type: application/json' \
--data-raw '{
	"order_uuid": "{orderUuid}",
	"stripe_token": "{paymentMethodId}"
}'

4. 3DS verification

A successful response from the /payments/split/payment endpoint may require an additional 3DS verification.

Payments which require a 3DS verification will return a 3d_secure property in the response:

Copy

Copied

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

If the 3d_secure property is not present, payment was successful and you can show a success message to the customer.

When the 3d_secure property is present, you must authenticate the payment with Stripe by using the response's 3DS2 verification code (3d_secure.payment_intent_client_secret in the example response above). The example below illustrates the process in JavaScript:

Copy

Copied

stripe.handleCardAction('{paymentIntentClientSecret}')
	.then(function (result) {
		if (result.error) {
			// handle error
		} else {
			// Send Musement the result.paymentIntent.id
		}
	})
;

On a successful response, you can get the payment intent ID (in the example above, result.paymentIntent.id) and make the following request to confirm successful payment:

Copy

Copied

curl -X POST '{baseUrl}/payments/split/complete_3d_secure' \
-H 'X-Musement-Application: {applicationValue}' \
-H 'X-Musement-Version: 3.4.0' \
-H 'Authorization: Bearer {accessToken}' \
-H 'Content-Type: application/json' \
--data-raw '{
	"order_uuid": "{orderUuid}",
	"payment_intent_id": "{paymentIntentId}"
}'