Adding Paypal's Smart Buttons to Dawn theme

Hyeonwoo
Visitor
1 0 0

I'm using PayPal Express Checkout for Payments.

This payment method doesn't provide the option to pay via debit / credit card without creating an account.

After consulting with Paypal to add this option, I got the answer that I just need to add the code below to the checkout page to use Smart Buttons.

But I don't know where to put this code.

Please, someone who knows how to do this, please reply.

---------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>PayPal Standard Payments Integration | Client Demo</title>
</head>

<body>
<div id="paypal-button-container"></div>
<!-- Sample PayPal credentials (client-id) are included -->
<script src="https://www.paypal.com/sdk/js?client-id=test&currency=USD&intent=capture" data_source="integrationbuilder"></script>

<script>
const fundingSources = [
paypal.FUNDING.PAYPAL,
paypal.FUNDING.CARD
]

for (const fundingSource of fundingSources) {
const paypalButtonsComponent = paypal.Buttons({
fundingSource: fundingSource,

// optional styling for buttons
// https://developer.paypal.com/docs/checkout/standard/customize/buttons-style-guide/
style: {
shape: 'rect',
height: 40,
},

// set up the transaction
createOrder: (data, actions) => {
// pass in any options from the v2 orders create call:
// https://developer.paypal.com/api/orders/v2/#orders-create-request-body
const createOrderPayload = {
purchase_units: [
{
amount: {
value: '88.44',
},
},
],
}

return actions.order.create(createOrderPayload)
},

// finalize the transaction
onApprove: (data, actions) => {
const captureOrderHandler = (details) => {
const payerName = details.payer.name.given_name
console.log('Transaction completed!')
}

return actions.order.capture().then(captureOrderHandler)
},

// handle unrecoverable errors
onError: (err) => {
console.error(
'An error prevented the buyer from checking out with PayPal',
)
},
})

if (paypalButtonsComponent.isEligible()) {
paypalButtonsComponent
.render('#paypal-button-container')
.catch((err) => {
console.error('PayPal Buttons failed to render')
})
} else {
console.log('The funding source is ineligible')
}
}
</script>
</body>
</html>

---------------------------------------------------------------------------------------------------------

Replies 3 (3)

Joanlovecat
Visitor
1 0 0

Hey, have you figured it out? I have the same issue....

RUFA
Tourist
3 0 1

Have you figured out where to paste this code?

 

MRamzan
Shopify Partner
165 2 24

You can follow this video to implement paypal smart buttons in shopify Dawn theme:

 

 

For other themes you can find a playlist in the same channel.

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112