# 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](/api/getting-started#merchant)
* *payment flow* for [affiliate partners](/api/getting-started#affiliate)


For more information on the differences, check out the [Getting started page](/api/getting-started#types-of-integrations).

## No-payment flow

Access to this flow requires special authorization. To get set up, contact [business-support@musement.com](mailto:business-support@musement.com).

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


```bash
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](https://stripe.com/docs), 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](https://stripe.com/en-it/guides/3d-secure-2) as the main credit card processing method. We strongly recommend using [Stripe Elements](https://stripe.com/docs/payments/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](https://github.com/stripe/stripe-js) from the [npm public registry](https://www.npmjs.com/).


```shell
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](https://docs.stripe.com/js#stripe-function) after Stripe.js loads.


```javascript
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](https://docs.stripe.com/libraries/stripejs-esmodule#web-stripejs-html).

#### Create and mount the form

**HTML**


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

**JavaScript**


```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](https://stripe.com/docs/js/appendix/supported_locales) (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`:


```javascript
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:


```bash
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


```javascript
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](https://docs.stripe.com/payments/card-element?platform=ios) and [Android](https://docs.stripe.com/payments/card-element?platform=android) SDKs.