**Note:** By default, PayPal JavaScript SDK provides smart logic to display only appropriate marks and buttons for the current buyer. This optional parameter bypasses the buyer country check for desired payment methods. For example: src="[https://www.paypal.com/sdk/js?client-id=YOUR\_CLIENT\_ID\&enable-funding=venmo](https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID\&enable-funding=venmo)"
| | `currency` | `USD` | This is the currency for the payment. This value needs to match the currency used when creating the order. | | `locale` | automatic | The locale renders components. By default PayPal detects the correct locale for the buyer based on their geolocation and browser preferences. It is recommended to pass this parameter with a [supported locale](/sdk/js/reference) if you need the PayPal buttons to render in the same language as the rest of your site. | | `intent` | `capture` | The intent for the transaction. This determines whether the funds are captured immediately while the buyer is present on the page. | | `commit` | `true` | This indicates that the final amount won't change after the buyer returns to your site from PayPal. | | `vault` | `false` | Whether the payment information in the transaction will be saved. Save your customers' payment information for billing agreements, subscriptions, or recurring payments. Marking this parameter `false` shows all funding sources, including payment methods that can't be saved. | See additional, [optional parameters](/sdk/js/reference). ## 2. Render payment mark [#2-render-payment-mark] You can use a [mark integration](/v5/checkout/show-payment-method) for payment field components to present the buyer's payment method options as radio buttons.
```javascript lineNumbers
paypal.Marks({
fundingSource: paypal.FUNDING.TRUSTLY
}).render('#trustly-mark')
```
## 3. Render payment fields [#3-render-payment-fields]
Integrate payment fields to collect payment information from buyers. Fields dynamically render based on the selected payment source. You can customize the fields to align with your brand.
You can choose from the following checkout flows:
* [Single page](#single-page)
* [Multi-page](#multi-page)
### Single page [#single-page]
The Trustly payment fields collect first name and last name.
If there are validation errors in the input fields, they'll show when the buyer selects the button.
```javascript lineNumbers
paypal.PaymentFields({
fundingSource: paypal.FUNDING.TRUSTLY,
/* style object (optional) */
style: {
/* customize field attributes (optional) */
variables: {},
/* set custom rules to apply to fields classes (optional) */
rules: {},
},
fields: {
/* fields prefill info (optional) */
name: {
value: "John Doe",
},
}
})
.render("#trustly-container")
```
For `style` parameters, please reference this style page: [Custom style for payment fields](/payment-methods/style)
### Multi-page [#multi-page]
A multi-page checkout flow spreads the checkout steps into two or more pages. This experience is applicable when an order details page needs to be shown to the buyer before an order is placed.
> **Note:** **Tip:** German merchants can leverage the multi-page flow to comply with local regulations.
#### First page of the checkout flow [#first-page-of-the-checkout-flow]
This example renders the mark and payment fields, but not the payment button, on your checkout page.
#### Payment mark
```text lineNumbers
paypal.Marks({
fundingSource: paypal.FUNDING.TRUSTLY
}).render('#trustly-mark')
```
#### Payment fields
```text lineNumbers
paypal.PaymentFields({
fundingSource: paypal.FUNDING.TRUSTLY,
/* style object (optional) */
style: {
/* customize field attributes (optional) */
variables: {},
/* set custom rules to apply to fields classes (optional) */
rules: {},
},
onInit: (data, actions) => {
const form = document.querySelector("form.paypal-payment-form");
form.addEventListener("submit", (e) => {
const formData = new FormData(form);
const paymentSource = formData.get("payment-option");
if (paymentSource === paypal.FUNDING.TRUSTLY) {
e.preventDefault();
actions.validate().then((valid) => {
if (valid) {
window.location.href = `/second-page.html?payment-option=${paypal.FUNDING.TRUSTLY}`;
}
});
}
});
},
fields: {
/* fields prefill info (optional) */
name: {
value: "John Doe",
},
},
})
.render("#trustly-container");****
```
#### Second page of the checkout flow [#second-page-of-the-checkout-flow]
Based on the payment method selected on the first page, the payment button displays, along with the order details on the second page. To complete checkout, your buyer clicks the payment button, authorizes, and confirms payment. You get the code to render the payment button in [step 4](#4-render-payment-button).
For `style` parameters, please reference this style page: [Custom style for payment fields](/payment-methods/style)
## 4. Render payment button [#4-render-payment-button]
```javascript lineNumbers
paypal.Buttons({
fundingSource: paypal.FUNDING.TRUSTLY,
style: {
label: "pay",
},
createOrder() {
return fetch("/my-server/create-paypal-order", {
method: "post",
// use the "body" param to optionally pass additional order information
// like product skus and quantities
body: JSON.stringify({
cart: [
{
sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
quantity: "YOUR_PRODUCT_QUANTITY",
},
],
}),
})
.then((response) => response.json())
.then((order) => order.id);
},
onApprove(data) {
// You do not need to capture the order, as the order is already captured
// You can show a "Thank you" message and listen for the PAYMENT.CAPTURE.COMPLETED or PAYMENT.CAPTURE.DENIED webhooks to get the capture status
// To show a "Thank you" message you can do
// const element = document.getElementById('paypal-button-container');
// element.innerHTML = '