Make a payment

Copy

• Copy for LLM

  Copy page as Markdown for LLMs
• View as Markdown

  Open this page as Markdown
• Open in ChatGPT

  Get insights from ChatGPT
• Open in Claude

  Get insights from Claude
• Connect to Cursor

  Install MCP server on Cursor
• Connect to VS Code

  Install MCP server on VS Code

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:

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 via credit card 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 Stripe.js as an ES Module

To install by package manager, install the Stripe.js ES Module from the npm public registry.

npm install @stripe/stripe-js

Next, import the module into a JavaScript file. The following function returns a Promise that resolves with a newly created Stripe object after Stripe.js loads.

import {loadStripe} from '@stripe/stripe-js';

const stripe = await loadStripe('{publicStripeApiKey}');

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:

Stripe SDKs public keys

• Sandbox: pk_test_tulgJ5FZniT3DGCgwzxA3uKo (must be used in DEV, TEST environments)
• Production: pk_live_ksevD0pPgdOMpQROpAhWHdYE (must be used just for PROD env)

You can also load the Stripe.js script manually.

Create and mount the form

HTML

<form id="payment-form">
	<div id="card-element">
		<!-- Elements will create input elements here -->
	</div>
	<button id="submit">Pay</button>
</form>

JavaScript

const elements = stripe.elements({locale: '{locale}'});
const cardElement = elements.create('card');
cardElement.mount('#card-element');

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:

const form = document.getElementById('payment-form');
form.addEventListener('submit', async (e) => {
	e.preventDefault();
	stripe.createPaymentMethod({
		type: 'card',
		card: cardElement
	})
	.then(function(result) {
		// Handle result.error or result.paymentMethod
	});
});

3. Call the Payment Service for creating payment intent

Once you have obtained the payment method ID, make the following request to the Payment Service:

curl -X POST '{paymentServiceBaseUrl}/v1/create' \
-H 'X-Musement-Application: {applicationValue}' \
-H 'Payment-Session-ID: {cartUuid}' \
-H 'X-Musement-Version: 3.4.0' \
-H 'Authorization: Bearer {accessToken}' \
-H 'Content-Type: application/json' \
--data-raw '{
	"order_uuid": "{orderUuid}",
	"gateway": "stripe",
	"gateway_token": "{paymentMethodId}"
}'

The Payment-Session-ID header is used to send a "session id" (cart_token) to our anti-fraud system. It is not required by design but it is highly recommended.

4. Confirm the payment

const {error: stripeError, paymentIntent} = await stripe.confirmCardPayment(clientSecret);

You can access the client secret by gateway_token property in the response of the payment service /create endpoint. stripe.confirmCardPayment will trigger our Radar rules to execute and may open a dialog for your customer to authenticate their payment. You may redirect your customer to order confirmation page when the stripe.confirmCardPayment function successfully executed.

This documentation is for the web integration. If you need to implement Stripe Card Element to your native mobile application then you should check Stripe's iOS and Android SDKs.